3D Secure: JavaScript SDK

SDKCURRENT

Last updated: Oct 30th, 10:16am

Know before you code

If you're based in Europe, you may be subjected to PSD2. PayPal recommends including 3D Secure as part of your integration.

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

Important: This is version 2 of the 3D Secure integration guide. Version 1 is a legacy integration.

Update the advanced card fields code

To trigger the authentication, pass the required contingency with the verification method in the create orders payload. The verification method can be a contingencies parameter with SCA_ALWAYS or SCA_WHEN_REQUIRED.

SCA_ALWAYS triggers an authentication for every transaction, while SCA_WHEN_REQUIRED triggers an authentication only when a regional compliance mandate such as PSD2 is required. 3D Secure is supported only in countries with a PSD2 compliance mandate.

1// Create the CardFields component and define callbacks and contingencies
2     const cardField = paypal.CardFields({
3         createOrder: function (data) {
4             return fetch("myserver.com/api/paypal/order/create/", {
5             method: "post",
6             body: JSON.stringify({
7               ...
8               card: {
9                 attributes: {
10                   verification: {
11                             method: "SCA_ALWAYS"
12                         },
13                     },
14                 experience_context: {
15                     shipping_preference: "NO_SHIPPING",
16                     return_url: "https://example.com/returnUrl",
17                     cancel_url: "https://example.com/cancelUrl",
18                   },
19                 },
20             })
21             .then((res) => {
22                 return res.json();
23             })
24             .then((orderData) => {
25                 return orderData.id;
26             });
27           },
28         )},
29         onApprove: function (data) {
30             const { liabilityShift, orderID } = data;
31             if(liabilityShift) {
32              /* Handle liability shift. More information in 3D Secure response parameters */
33             }
34             return fetch('myserver.com/api/paypal/orders/${orderID}/capture/', {
35             method: "post",
36             })
37             .then((res) => {
38                 return res.json();
39             })
40             .then((orderData) => {
41                 // Redirect to a success page
42             });
43         },
44         onError: function (error) {
45             // Do something with the error from the SDK
46         }
47     });
48     // Render each field after checking for eligibility
49     if (cardField.isEligible()) {
50         const nameField = cardField.NameField();
51         nameField.render('#card-name-field-container');
52         const numberField = cardField.NumberField();
53         numberField.render('#card-number-field-container');
54         const cvvField = cardField.CVVField();
55         cvvField.render('#card-cvv-field-container');
56         const expiryField = cardField.ExpiryField();
57         expiryField.render('#card-expiry-field-container');
58         // Add a click listener to submit button and call the submit function on the CardField component
59         document.getElementById("multi-card-field-button").addEventListener("click", () => {
60             cardField
61             .submit()
62             .then(() => {
63                 // Submit is successful
64             });
65         });
66     }