FreedomToDesign.js

Introduction

FreedomtoDesign.js is a JavaScript framework that allows merchants to collect sensitive payment information from their customers without exposing their websites to sensitive information. This can be done while allowing merchants to retain full control over the look and feel of their checkout experience. This is a data collection and tokenization system, not a full payments API, so you can use this in conjunction with an existing transaction API (iPOS Transact API) to submit transactions.

Use Cases

FreedomToDesign.js enables merchants to securely collect payment information, customize the checkout experience, and integrate seamlessly with their existing transaction API for the completion of transactions, all while adhering to high standards of data security.

It is designed to be flexible, and its implementation can be as simple as pasting a single script tag to your checkout page, or it can be customized to interact with your website however you’d like.

Authorization Token

Authentication is done via an “auth token” that you can generate in your merchant settings section under the “Generate Ecom/TOP Merchant Keys” settings page. Select “TPN” for the key generation. Please follow the instructions below.

Step 1: Send an email to [email protected], including the whitelisted domain names.

Step 2: iPOSpays will create a merchant account and send you an activation email along with TPN.

Step 3: Activate your iPOSpays merchant account.

Step 4: Login merchant account & go to settings on the left side menu, and select “Generate Ecom/TOP Merchant Keys.” 

Step 5: Select the TPN and generate the token.

Step 6: Use the generated TOKEN and the TPN for your Freedom to design web form integration. 

FreedomToDesign.js API End-point

Sandbox URL:

https://payment.ipospays.tech/ftd/v1/freedomtodesign.js

Production Live URL:

https://payment.ipospays.com/ ftd/v1/freedomtodesign.js

Implementation

First, add the following JavaScript on your payment form page, preferably in the HEAD element:

				
					<script id="ftd" src="https://payment.ipospays.tech/ftd/v1/freedomtodesign.js" security_key="auth_token"></script>

This script assumes that you’ve set up a payment form already. The form can be laid out however you’d like, but there should be block-level elements (div, for example) where the sensitive payment info will be collected. The following IDs are expected to be used in place of standard form inputs:

For Credit Card Payments

  • ccnumber (Credit card number)
  • ccexpiry (Credit card expiration date)
  • cccvv (CVV)

Basic Integrated Form

				
					<form>
       <input id=”ccnumber” />
       <input id=”ccexpiry” />
       <input id="cccvv” />
      <input type=”submit” id=”payButton”>
 </form>

The Payment Token

This is a new variable added to the transaction API(iPOS Transact API)  that should be used in conjunction with this tool. This is what FreedomToDesign.js will return to your website and it takes the place of the sensitive card information. It will look something like this:

    Example: 65564fda-9c7e-46fd-9eca-40caff6e53c6

This variable can be used in place of the existing card token we have today. The payment token can only be used once and will expire after 24 hours if it is not used at all. Just use “paymentTokenId” where you were using the credit card before. 

After this form is submitted to your site, you can submit the data to the gateway via the iPOS Transact API.