FreedomtoDesign.Js
Prerequisites
For Sandbox (UAT) Users should be onboarded on iPOSpays sandbox(UAT) environment as a merchant and have a valid TPN.
For Production (Live) Users 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.
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.
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 the domain of your site in which you want to accept payments.
Watch This Video for a Visual Walkthrough of the Steps
Now you have everything to setup your payment form.
Setting Up Your Payment Form
Freedom to design supports card payments and Google Pay.
Card
Follow the steps below to accept card payments
- 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.”
<!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>
Using the Payment Token ID
Once the user clicks the payment button, a unique payment token ID (e.g., 65564fda-9c7e-46fd-9eca-40caff6e53c6
) is generated. This token ID is required for initiating transactions via the iPOS Transact API.
This payment token can only be used once and will expire after 24 hours if it is not used at all.
GooglePay
Follow the steps below to accept Google Pay transactions
-
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Google Pay Integration</title>
<script src="https://payment.denovosystem.tech/ftd/v1/gpay.js"></script>
</head>
<body>
<div id="ipospays-gpay-btn"></div>
<script>
const transactionInfo = {
countryCode: "US",
currencyCode: "USD",
totalPriceStatus: "FINAL",
totalPrice: "12.00",
totalPriceLabel: "Total",
};
const merchantId = "N/A";
const Mode = "TEST";
const buttonStyles = {
buttonColor: "default",
buttonType: "buy",
buttonRadius: 4,
buttonLocale: "en",
buttonHeight: "40px",
buttonWidth: "240px",
};
const goolePayFelids = {
requestBillingAddress: isBillingRequired, // true or false
requestPayerEmail: isPayerEmailRequired, // true or false
requestPayerPhone: isPayerPhoneRequired, // true or false
requestShipping: isShippingRequired, // true or false
};
function getPaymentInfo(paymentData) {
console.log("Received Payment Token (Raw):", paymentData);
}
updatePrice(priceCart.value); // Ensure priceCart is an input field
initializeGooglePay(transactionInfo, merchantId, Mode, buttonStyles, goolePayFelids);
</script>
</body>
</html>
Using the PaymentData
Once the user clicks the payment button, a unique paymentData
is generated. This paymentData
is required for initiating transactions via the iPOS Transact API.
ACH
Use the following steps to integrate FreedomToDesign with ACH payments using the iposTransact
API.
This JavaScript file is used to render mandatory fields based on the TPN configured with ACH service. Based on the required ACH tags, you can build logic to present the appropriate fields to the user. Once filled, this data is sent using the iposTransact
API via the achData
tag.
Prerequisites
Before integrating, ensure you have:
-
An HTML page where you want to display the ACH payment form
-
Your
ecomm auth token
(also referred to assecurity_key
) -
Basic knowledge of HTML and JavaScript
Step 1: Add the Script to Your Page
Include the FreedomToDesign
JavaScript library on your page. This script renders the ACH form and provides metadata via callback.
Place the following <script>
tag before the closing </body>
tag of your HTML:
<script defer src="https://payment.ipospays.tech/ftd/v1/ipospays-ach.js" id="ftdach" security_key="auth_token"></script>
Replace auth_token
with your actual ecomm auth token.
Step 2: Insert Form Field Containers
Add the following <div>
elements to your HTML page. These act as placeholders for dynamically rendered form fields.
<form id="achPaymentForm">
<h3>ACH Payment Details</h3>
<div id="FIRST_NAME"></div>
<div id="LAST_NAME"></div>
<div id="PHONE_NUMBER"></div>
<div id="EMAIL"></div>
<div id="ADDRESS1"></div>
<div id="CITY"></div>
<div id="STATE"></div>
<div id="ZIP"></div>
<div id="DL_NUMBER"></div>
<div id="DL_STATE"></div>
<hr>
<h4>Account Information</h4>
<div id="ACCOUNT_NUMBER"></div>
<div id="ROUTING_NUMBER"></div>
<div id="ACCOUNT_TYPE"></div>
<hr>
<h4>Identity Verification</h4>
<div id="IDENTITY"></div>
<div id="SSN"></div>
<div id="DOB"></div>
<button type="submit" id="submitAchButton">Process ACH Payment</button>
</form>
The IDENTITY
field will trigger conditional visibility for SSN and DOB fields. This logic is handled by the Integrators.
Step 3: Initialize Form and Handle Metadata Callback
You must define window.getAchPaymentInfo
before initializing the form to receive terminal-level data (terminalId
, entryClass
, usersId
) required for processing the transaction.
<script>
const SECURITY_KEY = "YOUR_ECOMM_AUTH_TOKEN_HERE";
let achTransactionMetadata = {};
window.getAchPaymentInfo = function (data) {
console.log("Received ACH Payment Info:", data);
achTransactionMetadata = data;
};
async function initializePage() {
if (typeof initializeAchForm === 'function') {
try {
await initializeAchForm({ security_key: SECURITY_KEY });
console.log("ACH form initialized.");
} catch (error) {
console.error("Initialization failed:", error);
}
} else {
console.error("initializeAchForm not available.");
}
}
document.getElementById('submitAchButton').addEventListener('click', async (e) => {
e.preventDefault();
if (!achTransactionMetadata.terminalId || !achTransactionMetadata.entryClass || !achTransactionMetadata.usersId || !achTransactionMetadata.identity) {
alert("Form not fully loaded. Please wait.");
return;
}
// Example placeholder: Get customer data (implementation depends on FreedomToDesign library)
// const customerAchData = getCustomerAchDataFromForm();
alert("Form submitted! Check console for received metadata.");
});
</script>
Step 4: Submit Data to iposTransact
API from Backend
Once you have customer-entered data and metadata from the callback, submit the transaction using your backend service.
async function processAchTransactionOnBackend(customerAchData, achTransactionMetadata) {
{
"merchantAuthentication": {
"merchantId": "567024937072",// TPN provided by Dejavoo
"transactionReferenceId": "7639491755250417905532" //Unique TransactionRefId for each Transaction
},
"transactionRequest": {
"transactionType": 10,//ACH - Sale transaction
"amount": "1000",// Example: 1000 = $10.00 (amount is in cents, divided by 100)
"achProcessor" : 1,//PAYA-1 //Processor Value whether its PAYA or others
},
"preferences": {
"eReceipt": true,
"customerEmail": "Customer_Email",// Customer Email Id
"customerMobile": "+1234567891", // Customer Mobile Number
"requestAchToken": true // true- Then it will share the achToken in Response if transaction is Approved. False - We will not share the achToken
},
"achData": {
firstName: customerAchData.FIRST_NAME || "",
lastName: customerAchData.LAST_NAME || "",
addressOne: customerAchData.ADDRESS1 || "",
state: customerAchData.STATE || "",
dlNumber: customerAchData.DL_NUMBER || "",
dlState: customerAchData.DL_STATE || "",
accountNumber: customerAchData.ACCOUNT_NUMBER || "",
accountType: customerAchData.ACCOUNT_TYPE || "",
routingNumber: customerAchData.ROUTING_NUMBER || "",
ssn: customerAchData.SSN || "",
dobYear: customerAchData.DOB || "",
city: customerAchData.CITY || "",
zipCode: customerAchData.ZIP || "",
identity: achTransactionMetadata.identity,
terminalId: achTransactionMetadata.terminalId,
entryClass: achTransactionMetadata.entryClass,
usersId: achTransactionMetadata.usersId,
tipAmount: "0",
}
};
const response = await fetch("YOUR_IPOS_TRANSACT_API_ENDPOINT", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
});
const result = await response.json();
if (response.ok) {
console.log("ACH Transaction successful:", result);
} else {
console.error("ACH Transaction failed:", result);
}
}
Try the ACH Form Simulator
Use the simulator below to preview the rendered form and reference sample code.
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) |
---|
Error Codes and Their Meaning
For a complete list of error codes and their explanations, please visit our Error Codes Reference Page.