Example Withdrawal Form
The following code sample shows a minimal Paysafe Checkout example that creates a payment overlay for the user. The overlay contains a withdraw 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()"> Withdraw $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",
"payout": true,
"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"
},
"payoutConfig": {
"maximumAmount": 100000
},
"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"
},
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
}
}, function(instance, amount, paymentMethod) {
// use parameters amount and payment method to do riskCheck
// Applicable to only Cards, PaySafe Cash, VIPP and Sightline
if (amount >= 100) {
instance.decline("Please use amount less than 100");
} else {
instance.accept();
}
});
}
</script>
</html>