Example Payment and Withdrawal Forms
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.
Payment Form
<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>
/***************************************************************Configuration call*********************************************************************/
function checkout() {
API_KEY = ""; // Base 64 encoded Basic Auth
options = {
"currency": "USD",
"amount": 2500,
"singleUseCustomerToken": "singleUseCustomerToken",
"locale": "en_US",
"headerText": "Make Secure Payments with Checkout",
"footerText": "For additional info please contact us at support@paysafe.com",
"amountoptions": [
500,
10500,
60000
],
"displayPaymentMethods": [
"applePay",
"card",
"pay_by_bank",
"skrill",
"neteller",
"PaysafeCard",
"paysafecash",
"sightline",
"vippreferred",
"paypal",
"venmo",
"ach",
"eft",
],
"customer": {
"firstName": "John",
"lastName": "Doe",
"email": "john.doe@paysafe.com",
"phone": "18003270093",
"dateOfBirth": {
"day": 1,
"month": 1,
"year": 1985
}
},
"billingAddress": {
"nickName": "John Doe's billing address",
"street": "5335 Gate Pkwy",
"street2": "5335 Gate Pkwy",
"city": "Jacksonville",
"zip": "32256",
"country": "US",
"state": "FL"
},
"environment": {
"url": "url",
"assetsUrl": "url"
},
"threeDs": {
"merchantUrl": "https://demostore.com/merchantUrl",
"deviceChannel": "BROWSER",
"messageCategory": "PAYMENT",
"transactionIntent": "GOODS_OR_SERVICE_PURCHASE",
"authenticationPurpose": "PAYMENT_TRANSACTION"
},
"merchantRefNum": "UUID",
"merchantDescriptor": {
"dynamicDescriptor": "This is description test for the merchant",
"phone": "18003270093"
},
"shippingDetails": {
"recipientName": "John Doe's shipping address",
"street": "5335 Gate Pkwy",
"street2": "5335 Gate Pkwy",
"city": "Jacksonville",
"zip": "32256",
"country": "US",
"state": "FL"
},
"canEditAmount": true,
"paymentMethodDetails": {
"card": {
"accountId": "CARD_ACCOUNT_ID" //if more than one Card accounts configured
},
"payByBank": {
"consumerId": "PAY_BY_BANK_CUSTOMER_ID"
},
"skrill": {
"consumerId": "SKRILL_CONSUMER_ID",
"emailSubject": "Email Subject to be sent to Skrill User",
"emailMessage": "Email Body to be sent to Skrill User"
},
"neteller": {
"consumerId": "NETELLER_CONSUMER_ID"
},
"PaysafeCard": {
"consumerId": "PAYSAFECARD_CONSUMER_ID"
},
"paysafecash": {
"consumerId": "PAYSAFECASH_CONSUMER_ID"
},
"sightline": {
"consumerId": "SIGHTLINE_CONSUMER_ID",
"ssn": "USER_SSN_NUMBER"
},
"vippreferred": {
"consumerId": "VIPPREFERRED_CONSUMER_ID"
},
"paypal": {
"consumerId": "PAYPAL_CONSUMER_ID",
"recipientType": "PAYPAL_ID"
},
"venmo": {
"consumerId": "VENMO_CONSUMER_ID"
},
"ach": {
"accountId": "ACH_ACCOUNT_ID" // if more than one EFT accounts configured
},
"eft": {
"accountId": "EFT_ACCOUNT_ID" // if more than one ACH accounts configured
}
}
}
}
/***************************************************************Checkout launch call*********************************************************************/
paysafe.checkout.setup(API_KEY, options,
function (instance, error, result) {
if (result) {
makePaymentWithPaymentHandleToken(instance, result); // Complete the payment call with Payment Handle Token
instance.showSuccessScreen(); // Show success screen
} else {
console.error(error);
instance.showFailureScreen();
return;
}
}, 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>
Withdrawal Form
<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>
/***************************************************************Configuration call*********************************************************************/
function checkout() {
API_KEY = ""; // Base 64 encoded Basic Auth
options = {
"currency": "USD",
"payout": true,
"amount": 2500,
"singleUseCustomerToken": "singleUseCustomerToken",
"locale": "en_US",
"headerText": "Make Secure Withdrawals with Checkout",
"footerText": "For additional info please contact us at support@paysafe.com",
"amountoptions": [
500,
10500,
60000
],
"displayPaymentMethods": [
"card",
"skrill",
"neteller",
"PaysafeCard",
"sightline",
"vippreferred",
"paypal",
"venmo",
"ach",
"eft",
],
"customer": {
"firstName": "John",
"lastName": "Doe",
"email": "john.doe@paysafe.com",
"phone": "18003270093",
"dateOfBirth": {
"day": 1,
"month": 1,
"year": 1985
}
},
"billingAddress": {
"nickName": "John Doe's billing address",
"street": "5335 Gate Pkwy",
"street2": "5335 Gate Pkwy",
"city": "Jacksonville",
"zip": "32256",
"country": "US",
"state": "FL"
},
"environment": {
"url": "url",
"assetsUrl": "url"
},
"threeDs": {
"merchantUrl": "https://demostore.com/merchantUrl",
"deviceChannel": "BROWSER",
"messageCategory": "PAYMENT",
"transactionIntent": "GOODS_OR_SERVICE_PURCHASE",
"authenticationPurpose": "PAYMENT_TRANSACTION"
},
"merchantRefNum": "UUID",
"merchantDescriptor": {
"dynamicDescriptor": "This is description test for the merchant",
"phone": "18003270093"
},
"shippingDetails": {
"nickName": "John Doe's shipping address",
"street": "5335 Gate Pkwy",
"street2": "5335 Gate Pkwy",
"city": "Jacksonville",
"zip": "32256",
"country": "US",
"state": "FL"
},
"canEditAmount": true,
"paymentMethodDetails": {
"card": {
"accountId": "CARD_ACCOUNT_ID" //if more than one Card accounts configured
},
"skrill": {
"consumerId": "SKRILL_CONSUMER_ID",
"emailSubject": "Email Subject to be sent to Skrill User",
"emailMessage": "Email Body to be sent to Skrill User"
},
"neteller": {
"consumerId": "NETELLER_CONSUMER_ID"
},
"PaysafeCard": {
"consumerId": "PAYSAFECARD_CONSUMER_ID"
},
"paysafecash": {
"consumerId": "PAYSAFECASH_CONSUMER_ID"
},
"sightline": {
"consumerId": "SIGHTLINE_CONSUMER_ID",
"ssn": "USER_SSN_NUMBER"
},
"vippreferred": {
"consumerId": "VIPPREFERRED_CONSUMER_ID"
},
"paypal": {
"consumerId": "PAYPAL_CONSUMER_ID",
"recipientType": "PAYPAL_ID"
},
"venmo": {
"consumerId": "VENMO_CONSUMER_ID"
},
"ach": {
"accountId": "ACH_ACCOUNT_ID" // if more than one EFT accounts configured
},
"eft": {
"accountId": "EFT_ACCOUNT_ID" // if more than one ACH accounts configured
}
}
}
}
/***************************************************************Checkout launch call*********************************************************************/
paysafe.checkout.setup(API_KEY, options,
function (instance, error, result) {
if (result) {
makeWithdrawalWithPaymentHandleToken(instance, result); // Complete AJAX Withdrawal call with Payment Handle Token
instance.showSuccessScreen(); // Show Success Screen
} else {
console.error(error);
instance.showFailureScreen(); // Show Failure Screen
return;
}
}, 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>
Was this page helpful?
On this Page