3D Secure: JavaScript SDK

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}