Google Pay

Google Pay™

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

Supported operations

Operation	Description
✅ Payment authorization	Blocks funds on the customer's card.
✅ Payment capture	Completes the transaction and transfers the funds.
✅ Direct payment	Combines authorization and capture in one step.
✅ Refund	Returns the full amount of a transaction.
✅ Partial refund	Returns part of the captured amount.
✅ Authorization cancellation	Reverses an authorization that was not captured.

Supported card networks

The following card networks are supported:

AMEX
MASTERCARD
VISA
JCB
DISCOVER
INTERAC

Compatibility

For more information about Google Pay availability, see:

Web integration guide

To integrate Google Pay as a payment method with OrkestaPay, follow these steps:

1. Configure Google Pay™ as a payment method

To integrate Google Pay, you must first perform a series of configurations from the OrkestaPay portal. Visit our Providers configuration guide and find the Google Pay section.

2. Tokenize Google Pay™ payment data

To tokenize the payment data, follow these steps:

Include OrkestaPay scripts: Use the OrkestaPay scripts in your web application.
Initialize parameters: Define the OrkestaPay credentials here, as well as data related to the payment to be processed.
Render the Google Pay button: Place the Google Pay button in your frontend.

Required resources:

CSS

<link
  rel="stylesheet"
  href="https://checkout.orkestapay.com/web/components/payment-methods/styles.css"
  integrity="sha384-5/NLomvLQk75JVAmEdaNkdkgLavuAlRS256szA++bmuw6Zph/wFYlWFHz9Fss7JF"
  crossorigin="anonymous"
/>

<script
  src="https://checkout.orkestapay.com/script/orkestapay.js"
  integrity="sha384-lQoLMYDY2Cz/Y+8BLiNbhfLVHWawqsA/gE/8WRTpF6ZS3EABNKXhrq/0bBu4M1aI"
  crossorigin="anonymous"
></script>

<script
  src="https://checkout.orkestapay.com/web/components/payment-methods/main.js"
  integrity="sha384-hvoIO7IyazX+Cc2LqBdHXx7Z3tq766248YzywLTN+D6f41Lub/VHUh2Pe5Q7WKfA"
  crossorigin="anonymous"
></script>

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 from the OrkestaPay portal.
merchant_id: Merchant ID; these credentials can be obtained from the OrkestaPay portal.
is_sandbox: Defines whether the credentials you are about to use are for testing or production.
country_code: Country code for your transaction.
currency: Currency code for your payment.
total_amount: Total transaction amount.

📘
Documentation
To consult OrkestaPay credentials, you can visit our guide Get API keys.

<!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/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="https://checkout.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.orkestapay.com/script/orkestapay.js"></script>
    <script type="text/javascript" src="https://checkout.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 must adapt to your real environment.

Response example (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 the payment

With the payment_method_id from the response, you can continue with the regular OrkestaPay payment process from the backend.

📘
Documentation
To learn more about direct payment integration, visit our guide Direct payment.

Other Google Pay™ resources

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