3D Secure: JavaScript SDK

SDK

Last updated: Aug 15th, 5:58am

Important: This is a legacy integration. Version 2 is the current integration.

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.

The 3D_SECURE option is deprecated. For new integrations, trigger authentication for every transaction by passing SCA_ALWAYS as the contingencies parameter.

1// Check eligibility for advanced credit and debit card payments
2if (paypal.HostedFields.isEligible()) {
3    // render the card fields
4    paypal.HostedFields.render({
5        createOrder: () => {
6            // add logic to return an order ID from your server
7        },
8        fields: {
9            number: {
10                selector: '#card-number',
11                placeholder: 'card number'
12            },
13            cvv: {
14                selector: '#cvv',
15                placeholder: 'CVV',
16            },
17            expirationDate: {
18                selector: '#expiration-date',
19                placeholder: 'mm/yyyy'
20            }
21        }
22    }).then(function (hf) {
23
24        document.querySelector('#my-sample-form').addEventListener('submit', (event) => {
25            event.preventDefault();
26
27            hf.submit({
28
29                // Trigger 3D Secure authentication
30                contingencies: ['SCA_WHEN_REQUIRED']
31
32            }).then(function (payload) {
33
34                /** sample payload
35                * {
36                * "orderId": "0BS14434UR665304G",
37                * "liabilityShift":  Possible,
38                * }
39                */
40
41                // Needed only when 3D Secure contingency applied
42
43                if (payload.liabilityShift === "POSSIBLE") {
44                     // 3D Secure passed successfully
45                }
46
47                if (payload.liabilityShift) {
48                     // Handle buyer confirmed 3D Secure successfully
49                }
50            });
51        });
52    });
53} else {
54    /*
55     * Handle experience when advanced credit and debit card payments
56     * card fields are not eligible
57     */
58}

Next steps

Go live

3D Secure: JavaScript SDK

Know before you code

Update the advanced card fields code

Next steps

See also