Integrate 3D Secure using Hosted Fields

SDK

Last updated: Aug 15th, 6:00am

Enable 3D Secure for advanced credit and debit cards. This integration uses the JavaScript SDK.

If you have a standard checkout integration, you don't need to integrate 3D Secure. PayPal handles 3D secure authentication for standard checkout integrations

Important: This JavaScript SDK documentation uses the legacy HostedFields component. If you are integrated with the CardFields component, see Integrate 3D Secure using Card Fields for those integration steps.

Know before you code

Required

If you are based in Europe, you may be subjected to PSD2:

Include 3D Secure as part of your integration.
Pass the cardholder's billing address as part of the transaction processing.

See PSD2

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        document.querySelector('#my-sample-form').addEventListener('submit', (event) => {
24            event.preventDefault();
25            hf.submit({
26                // Trigger 3D Secure authentication
27                contingencies: ['SCA_WHEN_REQUIRED']
28            }).then(function (payload) {
29                /** sample payload
30                * {
31                * "orderId": "0BS14434UR665304G",
32                * "liabilityShift":  Possible,
33                * }
34                */
35                // Needed only when 3D Secure contingency applied
36                if (payload.liabilityShift === "POSSIBLE") {
37                     // 3D Secure passed successfully
38                }
39                if (payload.liabilityShift) {
40                     // Handle buyer confirmed 3D Secure successfully
41                }
42            });
43        });
44    });
45} else {
46    /*
47     * Handle experience when advanced credit and debit card payments
48     * card fields are not eligible
49     */
50}

Integrate 3D Secure using Hosted Fields

Know before you code

Update the advanced card fields code

See Also