More Examples

This page contains more Paysafe Checkout examples.

Example with 3D Secure Enabled

3D Secure (3DS) is supported only for Visa and Mastercard.

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.

<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 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 have been made
				} else if (stage === "DuringPayment") {
					// Token have 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>
Did you find this page useful?