<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<!-- Use the following src for the script on your form and replace ****version**** with the desired version: src="https://cdn.cardknox.com/ifields/****version****/ifields.min.js" -->
<script src="https://cdn.cardknox.com/ifields/2.9.2109.2701/ifields.min.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
if (/[?&](is)?debug/i.test(window.location.search)){
* Required if you want to enable Google Pay payment method on your website
* For more information please refer to documentation
ckGooglePay.enableGooglePay({amountField: 'amount'});
merchantName: "Example Merchant"
buttonSizeMode: GPButtonSizeMode.fill
//phoneNumberRequired: true,
billingAddressRequired: true,
billingAddressFormat: GPBillingAddressFormat.full
phoneNumberRequired: true,
onGetShippingCosts: function (shippingData) {
label: "onGetShippingCosts",
onGetShippingOptions: function (shippingData) {
label: "onGetShippingOptions",
let selectedOptionid = "shipping-001";
if (shippingData && shippingData.shippingOptionData && shippingData.shippingOptionData.id !== "shipping_option_unselected") {
selectedOptionid = shippingData.shippingOptionData.id;
defaultSelectedOptionId: selectedOptionid,
"label": "Free: Standard shipping",
"description": "Free Shipping delivered in 5 business days."
"label": "$1.99: Standard shipping",
"description": "Standard shipping delivered in 3 business days."
"label": "$10: Express shipping",
"description": "Express shipping delivered in 1 business day."
onGetTransactionInfo: function () {
price: (0.1 * amt).toString(),
totalPriceStatus: "FINAL",
totalPrice: (1.1 * amt).toString(),
onBeforeProcessPayment: function () {
return new Promise(function (resolve, reject) {
//Do some validation here
resolve(iStatus.success);
onProcessPayment: function (paymentResponse) {
return new Promise(function (resolve, reject) {
// show returned data in developer console for debugging
console.log("paymentResponse", JSON.stringify(paymentResponse));
paymentToken = paymentResponse.paymentData.paymentMethodData.tokenizationData.token;
console.log("paymentToken", paymentToken);
const amt = (paymentResponse && paymentResponse.transactionInfo && paymentResponse.transactionInfo.totalPrice) || 0;
throw "Payment is not authorized. Invalid amount. Amount must be greater than 0";
setGPPayload(JSON.stringify(paymentResponse, null, 2));
resolve({status: iStatus.success});
const emsg = JSON.stringify(err);
setTimeout(function () { alert(emsg) }, 500);
onPaymentCanceled: function(respCanceled) {
setTimeout(function () { alert("Payment was canceled") }, 500);
handleResponse: function (resp) {
const respObj = JSON.parse(resp);
setTimeout(function () { alert(`There was a problem with your order (${respObj.xRefNum})!`) }, 500);
setTimeout(function () { alert(`Thank you for your order (${respObj.xRefNum})!`) }, 500);
getGPEnvironment: function () {
if (/[?&]prod/.test(window.location.search)) {
return GPEnvironment.production;
return GPEnvironment.test;
merchantInfo: this.merchantInfo,
buttonOptions: this.buttonOptions,
environment: this.getGPEnvironment(),
billingParameters: this.billingParams,
emailRequired: this.shippingParams.emailRequired,
onGetShippingCosts: "gpRequest.shippingParams.onGetShippingCosts",
onGetShippingOptions: "gpRequest.shippingParams.onGetShippingOptions"
onGetTransactionInfo: "gpRequest.onGetTransactionInfo",
onBeforeProcessPayment: "gpRequest.onBeforeProcessPayment",
onProcessPayment: "gpRequest.onProcessPayment",
onPaymentCanceled: "gpRequest.onPaymentCanceled",
onGPButtonLoaded: "gpRequest.gpButtonLoaded",
gpButtonLoaded: function(resp) {
if (resp.status === iStatus.success) {
showHide("divGpay", true);
showHide("lbGPPayload", true);
} else if (resp.reason) {
function setGPPayload(value) {
const gpTxt = document.getElementById('gp-payload');
function showHide(elem, toShow) {
if (typeof(elem) === "string") {
elem = document.getElementById(elem);
toShow ? elem.classList.remove("hidden") : elem.classList.add("hidden");
return roundToNumber(document.getElementById("amount").value || "0", 2);
<form id="payment-form" method="POST">
<input id="amount" name="xAmount" placeholder="Amount" type="number" inputmode="decimal"></input>
<div id="divGpay" class="gp hidden">
<iframe id="igp" class="gp" data-ifields-id="igp" data-ifields-oninit="gpRequest.initGP" src="https://cdn.cardknox.com/ifields/2.9.2109.2701/igp.htm"
sandbox="allow-popups allow-modals allow-scripts allow-same-origin allow-forms allow-popups-to-escape-sandbox allow-top-navigation"
title="GPay checkout page">
<label id="lbGPPayload" class="hidden">Google Pay Payload: </label>
<textarea id="gp-payload" class="hidden" rows="10" readonly="true"></textarea>