Step by Step Integration

This section describes the integration of Paysafe Checkout. With just a few lines of code, you can integrate Checkout and start collecting payments.

Checkout securely handles and stores all the payment-related information like the user input (credit card and bank account details) and returns tokenized payment information to you.

It uses the Paysafe Payments API and the information about the request structure, objects and variables are available in the API reference.

Before You Begin
Including Scripts in Your Webpage
Initiating Checkout

Before You Begin

Please contact your business relationship manager or reach out to integrations@paysafe.com for your credentials to the Business Portal.

To obtain the Public API key from the Business Portal:

Go to Integrate>API Keys.
For Public Key, click the Copy icon to copy the API key.

Your API key will have the following format:

Key Username – MerchantXYZ
Key Password – B-tst1-0-51ed39e4-312d02345d3f123120881dff9bb4020a89e8ac44cdfdcecd702151182fdc952272661d290ab2e5849e31bb03deede7e

Use the same API key for all the Payment Methods.

You must Base64 Encode your Public API key before using it in the Payments Checkout SDK.

The API key is case-sensitive and sent using HTTP Basic Authentication.

To use HTTP Basic Authentication, you must send the API key credentials using the Authorization header with every request. You must construct the Authorization header as follows:

Combine the Key Username and Key Password into a string separated by a colon, e.g., “Key Username:Key Password”.
The resulting string literal is then encoded using Base64.
The authorization method and space (i.e., “Basic”) are then put before the encoded string.

For example, using the Key Username and Password examples above, the header is formed as follows:

Authorization: Basic TWVyY2hhbnRYWVo6Qi10c3QxLTAtNTFlZDM5ZTQtMzEyZDAyMzQ1ZDNmMTIzMTIwODgxZGZmOWJiNDAyMGE4OWU4YWM0NGNkZmRjZWNkNzAyMTUxMTgyZmRjOTU yMjcyNjYxZDI5MGFiMmU1ODQ5ZTMxYmIwM2RlZWRlN2U=

For additional details, please refer here.

Integrating Checkout

Paysafe Checkout collects your customer details, such as account information, billing details, and so on. It helps your customers complete the order by processing the payments. Paysafe Checkout’s software development kit gives you the freedom to build your custom integration.

Please reach out to our Integrations Support Team at integrations@paysafe.com to set up a test account, and include the supported payments you would like to add to your test account.

How to use the SDK

Include the Paysafe Checkout SDK in your HTML payment form.
Call the checkout setup function with your Public API key.
The callback uses AJAX to send the payment handle token (containing tokenized Customer’s payment details) to your (merchant) website, where you can write our own logic to send this token to your (merchant) server to make a payment or process a payout using the Paysafe Payments API.

Including the SDK

The SDK is located here:

https://hosted.paysafe.com/checkout/v2/paysafe.checkout.min.js

You need to include it in your HTML form by adding a <script> element in either the header or body.

The Setup Function

The setup function creates an iframe overlay containing the secure payment/withdrawal form hosted on Paysafe’s servers. You will need to pass a callback function as a part of the setup to manage payment handle success and failure. It has the following parameters:

The Base64-encoded version of the API key
An options object containing the environment to use (Test or Live), the payment amount, currency, and several parameters to personalize the payment form and customize its appearance.
A resultCallback which receives the Paysafe checkout instance and handles successful tokenization (by sending the token to your merchant server). It also responds to any errors caused by a failed tokenization.
An optional closeCallback function to handle the Customer closing the payment overlay.
An optional riskCallback function to receive the amount and payment method which Customer has selected and run your risk checks before payment handle is created. Depending on the riskCallback response, Payment handle will be created and returned in resultCallback (Applicable to only Cards, PaySafe Cash, VIPP and Sightline)

The function signature is as follows:

<paysafe.checkout.setup(apikey, options,resultsCallback, closeCallback, riskCallback);>

Quickstart Sample Integration Code - Paysafe Checkout.
This Sample Integration code enables you to quickly integrate your website with Paysafe Checkout & start receiving online payments within minutes!
This integration requires basic HTML and JavaScript skills and intermediate level of knowledge in your favorite server-side programming language.

PREV NEXT