{"title":"Redirect 3DS Components integration","category":"default","creationDate":1567783140,"content":"

You can use the Redirect Component to handle Redirect 3D Secure 2 authentication if you have an API-only integration.<\/p>\n

If you have a Components integration that uses the Card Component, the Card Component can handle Redirect 3D Secure 2 authentication without additional integration. You do not need to use the 3D Secure 2 Component in this case.<\/p>\n

\n

This guide is for integrations using Redirect Component v5.0.0 with the Advanced flow<\/a>.
For v4.13.3 or earlier, use the guide for earlier versions<\/a>.<\/p>\n<\/div>\n

Requirements<\/h2>\n

Build your own UI<\/a> for collecting card details.<\/p>\n

Collect additional parameters in your payment form<\/h2>\n

For higher authentication rates, we strongly recommend that you collect the shopper's billing address and email address. Send these parameters to your server when making a payment, because they are required by the card schemes.<\/p>\n

Import the Redirect Component<\/h2>\n

When you import the library<\/a>, import the Redirect Component:<\/p>\n

\n <\/code-sample>\n<\/div>\n

Make a payment<\/h2>\n
    \n
  1. \n

    When you make a payment request<\/a>, include the following additional 3D Secure 2 parameters.<\/p>\n

    \n

    See additional 3D Secure 2 parameters that we recommend to include in your request to increase authentication performance in our API reference<\/a>.<\/p>\n<\/div>\n\n\n\n\n\n\n\n\n\n\n\n\n
    Parameter name<\/th>\nRequired<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
    paymentMethod<\/a><\/td>\n\"Required\"<\/span><\/td>\nThe type and required details for a card payment method. When using the Card Component<\/a>, pass the paymentComponentState.data.paymentMethod<\/code> object from your client app. When submitting raw card data, refer to Raw card data<\/a> for the fields that you need to pass.<\/td>\n<\/tr>\n
    paymentMethod.holderName<\/a><\/td>\n\"Conditionally<\/span><\/td>\nUse case<\/strong>: required for Visa and JCB transactions. The cardholder's name.<\/td>\n<\/tr>\n
    channel<\/a><\/td>\n\"Required\"<\/span><\/td>\nThe platform where the transaction takes place. Set to Android<\/strong>.<\/td>\n<\/tr>\n
    returnUrl<\/a><\/td>\n\"Required\"<\/span><\/td>\nThe URL where the shopper will be redirected back to after completing 3D Secure authentication. Get this URL from the Component in the RedirectComponent.getReturnUrl(context)<\/code>.
    Format<\/strong>:
    • Maximum characters: 1024.<\/li>
    • Must not include \/\/<\/code> (double slash) after the top-level domain.<\/li><\/ul><\/td>\n<\/tr>\n
    browserInfo<\/a><\/td>\n\"Required\"<\/span><\/td>\nThe shopper's browser information. The following sub-fields are required:
    shopperIP<\/a><\/td>\n\"Conditionally<\/span><\/td>\nUse case<\/strong>: required for Visa and JCB transactions. The shopper's IP address.<\/td>\n<\/tr>\n
    shopperEmail<\/a><\/td>\n\"Conditionally<\/span><\/td>\nUse case<\/strong>: required for Visa and JCB transactions. The cardholder's email address. If you do not include the shopper email, you must include the shopper's phone number in your request.<\/td>\n<\/tr>\n
    telephoneNumber<\/a><\/td>\n\"Conditionally<\/span><\/td>\nUse case<\/strong>: required for Visa and JCB transactions if you did not include the shopperEmail<\/code> field.
    The shopper's phone number. To be more specific, you can use the mobilePhone<\/code>, homePhone<\/code>, and workPhone<\/code> fields in the threeDS2RequestData<\/code> object.
    Format<\/strong>: The phone number must include a plus sign (+) and a country code (1-3 digits), followed by the number (4-15 digits).
    Example<\/strong>: +4912345678901<\/strong>
    If the value you provide does not follow the guidelines, we drop the value and do not submit it for authentication. <\/div><\/div><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \"This Required for all transactions.
    \"This Required for particular setups, or issuers and card schemes.
    \"This Recommended for all transactions, but not required.<\/p>\n

    \n<\/code-sample>\n<\/div>\n<\/li>\n
  2. \n

    In the response, check if there is an action<\/code> object. Your next steps depend on whether the response contains an action<\/code> object, and on the action.type<\/code>.<\/p>\n\n\n\n\n\n\n
    Response<\/th>\nDescription<\/th>\nWhat to do<\/th>\n<\/tr>\n<\/thead>\n
    No action<\/code> object<\/td>\nThe transaction was either exempted or out-of-scope for 3D Secure 2 authentication.<\/td>\nContinue to get the payment outcome<\/a>.<\/td>\n<\/tr>\n
    action.type<\/code>: redirect<\/strong><\/td>\nThe payment qualifies for 3D Secure.<\/td>\nHandle the redirect<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    A sample response with action.type<\/code>: redirect<\/strong>:<\/p>\n

    \n<\/code-sample>\n<\/div>\n<\/li>\n<\/ol>\n

    Handle the redirect<\/h2>\n

    Pass the action<\/code> object to the Component to handle the redirect<\/a>. The shopper is redirected to a separate page to perform 3D Secure 2 authentication and returns to your app after.<\/p>\n

    Continue to get the payment outcome<\/a>.<\/p>\n

    Test and go live<\/h2>\n

    Use our test card numbers to test how your integration handles different 3D Secure authentication scenarios<\/a>.<\/p>\n

    When you are ready to go live<\/a>, follow our go-live checklist<\/a>.<\/p>\n

    When using our live endpoints<\/a>, make sure that all API requests you make for the same payment session use the same live endpoint region. Using different regions for \/payments<\/a> and \/payments\/details<\/a> requests may result in errors when authenticating with 3D Secure.<\/p>\n

    See also<\/h2>\n