Skip to main content

Documentation Index

Fetch the complete documentation index at: https://waffo.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

Google Pay is a convenient payment system that allows customers to make payments in your app or website using any credit or debit card saved to their Google Account.

​
Overview

Since Google devices are widely used in the countries where Waffo operates, supporting Google Pay in your app can help simplify the checkout process and increase conversions, as payment details are recovered from the customers’ Google Accounts whenever they have previously saved or used their credit or debit cards with Google Pay.
To view the list of countries where Google Pay is supported, please see Countries or regions where you can make payments with Google.

​
Payment flow

Google Pay payment flow
  1. The customer clicks on the Google Pay button in the merchant’s client, whether it is an online store or app. The merchant initiates the Google Pay request using the Google Pay Web API or Android SDK.
  2. After the customer selects his payment method or provides his payment details, Google replies with a token.
  3. The merchant’s client submits this information to the merchant’s backend.
  4. In the payment request to Waffo, the merchant includes the token received in step 2.
  5. Waffo processes the payment using the Google Pay token and returns the payment confirmation to the merchant.
  6. The merchant then notifies the customer that the payment has been successful.

​
Integration

1

Google Integration Frontend

Required informationWhen performing this step use the following parameters:
  • gatewayMerchantId — You can obtain this value from your TAM * gateway - use waffo as the parameter value
Required fields: name, address, phone, and email.
Required document informationPlease, remember to also request the user’s personal ID document before or after the user clicks on the Google Pay button and sends it to Waffo in the payer object, as this is a requirement for payment.
Supported Payment Method
  • For supported payment type, select CARD. The following card networks are currently supported: VISA MASTERCARD AMEX DISCOVER For supported authentication methods use PAN_ONLY.
2

Waffo Integration

You will need to submit a request via the https://api.waffo.com/api/v1/order/create endpoint using the following parameter values:Example request body
{
  "orderAmount": "100",
  "orderCurrency": "KRW",
  "paymentInfo": {
    "payMethodName": "GOOGLEPAY",
    "payMethodType": "CARD"
  },
  "userInfo": {
    "userId": "123456",
    "userFirstName": "Ricardo"
  },
  "card": {
    "gpay_token": {
      "signature": "MEQCIBllBeoYFjIvIjPZmYG..."
    }
  },
  "order_id": "657434343",
  "notification_url": "http://merchant.com/notifications"
}
  • paymentInfo.payMethodType should be CARD.
  • card.gpay_token should be the JSON obtained in the Google Integration step. It is important to send a JSON object and not a string in this parameter.
Example response body
{
  "code": "0",
  "msg": "Success",
  "data": {
    "merchantOrderId": "2023081001",
    "orderStatus": "Success"
  }
}
For billing address parameters, please see the BillingAddress.

​
Getting ready to go live

After you have completed all the necessary steps of the integration process in the testing environment, please make sure you have requested Google Production Access, as detailed in the Google Web and Android documentation, and have updated your Google integration configuration for Production environment access. Finally, ensure you have contacted your Technical Account Manager so that we can help check everything has been correctly configured and confirm you are ready to go live.
For more information, please see Acceptable Use Policy and Google Pay API Terms of Service.

​
Waffo Payment Page Integration

Integrate Google Pay on your Waffo Payment Page by contacting our Support Team and specify the following:
  • The website domain from which you wish to process Google Pay payments.
  • The Merchant IDs to be enabled for processing Google Pay Payments.
Once this is set up, the Buy with G Pay button becomes visible on the Waffo Payment Page to eligible customers.
Google Pay transactions that are working in real PAN mode must comply with the 3D-Secure SCA mandate. If 3D-Secure applies to your market region, contact Waffo to enable 3D-Secure on your merchant account.
After your customer presses the G Pay button, Waffo takes care of the rest.
Waffo Payment Page Google Pay

​
Google Pay (Web SDK)

This guide provides steps to integrate Google Pay as a Waffo alternative payment method (APM) into your payment flow using the Waffo Web SDK platform. Prerequisites and Notes
  • This guide assumes you have completed all account setup prerequisites, and are ready to integrate Google Pay into your payment flow.
  • Use these gateway credentials in requests:
    • For the test (sandbox) environment: gatewayMerchantId: “googletest”
    • For the production environment: gatewayMerchantId: You can obtain this value from your TAM
  • The Google Pay Web environment must be set up according to the Google Pay guidelines:
Google Pay domain verification example
Only some information in the pages listed are relevant to Waffo integration. Other information is relevant only for merchants performing a direct Google Pay integration, without Waffo.
  • The Google account used for testing should be linked to a relevant test card:
  • Google Pay supports recurring payments only if you (the merchant) conforms to the following policies:
    • The merchant must comply with the network rules, especially the merchant-initiated transactions (MIT) rules.
    • The merchant must disclose the “Terms of payment” within the Merchant’s “buyflow”, and the customer must accept the “Terms of payment”.
  • Before using Web SDK for non-3D payments, contact Waffo Support and have them configure your account for the non-3D payment flow.
An example of the full Google Pay Web SDK integration can be viewed, run and customize in the JSFiddle demonstration environment.
1

Authentication

Follow the instructions in these steps:
  1. Initiate a Session This authenticates and sets up an order in the Waffo system, by sending an /openOrder request, and returns a sessionToken.
  2. Initialize the Web SDK This instantiates the Web SDK with the sessionToken received from the server call to /openOrder.
  3. Get APM Details (optional) Perform this is an optional step if you want to retrieve a list of APMs for the customer to choose a payment method. (If you already have the relevant APM details then there is no need to perform this step.)
2

Google Pay UI Button

  1. Create the Google Pay UI button according to the instructions in the Google Pay for Web Payments Brand Guidelines Guide.
  2. On your payment page, define the tokenizationSpecification constant as shown below. (When the customer presses the Google Pay button, this parameter identifies your gateway and your site’s gateway merchant identifier.)
Example tokenizationSpecification Request
const tokenizationSpecification = {
  type: "PAYMENT_GATEWAY",
  parameters: {
    gateway: "waffo",
    gatewayMerchantId: "googletest", //'googletest' for test
  },
}
In some mobile browsers, Google Pay is not “transparent”. The IFrame containing Google Pay must have an extra attribute with “feature policy allow”=“payment”, such as: .
3

Collect the Card Details

Pressing the Google Pay button collects your customer’s card details and returns them to you as an encrypted Google Pay token.
  1. The customer triggers the Google Pay payment flow by pressing the Google Pay button.
At this point, your customer may be asked to log in to their Google Pay account.
  1. Google Pay displays all the cards associated with the customer’s Google account, or asks the customer to “Add new credit or debit card” details.
  2. The customer selects a payment method and Google Pay returns the encrypted Google Pay token (containing the paymentMethod class in JSON format).
Press here to see more information regarding payment data cryptography.
4

Payment

The Web SDK createPayment() method manages end-to-end card payment processing, including any 3D-Secure or PCI requirements.Send a createPayment() request with the paymentOption.card.externalToken parameters:
  • externalTokenProvider: “GooglePay”
  • mobileToken: ""
Example createPayment() Request
sfc.createPayment({
  sessionToken: "<sessiontoken>", // received from openOrder API
  merchantId: "<your merchantId>", // as assigned by Waffo
  merchantSiteId: "<your merchantSiteId>", // as assigned by Waffo
  clientUniqueId: "<unique transaction ID in merchant system>", // optional
  paymentOption: {
    card: {
      externalToken: {
        externalTokenProvider: "GooglePay",
        mobileToken: "<encrypted Token using Waffo open key>"
      }
    }
  },
  billingAddress: {
    email: "john.smith@email.com",
    county: "US"
  },
  function(res) {
    console.log(res)
    if (res.cancelled === true) {
      example.querySelector(".token").innerText = "cancelled";
    } else {
      example.querySelector(".token").innerText = res.transactionStatus + " - Reference: "res.transactionId;
    }
    example.classList.add("submitted");
  }
});
Example createPayment() Response
{
  "result": "APPROVED",
  "errCode": 0,
  "errorDescription": "",
  "userPaymentOptionId": "14958143",
  "ccCardNumber": "5****5761",
  "bin": "511142",
  "last4Digits": "5761",
  "ccExpMonth": "09",
  "ccExpYear": "21",
  "transactionId": "1110000000004146935",
  "threeDReason": "",
  "threeDReasonId": "",
  "challengeCancelReasonId": "",
  "challengeCancelReason": "",
  "isLiabilityOnIssuer": "1",
  "challengePreferenceReason": "12",
  "cancelled": false
}
5

Control 3D Flow

The merchant can control 3D flow via Web SDK by adding googlePay3Dflow to the paymentOption class in createPayment(). When sending googlePay3Dflow=enable (default), Web SDK processes the card transaction with 3D-Secure verification; when sending googlePay3Dflow=disable, Web SDK processes the card transaction as a non-3D Google Pay transaction.googlePay3Dflow overrides force3D only for Google Pay.Example createPayment() request with googlePay3Dflow
sfc.createPayment({
  sessionToken: "<sessiontoken>", // received from openOrder API
  merchantId: "<your merchantId>", // as assigned by Waffo
  merchantSiteId: "<your merchantSiteId>", // as assigned by Waffo
  clientUniqueId: "<unique transaction ID in merchant system>", // optional
  paymentOption: {
    card: {
      externalToken: {
        externalTokenProvider: "GooglePay",
        mobileToken: "<encrypted Token using Waffo open key>"
      }
    }
  },
  googlePay3Dflow: "enable", //default value is enable
  billingAddress: {
    email: "john.smith@email.com",
    county: "US"
  },
  function(res) {
    console.log(res)
    if (res.cancelled === true) {
      example.querySelector(".token").innerText = "cancelled";
    } else {
      example.querySelector(".token").innerText = res.transactionStatus + " - Reference: "res.transactionId;
    }
    example.classList.add("submitted");
  }
});
6

Payment Web SDK JSFiddle

You can use the JSFiddle demonstration environment to view, run and customize this Google Pay Web SDK example:JavaScript
var show = function (elem) {
        elem.classList.add('is-visible');
};

var hide = function (elem) {
  elem.classList.add('is-hide');
};

let allowCreditCards = true;
let allowPrepaidCards = false;
const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];
const allowedCardNetworks = ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"];
let assuranceDetailsRequired = false;
let billingAddressParameters = {
        format: "MIN",
        phoneNumberRequired: false
};
let billingAddressRequired = false;
let checkoutOption = "COMPLETE_IMMEDIATE_PURCHASE";
let gateway = "waffo";
let gatewayMerchantId = "googletest";
let googleMerchantId = "";// You can obtain this value from your TAM
let merchantName = "Google Pay webSDK";

let tokenizationType = "PAYMENT_GATEWAY"; // Мlet totalPriceStatus = "FINAL";
let googlePayEnv = 'TEST' // 'TEST' or 'PRODUCTION'let country = 'DE';
let currency = "EUR";
let amount = '115.2'const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedAuthMethods: allowedCardAuthMethods,
    allowedCardNetworks: allowedCardNetworks,
    allowCreditCards: allowCreditCards,
    allowPrepaidCards: allowPrepaidCards,
    assuranceDetailsRequired: assuranceDetailsRequired,
    billingAddressRequired: billingAddressRequired,
    billingAddressParameters: billingAddressParameters,
  }
};

function getGoogleTransactionInfo() {
  return {
    countryCode: country,
    currencyCode: currency,
    totalPriceStatus: totalPriceStatus,
    totalPrice: amount,
    checkoutOption: checkoutOption
  };
}

const tokenizationSpecification = {
  type: tokenizationType,
  parameters: {
    'gateway': gateway,
    'gatewayMerchantId': gatewayMerchantId
  }
};

function getGooglePaymentDataRequest() {
  const paymentDataRequest = Object.assign({}, baseRequest);
  paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
  paymentDataRequest.merchantInfo = {
    // @todo a merchant ID is available for a production environment after approval by Google// See {@link https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist|Integration checklist}merchantId: googleMerchantId,
    merchantName: merchantName
  };
  return paymentDataRequest;
}

const baseRequest = {
  apiVersion: 2,
  apiVersionMinor: 0
};

const cardPaymentMethod = Object.assign({},
  baseCardPaymentMethod, {
    tokenizationSpecification: tokenizationSpecification
  }
);

let paymentsClient = null;

function getGoogleIsReadyToPayRequest() {
  return Object.assign({},
    baseRequest, {
      allowedPaymentMethods: [baseCardPaymentMethod]
    }
  );
}

function getGooglePaymentsClient() {
  if (paymentsClient === null) {
    paymentsClient = new google.payments.api.PaymentsClient({
      environment: googlePayEnv
    });
  }
  return paymentsClient;
}

function onGooglePayLoaded() {
  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
    .then(function(response) {
      if (response.result) {
        addGooglePayButton();
      }
    })
    .catch(function(err) {
      console.error(err);
    });
}

function addGooglePayButton() {
  const paymentsClient = getGooglePaymentsClient();
  const button =
    paymentsClient.createButton({
      onClick: onGooglePaymentButtonClicked
    });
  document.getElementById('googlePayContainer').appendChild(button);
}

function prefetchGooglePaymentData() {
  const paymentDataRequest = getGooglePaymentDataRequest();
  paymentDataRequest.transactionInfo = {
    totalPriceStatus: 'NOT_CURRENTLY_KNOWN',
    currencyCode: currency
  };
  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.prefetchPaymentData(paymentDataRequest);
}

function onGooglePaymentButtonClicked() {
  const paymentDataRequest = getGooglePaymentDataRequest();
  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();

  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.loadPaymentData(paymentDataRequest)
    .then(function(paymentData) {
      processPayment(paymentData);
    })
    .catch(function(err) {
      console.error(err);
    });
}

function processPayment(paymentData) {
  console.log(paymentData);
  payWithGooglePay(paymentData);
  paymentToken = paymentData.paymentMethodData.tokenizationData.token;
}

function payWithGooglePay(paymentToken) {
        window.sfc.createPayment({
      sessionToken   : document.getElementById('session').value,
      merchantId     : document.getElementById('metchantID').value, //as asigned by SafeChargemerchantSiteId : document.getElementById('metchantSiteID').value,
      cardHolderName: 'CL-BRW1',
      "paymentOption":{
        "card":{
            "externalToken":{
                "externalTokenProvider":"GooglePay",
                "mobileToken": JSON.stringify(paymentToken.paymentMethodData),
            }
        }
      },
      "userDetails": {
          "firstName": "first_name",
          "lastName": "last_name",
          "email": "goole@pay.com",
          "phone": "phone"
      },
      "shippingAddress": {
          "address": "address",
          "city": "city",
          "country": "DE",
          "state": "",
          "zip": "1340"
      },
      "billingAddress": {
          "email": "asd@asdasd.com",
          "address": "NØRREGADE 2",
          "city": "city",
          "country": "DE",
          "state": "",
          "zip": "1335"
      },

  }, function (crRes) {
      console.log(crRes);
  })
}

function initSDK() {
  hide(document.getElementsByClassName('webSDK-placeholder')[0]);
        show(document.getElementsByClassName('toggle-content')[0]);
        var sessionToken = document.getElementById('session').value;
        var sfc = SafeCharge({
    env: 'int',
    merchantId: document.getElementById('metchantID').value,
    merchantSiteId: document.getElementById('metchantSiteID').value
  });
        window.sfc = sfc
        onGooglePayLoaded()

}
HTMLCSS