Search Overlay

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.

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

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
},
threeDS: {
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>