Google Pay™

Updated on 14 Nov 2024
4 Minutes to read

Article summary

Did you find this summary helpful?

Thank you for your feedback

Google Pay™

Google Pay is a digital payments platform that allows you to make secure payments with credit or debit cards linked to your account, either in apps and websites. It facilitates fast and secure transactions without the need to manually enter data on each purchase.

Supported operations

Operation	Description
✅ Payment Authorization	Block funds on the customer's card.
✅ Payment capture	Complete the transaction and transfer the funds.
✅ Direct payment	Combine authorization and capture in one step.
✅ Refund	Return the full amount of a transaction.
✅ Partial refund	It returns part of the captured amount.
✅ Cancel authorization	Reverts an authorization that was not captured.

Supported Card Networks

The following card networks are supported:

AMEX
MASTERCARD
VISA
JCB
DISCOVER
INTERAC

Compatibility

To learn more about Google Pay availability, see:

Web Integration Guide

To integrate Google Pay as a payment method with OrkestaPay, you need to follow the steps below:

1. Set up Google Pay™ as your payment method

To integrate Google Pay, you must first make a series of configurations from the OrkestaPay portal. Visit our Providers setup guide and look for Google Pay.

2. Tokenize Google Pay™ payment data

To tokenize payment data, follow the following steps:

Include OrkestaPay scripts: Use OrkestaPay scripts in your web application.
Initialize parameters: Here the OrkestaPay credentials are defined, as well as data regarding the payment to be processed.
Render the Google Pay payment button: Place the Google Pay button on your frontend.

Required resources:

CSS

https://checkout.orkestapay.com/web/components/payment-methods/styles.css

https://checkout.orkestapay.com/script/orkestapay.js
https://checkout.orkestapay.com/web/components/payment-methods/main.js

Code Example

In the following code snippet there are certain parameters that need to be replaced:

public_key : Public key, these credentials can be obtained in the OrkestaPay portal.
merchant_id: Merchant ID, these credentials can be obtained on the OrkestaPay portal.
is_sandbox: Define whether the credentials you're about to operate are testing or productive.
country_code: The code of the country with which you are going to generate your transaction.
currency: The code of the currency with which you are going to make the payment.
total_amount: Total transaction amount.

INFORMATION
To check OrkestaPay's credentials, you can visit our API Keys guide.

<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="/" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GooglePay web component</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="https://checkout.dev.orkestapay.com/web/components/payment-methods/styles.css" />
    <style>
      .code {
        color: inherit;
        overflow-wrap: break-word;
        white-space: pre-wrap;
      }
    </style>
  </head>
  <body>
    <main class="container">
      <section class="row mt-5">
        <h1 id="card-title" class="col-12 text-center mb-4">OrkestaPay - GooglePay Web Component</h1>
      </section>

      <section class="row">
        <article id="button-container" class="col-12 col-md-6 offset-md-3"></article>
        <article class="pt-3 col-12">
          <div id="payment-method-details" class="w-100 alert" role="alert"></div>
        </article>
      </section>
    </main>

    <noscript> Please enable JavaScript to continue using this application. </noscript>

    <script type="text/javascript" src="https://checkout.dev.orkestapay.com/script/orkestapay.js"></script>
    <script type="text/javascript" src="https://checkout.dev.orkestapay.com/web/components/payment-methods/main.js"></script>
    <script type="text/javascript">
      const { public_key, merchant_id, is_sandbox, country_code, currency, total_amount } = initValues();

      (async function main() {
        initOrkestaPay({ is_sandbox, merchant_id, public_key });

        const googlePayButton = document.createElement("orkestapay-googlepay-button");
        await customElements.whenDefined("orkestapay-googlepay-button");

        googlePayButton.params = {
          payment_details: { country_code, currency, total_amount },
          theme: { button_color: "default" },
        };
        googlePayButton.addEventListener("paymentMethodCreated", handlePaymentMethodCreated);

        const container = document.getElementById("button-container");
        container.appendChild(googlePayButton);
      })();

      function handlePaymentMethodCreated({ detail }) {
        const code = document.createElement("code");
        code.innerHTML = JSON.stringify(detail, null, 2);
        code.classList.add("code");

        const paymentMethodDetails = document.getElementById("payment-method-details");
        paymentMethodDetails.classList.remove("alert-danger");
        paymentMethodDetails.classList.add("alert-success");
        paymentMethodDetails.replaceChildren(code);

        // Implementar lógica para enviar el "payment_method_id" al backend y continuar con el proceso de pago
      }

      function initValues() {
        return {
          public_key: "<REPLACE_WITH_YOUR_PUBLIC_KEY>",
          merchant_id: "<REPLACE_WITH_YOUR_MERCHANT_ID>",
          is_sandbox: true,
          country_code: "MX",
          currency: "MXN",
          total_amount: "100.00",
        };
      }
    </script>
  </body>
</html>

Note
This code is a basic example that you should adapt to your real environment.

Sample Response (handlePaymentMethodCreated)

{
    "payment_method_id": "pym_0b7c26bd862c483393f5fdb0d0176055",
    "type": "GOOGLE_PAY",
    "card": {
        "bin": "411111",
        "last_four": "1111",
        "brand": "VISA",
        "card_type": "DEBIT",
        "holder_name": "",
        "holder_last_name": "",
        "expiration_month": "12",
        "expiration_year": "2026",
        "one_time_use": true
    },
    "status": "ACTIVE",
    "created_at": "1731521436082",
    "updated_at": "1731521436082"
}

3. Request payment

With the payment_method_id one in the answer, you can continue with the regular payment process with OrkestaPay from the backend.

Information
To learn more about the Direct Pay integration, visit our guide Payment integration.

Other Google Pay™ resources

Google provides a set of additional resources to help you with your deployments:

Was this article helpful?

What's Next

SDK's

Table of contents

Google Pay™
Supported operations
Supported Card Networks
Compatibility
Web Integration Guide
Other Google Pay™ resources