iFields Integration

Create a Sandbox Contact Us Knowledge Base
Search…
iFields Integration
The code below is a source of ifield-sample.htm
<!DOCTYPE html>
<html>
    <head>
		<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)){
                    setDebugEnv(true);
                }
         
                /*
                 * [Contitional]
                 * Required if you want to enable Google Pay payment method on your website
                 * For more information please refer to documentation 
                 */
                ckGooglePay.enableGooglePay({amountField: 'amount'});
            });
​
            //Google Pay
            const gpRequest = {
                merchantInfo: {
                    merchantName: "Example Merchant"
                },
                buttonOptions: {
                    buttonSizeMode: GPButtonSizeMode.fill
                },
                billingParams: {
                    //phoneNumberRequired: true,
                    emailRequired: true,
                    billingAddressRequired: true,
                    billingAddressFormat: GPBillingAddressFormat.full                        
                },
                shippingParams: {
                    phoneNumberRequired: true,
                    emailRequired: true,
                    onGetShippingCosts: function (shippingData) {
                        logDebug({
                            label: "onGetShippingCosts",
                            data: shippingData
                        });
                        return {
                            "shipping-001": "0.00",
                            "shipping-002": "1.99",
                            "shipping-003": "10.00"
                        }
                    },
                    onGetShippingOptions: function (shippingData) {
                        logDebug({
                            label: "onGetShippingOptions",
                            data: shippingData
                        });
                        let selectedOptionid = "shipping-001";
                        if (shippingData && shippingData.shippingOptionData && shippingData.shippingOptionData.id !== "shipping_option_unselected") {
                            selectedOptionid = shippingData.shippingOptionData.id;
                        }
                        return {
                            defaultSelectedOptionId: selectedOptionid,
                            shippingOptions: [
                                {
                                    "id": "shipping-001",
                                    "label": "Free: Standard shipping",
                                    "description": "Free Shipping delivered in 5 business days."
                                },
                                {
                                    "id": "shipping-002",
                                    "label": "$1.99: Standard shipping",
                                    "description": "Standard shipping delivered in 3 business days."
                                },
                                {
                                    "id": "shipping-003",
                                    "label": "$10: Express shipping",
                                    "description": "Express shipping delivered in 1 business day."
                                },
                            ]
                        };
                    }
                },
                onGetTransactionInfo: function () {
                    let amt = getAmount();
                    return {
                        displayItems: [
                            {
                                label: "Subtotal",
                                type: "SUBTOTAL",
                                price: amt.toString(),
                            },
                            {
                                label: "Tax",
                                type: "TAX",
                                price: (0.1 * amt).toString(),
                            }
                        ],
                        countryCode: 'US',
                        currencyCode: "USD",
                        totalPriceStatus: "FINAL",
                        totalPrice: (1.1 * amt).toString(),
                        totalPriceLabel: "Total"
                    }
                },    
                onBeforeProcessPayment: function () {
                    return new Promise(function (resolve, reject) {
                        try {
                            //Do some validation here
                            resolve(iStatus.success);
                        } catch (err) {
                            reject(err);
                        }
                    });
                },
                onProcessPayment: function (paymentResponse) {
                    return new Promise(function (resolve, reject) {
                            try {
                                // 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;
                                try {
                                if (amt <= 0) {
                                    throw "Payment is not authorized. Invalid amount. Amount must be greater than 0";
                                }
								setGPPayload(JSON.stringify(paymentResponse, null, 2));
								resolve({status: iStatus.success});
                                } catch (err) {
                                    const emsg = JSON.stringify(err);
                                    console.error(emsg);
                                    setGPPayload("");
                                    setTimeout(function () { alert(emsg) }, 500);
                                    reject({error: err});
                                }
                        } catch (err) {
                            setGPPayload("");
                            reject(err);
                        }
                    });
                },
                onPaymentCanceled: function(respCanceled) {
                    setTimeout(function () { alert("Payment was canceled") }, 500);
                },
                handleResponse: function (resp) {
                    const respObj = JSON.parse(resp);
                    if (respObj) {
                        if (respObj.xError) {
                            setTimeout(function () { alert(`There was a problem with your order (${respObj.xRefNum})!`) }, 500);
                        } else
                            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;
                },
                initGP: function() {
                    return {
                        merchantInfo: this.merchantInfo,
                        buttonOptions: this.buttonOptions,
                        environment: this.getGPEnvironment(),
                        billingParameters: this.billingParams,
                        shippingParameters: {
                            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",
                        isDebug: isDebugEnv
                    };
                },
                gpButtonLoaded: function(resp) {
                    if (!resp) return;
                    if (resp.status === iStatus.success) {
                        showHide("divGpay", true);
                        showHide("lbGPPayload", true);
                    } else if (resp.reason) {
                        alert(resp.reason);
                    }
                }
            };
            function setGPPayload(value) {
                const gpTxt = document.getElementById('gp-payload');
                gpTxt.value = value;
                showHide(gpTxt, value);
            }
​
            function showHide(elem, toShow) {
                if (typeof(elem) === "string") {
                    elem = document.getElementById(elem);
                }
                if (elem) {
                    toShow ? elem.classList.remove("hidden") : elem.classList.add("hidden");
                }
            }
            function getAmount () {
                return roundToNumber(document.getElementById("amount").value || "0", 2);
            }
        </script>
        <style> 
            body {
                margin: 10px;
            }
​
            iframe.gp {
                display: inline-block;
                border: 0;
                width: 250px;
                height: 45px;
                padding: 0px;
                margin-bottom: 12px;
                overflow: hidden;
                position: absolute;
            }
            div.gp {
                overflow: hidden;
                display: inline-block;
                overflow: hidden;
                margin-bottom: 20px;
            }
            input {
                border: 1px solid black;
                font-size: 14px;
                padding: 3px;
                width: 243px;
                margin-bottom: 12px;
            }
​
            .hidden {
                display: none;
            }
​
            textarea {
                border: 1px solid black;
                width: 350px;
            }
        </style>
    </head>
    <body>
        <form id="payment-form" method="POST">
            <input id="amount" name="xAmount" placeholder="Amount" type="number" inputmode="decimal"></input>
            <br/>
            <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"
                        allowpaymentrequest
                        sandbox="allow-popups allow-modals allow-scripts allow-same-origin allow-forms allow-popups-to-escape-sandbox allow-top-navigation"
                        title="GPay checkout page">
                </iframe>
                <br/>
            </div>
            <br />
            <br />
            <label id="lbGPPayload" class="hidden">Google Pay Payload: </label>
            <br />
            <textarea id="gp-payload" class="hidden" rows="10" readonly="true"></textarea>
        </form>
    </body>
</html>
Google Pay Sample Code
Next - Plugins
Netsuite
Last modified 9mo ago
Export as PDF
Copy link