Last updated: May 6th, 11:40pm
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.
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 contingencies2const cardField = paypal.CardFields({3 createOrder: function(data) {4 return fetch("myserver.com/api/paypal/order/create/", {5 method: "post",6 body: JSON.stringify({7 ...89 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 orderID34 } = 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 page44 });45 },46 onError: function(error) {47 // Do something with the error from the SDK48 }49});50// Render each field after checking for eligibility51if (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 component61 document.getElementById("multi-card-field-button").addEventListener("click", () => {62 cardField.submit().then(() => {63 // Submit is successful64 });65 });66}