3D Secure: JavaScript SDK

SDKCurrentLast updated: April 6th 2022, @ 4:06:12 pm


Know before you code

  • If you are based in Europe, you may be subjected to PSD2. PayPal recommends that you include 3D Secure as part of your integration and also pass the cardholder's billing address as part of the transaction processing.
  • PayPal handles 3D Secure authentication for standard payments integrations. No changes are required for standard integrations.

Update the advanced card fields code

To trigger the authentication, pass a contingencies parameter with 3D_SECURE, SCA_ALWAYS, or SCA_WHEN_REQUIRED as the value where you submit the advanced credit and debit card payments instance.

SCA_ALWAYS and 3D_SECURE triggers an authentication for every transaction, while SCA_WHEN_REQUIRED triggers an authentication only when the regional compliance mandate such as PSD2 is required.


 // Check eligibility for advanced credit and debit card payments
if (paypal.HostedFields.isEligible()) {
    // render the card fields
    paypal.HostedFields.render({
        createOrder: () => {
            // add logic to return an order ID from your server
        },
        fields: {
            number: {
                selector: '#card-number',
                placeholder: 'card number'
            },
            cvv: {
                selector: '#cvv',
                placeholder: 'CVV',
            },
            expirationDate: {
                selector: '#expiration-date',
                placeholder: 'mm/yyyy'
            }
        }
    }).then(function (hf) {

        document.querySelector('#my-sample-form').addEventListener('submit', (event) => {
            event.preventDefault();

            hf.submit({

                // Trigger 3D Secure authentication
                contingencies: ['SCA_WHEN_REQUIRED']

            }).then(function (payload) {

                /** sample payload
                * {
                * "orderId": "0BS14434UR665304G",
                * "liabilityShift":  Possible,
                * }
                */

                // Needed only when 3D Secure contingency applied

                if (payload.liabilityShift === "POSSIBLE") {
                     // 3D Secure passed successfully
                }

                if (payload.liabilityShift) {
                     // Handle buyer confirmed 3D Secure successfully
                }
            });
        });
    });
} else {
    /*
     * Handle experience when advanced credit and debit card payments
     * card fields are not eligible
     */
}

Next steps

Go live

See also