Example Payment Form

The following code sample shows a minimal Paysafe Checkout example that creates a payment overlay for the user. The overlay contains a payment button that creates a payment handle for the data entered by the user and displays the payment handle token (if successful) in the browser console.

<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
		<script src="https://hosted.paysafe.com/checkout/v2/paysafe.checkout.min.js"></script>
	</head>
	<body style = "width :'100%'">
		<button onclick="checkout()"> Deposit $25 </button>
	</body>
	<script>
		function checkout() {
		var PAYSAFECARD_CONSUMER_ID = "merchantclientid5HzDvoZSodKDJ7X7VQ";
		var PAYSAFECASH_CONSUMER_ID = "123456";
		var SIGHTLINE_CONSUMER_ID = "user8525";
		var SKRILL_CONSUMER_ID = "gregeteller@mailinator.com";
		paysafe.checkout.setup("c3V0LTM0ODg2MDpCLXFhMi0wLTVkM2VjYjMwLTEtMzAyYzAyMTQyYTM3NjgxMmE2YzJhYzRlNmQxMjI4NTYwNGMwNDAwNGU2NWI1YzI4MDIxNDU1N2EyNGFiNTcxZTJhOWU2MDVlNWQzMjk3MjZjMmIzZWNjNjJkNWY=",
		{
		"currency": "USD",
		"amount": 2500,
		"locale": "en_US",
		"simulator": "EXTERNAL",
		"merchantRefNum": "193767720k213012",
		"canEditAmount": true,
		"billingAddress": {
		"nickName": "Address 2",
		"street": "222333 Peachtree Place",
		"street2": "jhgsadjsa",
		"city": "Atlanta",
		"zip": "30318",
		"country": "US",
		"state": "GA"
		},

		"environment": "TEST",
		"merchantDescriptor": {
		"dynamicDescriptor": "Paysafe test",
		"phone": "9505610677"
		},
		"customer": {
		"firstName": "John",
		"lastName": "Smith",
		"email": "paysafe.user@paysafe.com",
		"phone": "3069443197",
		"dateOfBirth": {
		day: 28,
		month: 2,
		year: 1975
		}
		},
		threeDs : {
		merchantUrl: window.location.href,
		messageCategory: "PAYMENT",
		authenticationPurpose: "PAYMENT_TRANSACTION",
		deviceChannel: "BROWSER"
		},
		"paymentMethodDetails": {
		paysafecard: { consumerId: PAYSAFECARD_CONSUMER_ID },
		paysafecash: { consumerId: PAYSAFECASH_CONSUMER_ID },
		sightline: {consumerId: SIGHTLINE_CONSUMER_ID, ssn:"123456930"},
		skrill: {
		consumerId: SKRILL_CONSUMER_ID,
		emailSubject: "Payout for Payout for",
		emailMessage: "Note for email here",
		accountId: "1001461040"
		},
		instantach: {
		consumerId: "greg_neteller@mailinator.com",
		emailSubject: "Payout for Payout for Payout",
		emailMessage: "Note for email here",
		paymentId: "123456"
		},
		vippreferred: {
		consumerId: "123547016"
		},
		paypal:{
		consumerId: "sb-cpfxo1472281@personal.example.com"
		},

		neteller: {
		consumerId: "netellertest_EUR@neteller.com",
		recipientDescription: "logo_url_alt_text",
		logoUrl: "http://www.paysafe.com/icon.jpg"
		},
		}
		}, function(instance, error, result) {
		if (result && result.paymentHandleToken) {
		console.log(result);
		// make AJAX call to Payments API
		// alert(result.paymentHandleToken + " - token to be used to make server to server call to Payments API");
		instance.showSuccessScreen("Your goods are now purchased. Expect them to be delivered in next 5 business days.");
		} else {
		console.error(error);
		// Handle the error
		}
		}, function(stage, expired) {
		switch(stage) {
		case "BeforePayment": // Handle the scenario
		case "DuringPayment": // Handle the scenario
		case "AfterPayment": // Handle the scenario
		default: // Handle the scenario
		}
		});
		}
	</script>
</html>
Did you find this page useful?