Javascript library (Client side)

The javascript client library enables you to collect the card pan using a secure iframe hosted on our PCI environment. Using this approach you can embed a secure input for the card pan in your existing card capturing form and store the non sensitive data (e.g.: card holder and expiry date) directly by yourself.

info

We'll replace the card pan with a tokenized version of it which then can be stored together with the other related card data.

How does it work?

In order to work with the client tokenization approach you should follow these steps:

1. The first thing you need to do is generate a capture token using the POST /tokenize/{reference} on the REST API. During the generation of this token you have to provide a reference. This reference should be unique and could be the id of your booking, reservation, etc.
2. Once you have the token you need to initialize the javascript library with this token. More details on this to follow.
3. The javascript library is initialized and displays a secure iframe input field in your website.
4. The user enters his details on your webform and the pan number is entered in the secure iframe field.
5. The user hits submit, and you tell the library to send the data over to our vaulting engine.
6. Then you can fetch the result on your server by initiating a call to the GET /card/reference/{reference} method. The result will include the tokenized pan of the card among other details.
7. This token can then be used to forward the card data to a third party or issuing a display token.

danger

The REST API should always be called directly from your server, never from the client side.

Including the javascript library

Please load the correct version of the javascript library directly from our PCI compliant servers depending on the environment.

SANDBOX

<script src="https://pci-proxy-api.paynopain.com/sandbox/client.js"></script>

PRODUCTION

<script src="https://pci-proxy-api.paynopain.com/prod/client.js"></script>

info

You can check out the working codepen example to see it in action.

Initializing the library

In order to initialize the library you need to provide the id of the DOM element where the library should inject the iframe with the pan input field together with the token issued with the REST API. Once the iframe has finished loading a ready event will get fired.

<form>
    <div id="pan"></div>
    <button type="button" id="submitButton">Send</button>
</form>

var proxyFields = new ProxyFields();
proxyFields.init('::token::', { cardNumber: "pan" });
proxyFields.on('ready', () => {
    console.log('iframe has finished loading');
});

Styling the input field

The recommended approach for styling the input field is using the setStyle method. This should be done on the ready callback.

proxyFields.on("ready", function() {
  proxyFields.setStyle(
    "cardNumber",
    "width: 300px; border-radius: 4px; border: 1px solid black; padding:5px 10px;font-size:100%;"
  );
  proxyFields.setStyle("cardNumber::placeholder", "color: grey");
  proxyFields.setPlaceholder("cardNumber", "4987806170805591");
});

Validating and submitting the data

Once the user has completed the submission form you can call the submit method. The submit method receives and object as only parameter where you have to provide additional information of the card. This data can be collected directly by you since it's not subject to PCI regulations.

Once you've called the submit method a validate callback will get fired with an input object containing error related information if any. If the pan was valid, the submission will take place and either success or error callback will get fired. After the success callback is fired, you can safely call the REST API method on your server to fetch the pan's token.

proxyFields.submit({
  expiryMonth: "01",
  expiryYear: "21",
  cardHolder: "Name Displayed On Card"
});

proxyFields.on("validate", function(data) {
  if(validate.hasErrors){
    console.log("Card pan is not valid");
    proxyFields.setStyle("cardNumber","border: 1px solid red");
  }
});

proxyFields.on("success", function(data) {
  console.log('Submission succeded');
});

proxyFields.on("error", function(error) {
  console.log('Something bad happened');
});