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 Setting up payment form iPOS Transact API

Breakdown for developers

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

Prerequisite

You are onboarded to our sandbox enviroment as a merchant and has a valid TPN.

If you do not have a tpn , contact us devsupport@denovosystem.com

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

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 charge the customer.

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

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>

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

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