\nOnly if you are displaying the component on the product detail page, add a product<\/code> object in the PayPal express context. The product object must include the id<\/code>, price<\/code>, and quantity<\/code> fields, so the component creates a temporary basket. The component uses quantity * price<\/code> to calculate the price.<\/p>\n\n
The component does not support handling quantity and variant changes on the product detail page.<\/p>\n<\/div>\n
The example below shows how to add the PayPal express button on your product detail page with custom styling configuration and callbacks to handle the payment flow.<\/p>\n
\n
<\/code-sample>\n<\/div>\n<\/li>\n\nOptionally, redirect shoppers to a review page before they complete the payment where they can review their order by setting enableReview<\/code> to {true}<\/strong>.<\/p>\n\n
<\/code-sample>\n<\/div>\n<\/li>\n\nConfigure your review page. The review page needs to:<\/p>\n
\n- Display an order summary with the shipping and billing addresses.<\/li>\n
- Show selected shipping and payment methods.<\/li>\n
- Use the
useAdyenReviewPage<\/code> hook to retrieve payment data.<\/li>\n- Call
submitPaymentDetails()<\/code> when the shopper confirms the order details.
\nBelow is an example implementation of the review page.<\/li>\n<\/ul>\n import {useAdyenReviewPage} from '@adyen\/adyen-salesforce-pwa'\n\n const ReviewPage = () => {\n const {data: basket} = useCurrentBasket()\n const customerId = useCustomerId()\n const {getTokenWhenReady} = useAccessToken()\n const {site} = useMultiSite()\n const navigate = useNavigation()\n const [authToken, setAuthToken] = useState()\n\n useEffect(() => {\n const getToken = async () => {\n const token = await getTokenWhenReady()\n setAuthToken(token)\n }\n getToken()\n }, [])\n\n const {isLoading, isSubmitting, paymentData, error, submitPaymentDetails} = useAdyenReviewPage({\n authToken,\n customerId,\n basketId: basket?.basketId,\n site,\n skip: !authToken || !basket?.basketId\n })\n\n const handlePlaceOrder = async () => {\n if (!paymentData) return\n\n try {\n const response = await submitPaymentDetails()\n\n if (response?.isSuccessful && response?.isFinal) {\n navigate(`\/checkout\/confirmation\/${response?.merchantReference}`)\n } else {\n \/\/ Handle payment failure\n }\n } catch (err) {\n \/\/ Handle error\n }\n }\n\n return (\n \/\/ Render order review UI\n <Button onClick={handlePlaceOrder} isLoading={isSubmitting}>\n Place Order\n <\/Button>\n )\n }<\/code><\/pre>\n<\/li>\n<\/ol>\n