Getting started with PaysafeJS

Getting started with PaysafeJS

What is PaysafeJS?

Paysafe.js is a JavaScript library which hook html elements from your payment form, to directly handle secure credit card information. When a user go on this checkout form, sensitive information like card number, CVV, etc. is directly sent to Paysafe. For further details, take a look atPaysafe's documentation.

Is this secure?

With Paysafe.js, your server does not handle any sensitive credit card data, which reduces the PCI compliance burden to a greater extent. It will bring value to your user experience by proving them with a seamless experience.

Prerequisites

Before trying out this guide, you would need to setup the following:

A Paysafe account (sandbox for now, and a live one when you go into production).

Client side integration

Step 1 : Build the checkout page

The client side implementation starts by building your webpage using any html/css frameworks (bootstrap, foundation) or your own customized styling. This is the simplest part, but you need make sure to include payments fields to add the credit card details.

The code snippet below shows the card number, expiry and CVV field for example.

Step 2 : Initialize Paysafe.js

Step 3 : Configure and hook up the payment fields

Now that the form is built, there are various way that we can configure our payment page, but the most important one is to use the appropriate Single-Use API key in order to start processing. You need to make sure it's Base64-encoded.

You create a specific JavaScript file for centralizing your coding or you can just use the script tags within your html page.

Afterwards, you have to hook your html payment fields with the JavaScript selectors. The environment object is used to select the environment to use for the tokenization : LIVE (Production environment) and TEST (test or sandbox environment).

Step 4 : Send and handle the cards details to Paysafe (tokenization)

So now that Paysafe.js is all set in our web page, let's write up some JavaScript for our form. The JavaScript should be triggered when a user clicks on our PayNow button, after which card details should be passed on to Paysafe. The response from Paysafe should then be handled.

You can also have a look at more complex examples, so you can achieve something like this. This is supported also through next-gen front-end frameworks like Angular2 and others.

Server side integration

Step 1 : Setup the client library

For simplicity reason, we will be using a REST client tool called Postman. You should have your Server-to-Server API key (user and password) and the account number created on the sandbox environment initially.

On Postman tool, you can simply configure it in the authorization tab for any requests.

For server SDKs, you will first have to download and import the client library of your choice. Then we need to configure the client library with our test API key, there will always be a configuration file depending on the programming language you choose.

Step 2 : Make a one-time payment

Depending on the framework you use for client/server communication, the Single-use token (temporary token) generated earlier has to be sent along. If you have no such framework and plain JavaScript, you could use forms, AJAX or Jquery.

People who like this

Article Contributors

You may also enjoy

During online checkout, there’s no doubt that offering customers the convenience of storing their credit card details for future use is a great feature. More importantly, it’s one that customers increasingly expect, enabling a faster and more convenient experience in subsequent..