More Examples
This page contains more Paysafe Checkout examples.
Examples with 3D Secure Enabled
3D Secure (3DS) is supported only for Visa and Mastercard. 3D Secure 2 (3DS 2) is supported only for Visa, Mastercard, and American Express. The cardholder's email, phone or cell phone must be provided for 3DS2 with Visa products.
To enable 3DS support, add an accounts option to the Setup function and in this include a CC parameter containing the 3DS-enabled account ID. This must be the same as the one that is used later to take payment on the Merchant server, and it must support processing in the same currency as the one defined in the currency option. See the following topic for information about handling multiple currencies with 3DS.
If the customer's card supports 3DS, they may be shown an additional page from their card issuer within the overlay to authorize the payment. In the merchant Test environment, a simulator is used instead of a call to the card issuer to provide a range of 3DS responses.
Example with 3D Secure
<html>
<head>
<script src="https://hosted.paysafe.com/checkout/v1/latest/paysafe.checkout.min.js"></script>
</head>
<body>
...
<script>
paysafe.checkout.setup("my Base64 encoded single-use-token API key", {
amount: 5000,
currency: "USD",
companyName: "Example Inc.",
accounts: {
CC: 123456789 // 3DS enabled account ID
}
}, function(instance, error, result) {
// handle result or error
});
</script>
</body>
</html>
Example with 3D Secure 2
3D Secure 2 provides an improved, seamless way to authenticate customers while adding support for mobile applications and for biometric and token validation, and streamlining the checkout experience using “frictionless” authentication. See the 3D Secure 2 documentation for full details on implementing 3D Secure 2.
With 3D Secure 2, the merchant can pass in some additional optional parameters in the threeDS object for the Paysafe Checkout:
- authenticationPurpose – Only two values are permitted: PAYMENT_TRANSACTION (default value) and INSTALMENT_TRANSACTION
- maxAuthorizationsForInstalmentPayment
- billingCycle
You need to submit email, phone, or cellPhone parameters in the profile object as part of the threeDS setup. If this information is not provided during setup or is not available in the stored profile, email and phone fields will be displayed in the user interface, and the customer will be required to populate one of these fields to initiate a transaction.
Optionally, you may also pass the following in the layout object:
- collectCustomerDetails: true to collect the cardholder's email and phone from the user interface if 3DS2 and Visa products are not in use.
- collectBillingAddress: true to collect the cardholder's billing details from the user interface. This might be beneficial to your card acceptance rate with Visa products and 3DS2 authentication.
See the authentications object in the 3D Secure 2 API documentation for a description of these parameters.
<html>
<head>
<script src="https://hosted.paysafe.com/checkout/v1/latest/paysafe.checkout.min.js"></script>
</head>
<body>
...
<script>
paysafe.checkout.setup("my API key", {
amount: 5000,
currency: "USD",
companyName: "Example Inc.",
accounts: {
CC: 123456789 // 3DS enabled account ID
},
layout {
collectCustomerDetails: true,
collectBillingAddress: true
}
threeDS: {
profile: {
email: "johnsmith@paysafe.com",
phone: "023456789",
cellPhone: "0888112233"
}
useThreeDSecureVersion2: true,
authenticationPurpose: "INSTALMENT_TRANSACTION",
maxAuthorizationsForInstalmentPayment: 5,
billingCycle: {
endDate: "2020-01-26",
frequency: 5
}
}
}, function(instance, error, result) {
// handle result or error
});
</script>
</body>
</html>
Example with Additional Customer Details
Adding a billingAddress parameter during checkout setup associates the customer's billing address with the single-use token so that you don't have to provide it as part of the Authorization request to the Card Payments API when taking payment on your Merchant Server.
A billing address is required if you have AVS (Address Verification Service) enabled for your account.
<html>
<head>
<script src="https://hosted.paysafe.com/checkout/v1/latest/paysafe.checkout.min.js"></script>
</head>
<body>
...
<script>
paysafe.checkout.setup("my Base64 encoded single-use-token API key", {
amount: 5000,
currency: "USD",
companyName: "Example Inc.",
holderName: "John Smith",
accounts: {
CC: 123456789 // 3DS enabled account ID
},
billingAddress: {
country: "CA",
zip: "M5H 2N2",
state: "ON",
city: "Toronto",
street: "100 Queen Street",
street2: "201"
}
}, function(instance, error, result) {
// handle result or error
});
</script>
</body>
</html>
Example with Checkout Close Handling
Add an additional function, function(stage) {..}, to the checkout setup to add handing for those situations when the customer closes the checkout overlay at different stages of the payment process.
<html>
<head>
<script src="https://hosted.paysafe.com/checkout/v1/latest/paysafe.checkout.min.js"></script>
</head>
<body>
...
<script>
paysafe.checkout.setup("my Base64 encoded single-use-token API key", {
amount: 5000,
currency: "USD",
companyName: "Example Inc.",
holderName: "John Smith",
accounts: {
CC: 123456789 // 3DS enabled account ID
},
billingAddress: {
country: "CA",
zip: "M5H 2N2",
state: "ON",
city: "Toronto",
street: "100 Queen Street",
street2: "201"
}
}, function(instance, error, result) {
// handle result or error
}, function(stage) {
if (stage === "BeforePayment") {
// No payment has been made
} else if (stage === "DuringPayment") {
// Token has been issued, but the checkout overlay was closed from the user before instance flow control method was invoked
} else if (stage === "AfterPayment") {
// Closed either via instance.close method or by the user from the success screen
}
});
</script>
</body>
</html>
Example with Payment Method Selection
If you accept payment by either credit card, Direct Debit, or Interac, test the paymentMethod and use the appropriate API to handle the token.
<html>
<head>
<script src="https://hosted.paysafe.com/checkout/v1/latest/paysafe.checkout.min.js"></script>
</head>
<body>
...
<script>
paysafe.checkout.setup("my Base64 encoded single-use-token API key", {
amount: 5000,
currency: "USD",
companyName: "Example Inc.",
holderName: "John Smith",
accounts: {
CC: 123456789 // 3DS enabled account ID
},
billingAddress: {
country: "CA",
zip: "M5H 2N2",
state: "ON",
city: "Toronto",
street: "100 Queen Street",
street2: "201"
}
}, function(instance, error, result) {
if (result.token) {
// If Card payment is selected
if (result.paymentMethod=="Cards") {
// Handle CC payment
}
// If Direct Debit payment is selected
if (result.paymentMethod=="DirectDebit") {
// Handle DD payment
}
// If Interac Online payment is selected
if (result.paymentMethod=="Interac") {
// Handle Interac Online payment
}
} else {
// handle error
}
});
</script>
</body>
</html>
Example with Payment Methods Displayed.
Display specific available payment methods to the consumer.
<html>
<head>
<script src="https://hosted.paysafe.com/checkout/v1/latest/paysafe.checkout.min.js"></script>
</head>
<body>
...
<script>
paysafe.checkout.setup("my API key", {
amount: 5000,
currency: "USD",
companyName: "Example Inc.",
displayPaymentMethods: ["directdebit", "interac"]
}, function(instance, error, result) {
// handle result or error
});
</script>
</body>
</html>