{"title":"Two-step checkout","category":"default","creationDate":1776961627,"content":"

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.<\/p>\n

Requirements<\/h2>\n

Before you begin, take into account the following requirements, limitations, and preparations.<\/p>\n\n\n\n\n\n\n
Requirement<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
Integration type<\/strong><\/td>\nMake sure that you have a Web Components\/Drop-in integration using the Advanced flow<\/a>.<\/td>\n<\/tr>\n
API credential roles<\/a><\/strong><\/td>\nMake sure that your API credential has the Checkout webservice role<\/strong>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

How it works<\/h2>\n
    \n
  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.<\/li>\n
  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.<\/li>\n
  3. On the review page, show the information that you want to include, and a Pay<\/strong> button.<\/li>\n
  4. When the shopper selects Pay<\/strong>, make a \/payments<\/a> request using the payment data you stored.<\/li>\n<\/ol>\n

    Modify your checkout page<\/h2>\n

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

    After the shopper selects a payment method, modify your checkout page to implement a two-step checkout flow.<\/p>\n

      \n
    1. \n

      In your Drop-in<\/a> or Components<\/a> configuration<\/code> object, set showPayButton<\/code> to false<\/strong> to hide the default Pay<\/strong> button.<\/p>\n

    2. \n

      On the page where the shopper enters their payment details, show your custom button. Implement your button with a function to:<\/p>\n

        \n
      1. Validate the shopper input in the payment form.<\/li>\n
      2. Store the payment data on your server to use it in your \/payments<\/a> request later.\n