On this page
No Headings
Last updated: June 30, 2026
Important: This JavaScript SDK documentation uses the CardFields component. If you integrated with the HostedFields component, see 3D Secure: Javascript SDK with Hosted Fields.
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.
// 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
});
});
}