3D Secure: JavaScript SDK

Enable 3D Secure in the advanced credit and debit cards integration.

SDKCurrentAdvancedLast updated: September 9th 2021, @ 1:08:51 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 your integration.

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 will trigger an authentication for every transaction while SCA_WHEN_REQUIRED will trigger 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
        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
     */
}

See also