Freedom to Design

Introduction to FreedomtoDesign.js

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 system focuses on data collection and tokenization. It's not a complete payments API. To process transactions, you'll need to use this in conjunction with the iPOS Transact API.

For Production Code Snippets iPOS Transact API

Breakdown for developers

Secure Payments: Collect payment information securely without handling sensitive data yourself, reducing your PCI compliance burden.
Customization: Tailor the checkout experience to align with your brand and user flow.
Integration Flexibility: Integrate seamlessly with our iPOSTransacti API for smooth payment processing.
Easy Setup: Get started quickly with a simple script tag or customize it for a more tailored integration.

Prerequisites

For Sandbox (UAT)

You should be onboarded on iPOSpays sandbox(UAT) environment as a merchant and have a valid TPN.

For Production (Live)

You should be onboarded on iPOSpays production environment as a merchant and have a valid TPN.

If you do not have a TPN, contact your ISO or support@dejavoo.io.

Get Started

Step 1 : Login to your merchant account and go to settings.

Step 2 : Under Generate Ecom/TOP Merchant Keys section select TPN and Generate Token

Step 3 : Under Whitelisted Domain add your domains.

Now you have everything to setup your payment form.

Setting Up Your Payment Form

Open your website's index.html file in a text editor.
Copy and paste the following code into your text editor and run the program
Use the generated token inside “security_key.”

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="referrer" content="strict-origin-when-cross-origin" />
  <title>iPosPays Payment Form</title>
 
 
  <!-- Add defer to prevent blocking HTML rendering -->
  <script
    id="ftd"
    src="https://payment.ipospays.tech/ftd/v1/freedomtodesign.js"
    security_key="auth_token"
    defer
  ></script>
</head>
 
 
<body>
  <form>
    <input id="ccnumber" />
    <input id="ccexpiry" />
    <input id="cccvv" />
   <input type="submit" id="payButton" />
  </form>
 
 
  <script>
    async function submitCardFunc(event) {
      event.preventDefault(); // Prevent default form submission
      try {
        const data_response = await postData();
        console.log("PaymentToken:", data_response.payment_token_id);
      } catch (error) {
        console.error("Error processing payment:", error);
      }
    }
 
 
    var payButton = document.getElementById("payButton");
    payButton.addEventListener("click", submitCardFunc);
  </script>
</body>
</html>

After clicking the payment button, it will generate a token like 65564fda-9c7e-46fd-9eca-40caff6e53c6, which can be used in the iPOSTransact API to collect payments from customers.

This payment token can only be used once and will expire after 24 hours if it is not used at all.

Error Codes

Codes	Description
FTD_001	Card number is not valid, Please try with a valid card number
FTD_002	Card CVV is not valid,Please try with valid CVV
FTD_003	Card has expired
FTD_004	Card expiry month is not valid
FTD_005	Invalid card expiration date
FTD_006,FTD_009	Data tokenization key is not valid, Please try with valid key
FTD_007	Requested origin is not registered. Please contact support team
FTD_010	Invalid request, Please try again

For Production URL

In the src attribute of the script tag replace the sandbox url with the production url.

Production Live URL:	https://payment.ipospays.com/ftd/v1/freedomtodesign.js (opens in a new tab)

Developer Central Onboard Merchant