{"title":"Redirect 3D Secure Component integration","category":"default","creationDate":1567783140,"content":"
\n

\"\"  Postman collection<\/a><\/p>

Implementation examples<\/strong>
\"\"  Node.js<\/a><\/p>\n  \n  \n\n <\/div><\/div>\n\n

The Card Component<\/a> handles 3D Secure redirect flow<\/a> to complete the required 3D Secure authentication.<\/p>\n

\n

Follow the instructions on this page if your integration uses the \/payments<\/a> or \/payments\/details<\/a> endpoint, and Checkout API 49 or later.
\n
If your integration uses only the \/sessions<\/a> endpoint, you do not need additional configuration for 3D Secure. If you are using Checkout API 46 or earlier, follow instructions in the 3D Secure 2 integration guide for v46 or earlier<\/a>.<\/p>\n<\/div><\/div>\n

To handle card payments with redirect 3D Secure authentication:<\/p>\n

    \n
  1. Get additional shopper details in your payment form<\/a>.<\/li>\n
  2. Make a payment request<\/a> with additional 3D Secure parameters.<\/li>\n
  3. Handle the redirect<\/a>.<\/li>\n
  4. Show the payment result<\/a>.<\/li>\n<\/ol>\n

    Requirements<\/h2>\n

    This page assumes you have already built a Card Component<\/a> integration.<\/p>\n

    If you are using 3D Secure for PSD2 compliance, read our comprehensive PSD2 SCA guide<\/a>.<\/p>\n

    Step 1: Get additional shopper details in your payment form<\/h2>\n

    For higher authentication rates, we strongly recommend that you collect the shopper's email address, cardholder name, billing address, and IP address for payments with 3D Secure authentication.<\/p>\n

    \n

    Get the shopper's email outside of the Card Component because it doesn't have a configuration to include shopper email in the payment form.<\/p>\n<\/div>\n

    To get the cardholder name and billing address in your payment form, include the following when creating an instance of the Card Component<\/a>:<\/p>\n