From 9d466717f448a71a3ecc92ea505f447c26536749 Mon Sep 17 00:00:00 2001 From: Raiyan Sarker Date: Tue, 2 Apr 2024 14:10:35 +0600 Subject: [PATCH] docs(plugin): paypal integration missing createOrder callback (#6401) This PR adds missing information in paypal plugin docs which is crucial to its use. Previously, docs didn't mention about createOrder callback that is required by PayPal sdk to connect with backend for details like currency and amount to be charged. Medusa backend responds with required id for the PayPal sdk to use. Related to https://github.com/medusajs/nextjs-starter-medusa/issues/260#issuecomment-1944157985 Co-authored-by: Shahed Nasser <27354907+shahednasser@users.noreply.github.com> --- www/apps/docs/content/plugins/payment/paypal.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/www/apps/docs/content/plugins/payment/paypal.md b/www/apps/docs/content/plugins/payment/paypal.md index 10edf5e83c..897379b115 100644 --- a/www/apps/docs/content/plugins/payment/paypal.md +++ b/www/apps/docs/content/plugins/payment/paypal.md @@ -164,7 +164,7 @@ Then, add the Client ID as an environment variable based on the framework you’ Next, create the file that will hold the PayPal component with the following content: -```jsx +```tsx import { PayPalButtons, PayPalScriptProcessor, @@ -237,6 +237,8 @@ function Paypal() { )} + cart.payment_session.data.id as string} onApprove={handlePayment} disabled={processing} /> @@ -253,7 +255,7 @@ Here’s briefly what this code snippet does: 1. At the beginning of the component, the Medusa client is initialized using the JS Client you installed. 2. You also need to retrieve the cart. Ideally, the cart should be managed through a context. So, every time the cart has been updated the cart should be updated in the context to be accessed from all components. -3. This component renders a PayPal button to initialize the payment using PayPal. You use the components from the PayPal React components library to render the button and you pass the `PayPalScriptProcessor` component the Client ID. Make sure to replace `` with the environment variable you added. +3. This component renders a PayPal button to initialize the payment using PayPal. You use the components from the PayPal React components library to render the button and you pass the `PayPalScriptProcessor` component the Client ID. Make sure to replace `` with the environment variable you added. The PayPal button uses `id` provided from backend to inject total amount with currency. 4. When the button is clicked, the `handlePayment` function is executed. In this method, you initialize the payment authorization using `actions.order.authorize()`. It takes the customer to another page to log in with PayPal and authorize the payment. 5. After the payment is authorized successfully on PayPal’s portal, the fulfillment function passed to `actions.order.authorize().then` will be executed. 6. In the fulfillment function, you first ensure that the payment session for the PayPal payment processor is set as the [selected Payment Session in the cart](https://docs.medusajs.com/api/store#carts_postcartscartpaymentsession). Then, you send a request to the backend to [update the payment session](https://docs.medusajs.com/api/store#carts_postcartscartpaymentsessionupdate) data with the authorization data received from PayPal.