3D Secure: JavaScript SDK

SDKCURRENT

Last updated: Feb 27th, 8:01am

 

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.

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

    If you accept cookies, we’ll use them to improve and customize your experience and enable our partners to show you personalized PayPal ads when you visit other sites. Manage cookies and learn more