Google Pay Sample Code
  1. 1.
    Helper object including all necessary components:
    1
    const gpRequest = {
    2
    environment: GPEnvironment.test,
    3
    merchantInfo: {
    4
    merchantName: "Example Merchant"
    5
    },
    6
    buttonOptions: {
    7
    buttonSizeMode: GPButtonSizeMode.fill
    8
    },
    9
    billingParams: {
    10
    billingAddressRequired: true,
    11
    billingAddressFormat: GPBillingAddressFormat.full
    12
    },
    13
    shippingParams: {
    14
    emailRequired: true,
    15
    onGetShippingCosts: function (shippingData) {
    16
    logDebug({
    17
    label: "onGetShippingCosts",
    18
    data: shippingData
    19
    });
    20
    return {
    21
    "shipping-001": "0.00",
    22
    "shipping-002": "1.99",
    23
    "shipping-003": "10.00"
    24
    }
    25
    },
    26
    onGetShippingOptions: function (shippingData) {
    27
    logDebug({
    28
    label: "onGetShippingOptions",
    29
    data: shippingData
    30
    });
    31
    let selectedOptionid = "shipping-001";
    32
    if (shippingData && shippingData.shippingOptionData && shippingData.shippingOptionData.id !== "shipping_option_unselected") {
    33
    selectedOptionid = shippingData.shippingOptionData.id;
    34
    }
    35
    return {
    36
    defaultSelectedOptionId: selectedOptionid,
    37
    shippingOptions: [
    38
    {
    39
    "id": "shipping-001",
    40
    "label": "Free: Standard shipping",
    41
    "description": "Free Shipping delivered in 5 business days."
    42
    },
    43
    {
    44
    "id": "shipping-002",
    45
    "label": "$1.99: Standard shipping",
    46
    "description": "Standard shipping delivered in 3 business days."
    47
    },
    48
    {
    49
    "id": "shipping-003",
    50
    "label": "$10: Express shipping",
    51
    "description": "Express shipping delivered in 1 business day."
    52
    },
    53
    ]
    54
    };
    55
    }
    56
    },
    57
    onGetTransactionInfo: function () {
    58
    let amt = getAmount();
    59
    return {
    60
    displayItems: [
    61
    {
    62
    label: "Subtotal",
    63
    type: "SUBTOTAL",
    64
    price: amt.toString(),
    65
    },
    66
    {
    67
    label: "Tax",
    68
    type: "TAX",
    69
    price: (0.1 * amt).toString(),
    70
    }
    71
    ],
    72
    countryCode: 'US',
    73
    currencyCode: "USD",
    74
    totalPriceStatus: "FINAL",
    75
    totalPrice: (1.1 * amt).toString(),
    76
    totalPriceLabel: "Total"
    77
    }
    78
    },
    79
    onBeforeProcessPayment: function () {
    80
    return new Promise(function (resolve, reject) {
    81
    try {
    82
    //Do some validation here
    83
    resolve(iStatus.success);
    84
    } catch (err) {
    85
    reject(err);
    86
    }
    87
    });
    88
    },
    89
    onProcessPayment: function (paymentResponse) {
    90
    return new Promise(function (resolve, reject) {
    91
    try {
    92
    // show returned data in developer console for debugging
    93
    console.log("paymentResponse", JSON.stringify(paymentResponse));
    94
    paymentToken = paymentResponse.paymentData.paymentMethodData.tokenizationData.token;
    95
    console.log("paymentToken", paymentToken);
    96
    const amt = (paymentResponse && paymentResponse.transactionInfo && paymentResponse.transactionInfo.totalPrice) || 0;
    97
    try {
    98
    if (amt <= 0) {
    99
    throw "Payment is not authorized. Invalid amount. Amount must be greater than 0";
    100
    }
    101
    authorizeGPay(paymentResponse)
    102
    .then((resp) => {
    103
    gpRequest.handleResponse(resp);
    104
    setGPPayload(JSON.stringify(paymentResponse, null, 2));
    105
    resolve(resp);
    106
    })
    107
    .catch((rej) => {
    108
    console.error("Payment is not authorized", JSON.stringify(rej));
    109
    setGPPayload("");
    110
    setTimeout(function () { alert("Payment is not authorized. Please check the logs") }, 500);
    111
    reject(rej);
    112
    });
    113
    } catch (err) {
    114
    const emsg = JSON.stringify(err);
    115
    console.error(emsg);
    116
    setTimeout(function () { alert(emsg) }, 500);
    117
    reject({error: err});
    118
    }
    119
    } catch (err) {
    120
    reject(err);
    121
    }
    122
    });
    123
    },
    124
    onPaymentCanceled: function(respCanceled) {
    125
    setTimeout(function () { alert("Payment was canceled") }, 500);
    126
    },
    127
    handleResponse: function (resp) {
    128
    const respObj = JSON.parse(resp);
    129
    if (respObj) {
    130
    if (respObj.xError) {
    131
    setTimeout(function () { alert(`There was a problem with your order (${respObj.xRefNum})!`) }, 500);
    132
    } else
    133
    setTimeout(function () { alert(`Thank you for your order (${respObj.xRefNum})!`) }, 500);
    134
    }
    135
    },
    136
    };
    Copied!
  2. 2.
    Object with necessary properties to initialize Google Pay:
    1
    function initGP() {
    2
    return {
    3
    merchantInfo: gpRequest.merchantInfo,
    4
    buttonOptions: gpRequest.buttonOptions,
    5
    onGetTransactionInfo: "gpRequest.onGetTransactionInfo",
    6
    environment: gpRequest.environment,
    7
    billingParameters: gpRequest.billingParams,
    8
    shippingParameters: {
    9
    emailRequired: gpRequest.shippingParams.emailRequired,
    10
    onGetShippingCosts: "gpRequest.shippingParams.onGetShippingCosts",
    11
    onGetShippingOptions: "gpRequest.shippingParams.onGetShippingOptions"
    12
    },
    13
    onBeforeProcessPayment: "gpRequest.onBeforeProcessPayment",
    14
    onProcessPayment: "gpRequest.onProcessPayment",
    15
    onPaymentCanceled: "gpRequest.onPaymentCanceled",
    16
    onGPButtonLoaded: "gpButtonLoaded"
    17
    };
    18
    }
    Copied!
    For more information please refer to Request object
  3. 3.
    Google Pay ifield:
    1
    <style>
    2
    ......
    3
    iframe {
    4
    border: 0 solid black;
    5
    width: 600px;
    6
    height: 28px;
    7
    padding: 0px;
    8
    margin-bottom: 5px;
    9
    }
    10
    iframe.gp {
    11
    display: block;
    12
    border: 0;
    13
    width: 250px;
    14
    height: 45px;
    15
    padding: 0px;
    16
    margin: 0px;
    17
    }
    18
    .hidden {
    19
    display: none;
    20
    }
    21
    .....
    22
    </style>
    23
    <body>
    24
    <form id="payment-form" method="POST">
    25
    .....
    26
    <input id="amountId" name="xAmount" placeholder="Amount"></input>
    27
    .....
    28
    <iframe id="igp" class="gp hidden" data-ifields-id="igp" data-ifields-oninit="initGP" src="igp.htm"
    29
    allowpaymentrequest
    30
    sandbox="allow-popups allow-modals allow-scripts allow-same-origin"
    31
    title="GPay checkout page">
    32
    </iframe>
    33
    .....
    34
    </form>
    35
    </body>
    Copied!
  4. 4.
    Let’s enable Google Pay for the website:
    1
    document.addEventListener("DOMContentLoaded", function(event) {
    2
    .....
    3
    ckGooglePay.enableGooglePay({amountField: 'amount'});
    4
    .....
    5
    }
    Copied!
    For more information please refer to Google Pay Control Object
  5. 5.
    To see the full solution please click here.
Export as PDF
Copy link