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