# 3D Secure: JavaScript SDK (/limited-release/commerce-platform/accept-payments/advanced/customize/use-3d-secure/js-sdk)



## Know before you code [#know-before-you-code]

> **Info:** 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.

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

## Update the advanced card fields code [#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](https://www.paypal.com/uk/webapps/mpp/PSD2?_ga=1.111666624.534655001.1714366805).

```text lineNumbers
// Create the CardFields component and define callbacks and contingencies
const cardField = paypal.CardFields({
  createOrder: function(data) {
    return fetch("myserver.com/api/paypal/order/create/", {
      method: "post",
      body: JSON.stringify({
        ...

        payment_source: { // wrap 3D Secure preference in `payment_source`
          card: {
            attributes: {
              verification: {
                method: "SCA_ALWAYS"
              },
            },
            experience_context: {
              shipping_preference: "NO_SHIPPING",
              return_url: "https://example.com/returnUrl",
              cancel_url: "https://example.com/cancelUrl",
            },
          },
        }
      }).then((res) => {
        return res.json();
      }).then((orderData) => {
        return orderData.id;
      });
    }, )
  },
  onApprove: function(data) {
    const {
      liabilityShift,
      orderID
    } = data;
    if (liabilityShift) {
      /* Handle liability shift. More information in 3D Secure response parameters */
    }
    return fetch('myserver.com/api/paypal/orders/${orderID}/capture/', {
      method: "post",
    }).then((res) => {
      return res.json();
    }).then((orderData) => {
      // Redirect to a success page
    });
  },
  onError: function(error) {
    // Do something with the error from the SDK
  }
});
// Render each field after checking for eligibility
if (cardField.isEligible()) {
  const nameField = cardField.NameField();
  nameField.render('#card-name-field-container');
  const numberField = cardField.NumberField();
  numberField.render('#card-number-field-container');
  const cvvField = cardField.CVVField();
  cvvField.render('#card-cvv-field-container');
  const expiryField = cardField.ExpiryField();
  expiryField.render('#card-expiry-field-container');
  // Add a click listener to submit button and call the submit function on the CardField component
  document.getElementById("multi-card-field-button").addEventListener("click", () => {
    cardField.submit().then(() => {
      // Submit is successful
    });
  });
}
```