Search code examples
javascriptpaypalexpress-checkout

Migrating from checkout.js to JavaScript SDK, but authorising before executing the payment?

We still use checkout.js to implement the Paypal express checkout. The steps there are:

  1. User clicks Paypal-Button
  2. User logs in to Paypal
  3. Paypal shows the amount to the user, who clicks "continue". This authorises the payment (but does not execute it).
  4. User gets back to the shop and sees a summary of his purchase
  5. User clicks "buy now", the shop tells paypal to execute the paypamt
  6. User sees "thank you"-page.

Now we want to migrate to the JavaScript SDK. According to this: https://developer.paypal.com/docs/checkout/standard/upgrade-integration/ the steps are now:

  1. User clicks Paypal-Button
  2. User logs in to Paypal
  3. Paypal shows the amount to the user, who clicks "buy now". This executes the payment.
  4. User sees "thank you"-page.

For legal reasons, we need Paypal to redirect the user back to the shop where he can click "buy now", like it's done with checkout.js. How can we implement these 6 steps with the Paypal JavaScript SDK instead of 4? I couldn't find any examples doing so.

Solution

  • Executing is v1/payments and checkout.js terminology; with the current JS SDK and v2/checkout/orders it's called "capturing" instead.

    The user clicking "Pay now" does not immediately capture the payment on PayPal's end, rather, it calls the onApprove function you provide to do the capture. That function can first show any message you need it to show, including updating the DOM of the page with the final confirmation information -- or, if you must, using JS to redirect away to a new confirmation page.

    When the final Pay confirmation is given, what you need to do is capture the payment, using actions.order.capture (client-side) or a server-side API call.

    [A server-side integration is always recommended, and in that case the createOrder function should also be calling a server route...see the code demo]

    Finally, a verbiage change is necessary to show the correct button text when there is going to be a confirmation step. By default with the JS SDK the final button within the PayPal approval flow says "Pay now". If you are going to have a confirmation message and required user action before capturing, that button needs to change to say "Continue" to indicate you're requiring an additional step. To change it, include the query string parameter &commit=false on the SDK line. In addition to the query string, any server-side API call to create an order must set "user_action": "CONTINUE" in the application_context object. (note that this object belongs in the top hierarchy of the create order request JSON, not inside a purchase_unit)