Links

Google Pay Sample Code

  1. 1.
    Helper object including all necessary components:
    const gpRequest = {
    environment: GPEnvironment.test,
    merchantInfo: {
    merchantName: "Example Merchant"
    },
    buttonOptions: {
    buttonSizeMode: GPButtonSizeMode.fill
    },
    billingParams: {
    billingAddressRequired: true,
    billingAddressFormat: GPBillingAddressFormat.full
    },
    shippingParams: {
    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";
    }
    authorizeGPay(paymentResponse)
    .then((resp) => {
    gpRequest.handleResponse(resp);
    setGPPayload(JSON.stringify(paymentResponse, null, 2));
    resolve(resp);
    })
    .catch((rej) => {
    console.error("Payment is not authorized", JSON.stringify(rej));
    setGPPayload("");
    setTimeout(function () { alert("Payment is not authorized. Please check the logs") }, 500);
    reject(rej);
    });
    } catch (err) {
    const emsg = JSON.stringify(err);
    console.error(emsg);
    setTimeout(function () { alert(emsg) }, 500);
    reject({error: err});
    }
    } catch (err) {
    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);
    }
    },
    };
  2. 2.
    Object with necessary properties to initialize Google Pay:
    function initGP() {
    return {
    merchantInfo: gpRequest.merchantInfo,
    buttonOptions: gpRequest.buttonOptions,
    onGetTransactionInfo: "gpRequest.onGetTransactionInfo",
    environment: gpRequest.environment,
    billingParameters: gpRequest.billingParams,
    shippingParameters: {
    emailRequired: gpRequest.shippingParams.emailRequired,
    onGetShippingCosts: "gpRequest.shippingParams.onGetShippingCosts",
    onGetShippingOptions: "gpRequest.shippingParams.onGetShippingOptions"
    },
    onBeforeProcessPayment: "gpRequest.onBeforeProcessPayment",
    onProcessPayment: "gpRequest.onProcessPayment",
    onPaymentCanceled: "gpRequest.onPaymentCanceled",
    onGPButtonLoaded: "gpButtonLoaded"
    };
    }
    For more information please refer to Request object
  3. 3.
    Google Pay ifield:
    <style>
    ......
    iframe {
    border: 0 solid black;
    width: 600px;
    height: 28px;
    padding: 0px;
    margin-bottom: 5px;
    }
    iframe.gp {
    display: block;
    border: 0;
    width: 250px;
    height: 45px;
    padding: 0px;
    margin: 0px;
    }
    .hidden {
    display: none;
    }
    .....
    </style>
    <body>
    <form id="payment-form" method="POST">
    .....
    <input id="amountId" name="xAmount" placeholder="Amount"></input>
    .....
    <iframe id="igp" class="gp hidden" data-ifields-id="igp" data-ifields-oninit="initGP" src="igp.htm"
    allowpaymentrequest
    sandbox="allow-popups allow-modals allow-scripts allow-same-origin"
    title="GPay checkout page">
    </iframe>
    .....
    </form>
    </body>
  4. 4.
    Let’s enable Google Pay for the website:
    document.addEventListener("DOMContentLoaded", function(event) {
    .....
    ckGooglePay.enableGooglePay({amountField: 'amount'});
    .....
    }
    For more information please refer to Google Pay Control Object
  5. 5.
    To see the full solution please click here.