Integrate 3D Secure using Card Fields

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}