Home / Docs / Google Pay

Google Pay – quick start with MSolution Gateway

Wire up Google Pay using MSolution’s SDK: the <msolution-googlepay-button> web component, session creation, backend handoff, and events in one place.

SDK file Google Pay Guide

Quick start

Add Google Pay JS and the MSolution Google Pay SDK to your page.
Expose a backend endpoint that creates a session and returns sessionId, signature and publicKey.
Drop the <msolution-googlepay-button> element, pass createSession via setConfig, and listen for events.

1) Add scripts

<script async src="https://pay.google.com/gp/p/js/pay.js"></script>
<script async src="https://sdk.msolution.az/google/v1.0/msolution-google-pay-sdk.js"></script>

2) Button + createSession sample

<msolution-googlepay-button
  id="gpay-btn"
  amount="12.50"
  currency="AZN"
  country="AZ"
  label="Order #1024"
  google-environment="TEST"
  process-environment="TEST"
  locale="en"
></msolution-googlepay-button>

<script>
  const btn = document.getElementById("gpay-btn");
  const SESSION_ENDPOINT = "/api/payments/google/session"; // YOUR SESSION API ENDPOINT (merchant backend)

  btn.setConfig({
    getAmount: () => 12.5, // or a dynamic total
    currency: "AZN",
    country: "AZ",
    googleEnvironment: "TEST", // switch to PRODUCTION in live
    processEnvironment: "TEST",
    // Backend call that returns sessionId, signature, publicKey
    async createSession({ amount, currency, country }) {
      const res = await fetch(SESSION_ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ amount, currency, country }),
      });
      if (!res.ok) throw new Error("Session alınmadı");
      return res.json();
    },
  });

  btn.addEventListener("payment-success", (e) => {
    console.log("Payment success", e.detail);
  });

  btn.addEventListener("payment-error", (e) => {
    console.error("Payment error", e.detail);
  });
</script>

Config options

Required

amount / getAmount() — amount (2 decimals).
currency — default AZN (AZN/944 supported).
country — default AZ.
googleEnvironment — TEST | PRODUCTION (Google Pay UI environment).
processEnvironment — TEST | PRODUCTION (token MSolution backend endpoint).
createSession() — backend call returning sessionId, signature, publicKey.

Optional

label, merchantName, transactionId.
backendUrl — default MSolution endpoint; override when gateway URL is provided.
button-color, button-type, button-size-mode, locale attributes for UI.

Gateway integration (recommended)

In gateway flow you can split google-environment for the UI and process-environment for MSolution processing. The session is created on your backend and the token is posted to the MSolution gateway API.

1) Frontend: <msolution-googlepay-button> obtains Google Pay token; sessionId/signature/publicKey come from backend.
2) Backend: createSession endpoint returns sessionId, signature, publicKey for the order/amount.
3) Frontend: token + sessionId + signature are POSTed to MSolution gateway API (handled by SDK).
4) Gateway: decrypts token, routes to processor, returns result.
5) Gateway response: success, message, transactionId, optional redirectLink/receiptUrl.
6) Frontend: show UI based on payment-success | payment-error events.

<script src="https://pay.google.com/gp/p/js/pay.js" async></script>
<script src="https://sdk.msolution.az/google/v1.0/msolution-google-pay-sdk.js" defer></script>

<msolution-googlepay-button
  id="gpay-btn"
  google-environment="PRODUCTION"
  process-environment="PRODUCTION"
  button-color="black"
  button-type="pay"
  button-size-mode="fill"
  locale="en"
/>

<script>
  const btn = document.getElementById("gpay-btn");

  document.addEventListener("msolution-googlepay-ready", () => {
    btn.setConfig({
      getAmount: () => 19.99,
      currency: "AZN",
      country: "AZ",
      label: "Order #1050",
      merchantName: "Your Brand",
      // Gateway: session is created on backend and response returned
      async createSession({ amount, currency, country }) {
        const res = await fetch("/api/payments/google/session", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ amount, currency, country }),
        });
        if (!res.ok) throw new Error("Session alınmadı");
        return res.json(); // { sessionId, signature, publicKey, ... }
      },
    });
  });

  document.addEventListener("payment-success", (e) => console.log(e.detail));
  document.addEventListener("payment-error", (e) => console.error(e.detail));
</script>

Production gateway snippet

<!-- Frontend (recommended gateway flow) -->
<script async src="https://pay.google.com/gp/p/js/pay.js"></script>
<script async src="https://sdk.msolution.az/google/v1.0/msolution-google-pay-sdk.js"></script>

<msolution-googlepay-button
  id="gpay-prod"
  google-environment="PRODUCTION"
  process-environment="PRODUCTION"
  button-color="black"
  button-type="pay"
  button-size-mode="fill"
  locale="en"
></msolution-googlepay-button>

<script>
  const btn = document.getElementById("gpay-prod");

  document.addEventListener("msolution-googlepay-ready", () => {
    btn.setConfig({
      getAmount: () => window.checkoutTotal,       // dynamic total
      currency: window.checkoutCurrency || "AZN",
      country: "AZ",
      label: "Order #" + window.orderNumber,
      merchantName: "Your Brand",
      googleEnvironment: "PRODUCTION",
      processEnvironment: "PRODUCTION",
      async createSession({ amount, currency, country }) {
        const res = await fetch("/api/payments/google/session", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ amount, currency, country }),
        });
        if (!res.ok) throw new Error("Session failed");
        return res.json(); // { sessionId, signature, publicKey, ... }
      },
    });
  });

  document.addEventListener("payment-success", (e) => {
    const { redirectLink, receiptUrl } = e.detail || {};
    if (redirectLink) return (window.location = redirectLink);
    if (receiptUrl) return window.open(receiptUrl, "_blank");
    // fallback UI
    alert("Payment successful");
  });

  document.addEventListener("payment-error", (e) => {
    const { error, isUserAction } = e.detail || {};
    if (isUserAction) return; // user cancelled
    alert(error || "Payment error");
  });
</script>

Gateway API request

gateway endpoint: https://pay.msolution.az/eComIntegration/api/v1/google-pay/process-wallet-payment
method: POST 
Content-Type: application/json

{
  "sessionId": "<sessionId-from-createSession>",
  "signature": "<signature-from-createSession>",
  "data": { /* Google Pay token object (ECv2) */ }
}

// Sample response:
{
  "success": true,
  "message": "Payment processed",
  "transactionId": "TX123456",
  "redirectLink": "https://your-site.com/thank-you",
  "receiptUrl": "https://pay.msolution.az/receipt/abc",
  "amount": "19.99"
}

Events

msolution-googlepay-ready

Dispatched on document once the SDK is ready.

payment-start

Fired on the element with config details at click.

payment-success

Backend response, amount, currency, transactionId, receiptUrl (if present) in <detail>.

payment-error

Fired with <detail.error>, <code>code</code> and <code>isUserAction</code> flags.

Backend session example

// Express example (server-side)
app.post("YOUR_SESSION_API_ENDPOINT", async (req, res) => {
  const { amount, currency, country } = req.body;

  // TODO: order validation, amount calculation, logging
  const session = await createGatewaySession({
    amount,
    currency: currency || "AZN",
    country: country || "AZ",
    environment: "TEST", // switch to PRODUCTION
  });

  // Backend response must include at least:
  // sessionId, signature, publicKey, amount (optional transactionId, redirectLink)
  return res.json(session);
});

Key notes

Google Pay JS (pay.js) must be loaded over HTTPS.
In PRODUCTION, the real merchantId is picked automatically; align your createSession endpoint for prod as well.
On failure, the payment-error event fires; inform the user in UI.
Token is POSTed to backend together with sessionId and signature; you may return redirectLink or receiptUrl.
When a new SDK version ships, update the script URL; current link is v1.0.