Two-step checkout

In a two-step checkout flow, you redirect your shoppers to an additional page before they pay. This lets your shoppers review their order and payment details after they have filled in their details in your checkout form before they pay. A review page can include details of the payment, shipping method and address, billing information, and other details related to the purchase.

Requirements

Before you begin, take into account the following requirements, limitations, and preparations.

How it works

1. On your checkout page, collect the shopper's payment details, and show a custom button that redirects shoppers to an additional order review page.
2. When the shopper selects the button, store the payment data on your server, and redirect them to a page where they can review their payment and order details.
3. On the review page, show the information that you want to include, and a Pay button.
4. When the shopper selects Pay, make a /payments request using the payment data you stored.

Modify your checkout page

A two-step checkout flow starts with the same steps as the standard checkout flow. You make a /paymentMethods request to get the available payment methods, and present the payment methods and the checkout form with our Web Drop-in or Components.

After the shopper selects a payment method, modify your checkout page to implement a two-step checkout flow.

1. In your Drop-in or Components configuration object, set showPayButton to false to hide the default Pay button.

   This hides the default Pay button that otherwise triggers the onSubmit event when payment details are valid, and makes a payment request.

   When configuring Drop-in/Components for cards, you can configure optional events that let you show additional information on the review page later.

2. On the page where the shopper enters their payment details, show your custom button. Implement your button with a function to:

   1. Validate the shopper input in the payment form.
   2. Store the payment data on your server to use it in your /payments request later.
      • For Drop-in, store the dropin.activePaymentMethod.data.
      • For Components, store the data from the payment method component. For example, store card.data for the card component.

        The payment data expires after an hour. If you submit a payment request with it after it expires, the request fails. After the payment data expires, the shopper must repeat the checkout process from the beginning.

   3. Redirect the shopper to your review page.

   The following code sample uses the example function handleGoToReview for Drop-in.

3. In your Drop-in or Components configuration object, call your custom function from the onEnterKeyPressed callback.

Implement a review page

1. On the review page, create a new instance of checkout.

   • Only if you use Web Drop-in v6 or later, and import Drop-in with individual payment methods, you need to register the payment methods used in the Drop-in.

2. When the shopper selects the Pay button on your review page, make a /payments request. Use the payment data you stored.

3. Handle the /payments response. Implement logic to handle the response with and without the action object.

   Response	Description	Next steps
   Without action object	No additional steps are needed to complete the payment.	1. Handle the final state. 2. Get the payment outcome with your Components or Drop-in integration.
   With action object	The shopper needs to do additional actions to complete the payment.	1. Perform additional front-end actions with your Drop-in or Components integration. 2. Get the payment outcome with your Components or Drop-in integration.

Show additional information for cards

For card payments, you can show additional information on the review page using card component events.

When configuring Drop-in/Components, you can optionally configure the following events that allow you to show additional information on the review page.

See also

• Advanced flow integration guide