Google Pay with web components

Introducing Web Component Google Pay

To simplify Google Pay on the web, Jupico provides a reusable, framework-agnostic <google-pay-jupico> component. You embed one script and drop a single tag to render the native Google Pay button, handle merchant validation, present the sheet, and return a short-lived token (or payment payload) on success.

🛠️ Step-by-Step Guide

1️⃣ Add Jupico’s JavaScript Library

Include the hosted bundle that registers the Google Pay component:

<head>
  <meta charset="UTF-8" />
  <!-- 👇🏻 Add Jupico hosted script (Google Pay button is included here or in a sibling bundle) -->
  <script src="https://sandbox-payments-hosted-pages.jupico.com/wc/tokenization-form.umd.js"></script>
</head>

2️⃣ Include the Web Component

Use the <google-pay-jupico> tag and pass the required properties.

<google-pay-jupico
  id="google-pay-btn"
  :sessions="{YOUR_SESSIONS_OBJECT}"
  :amount="hostedSession.totalAmount"
  :transactionComplete.prop="handleGooglePayAuthorization"
/>

// Vanilla JavaScript
document.addEventListener("DOMContentLoaded", function () {
  fetch("https://your-appserver.com/browser-session-authorize", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ publicKey: "YOUR_PUBLIC_KEY",
     "googlePay": {
           "enabled": true,
           "amount": 23,
           "description": "test googlePay"
       }
    })
    .then(res => res.json())
    .then(res => {
      const el = document.createElement("google-pay-jupico");
      el.id = "google-pay-btn";
      el.sessions = res?.data?.sessions;                // required
      el.transactionComplete = handleGooglePayAuthorization; // required
      document.getElementById("google-pay-container").appendChild(el);
    })
    .catch(err => console.error("Error:", err));
});

🔹 Required Properties

sessions: authorization sessions object from your backend (don’t modify it).
transaction-complete: callback invoked when the google Pay sheet finishes (success/cancel/error).
amount: Total amount displayed and charged for the transaction, expressed in the smallest currency unit (for example, 23 = 23.00 in your configured currency).

3️⃣ Handle Completion (Success / Error)

Your callback receives the result of the Google Pay authorization. On success, you’ll typically get a short-lived token (or an Google Pay payment payload) to send to your server.

function handleGooglePayAuthorization(event) {
  // Inspect to learn the exact payload shape for your environment
  console.log("🍏 Google Pay result:", event);

  if (event?.status === "authorized" || event?.success === true) {
    const oneTimeToken =
      event.oneTimeToken || event.paymentToken || event.token;
    // Send to your backend to create the charge/authorization
    fetch("https://your-appserver.com/googlepay/confirm", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ paymentToken: oneTimeToken }),
    })
      .then(r => r.json())
      .then(r => console.log("✅ Server confirmation:", r))
      .catch(err => console.error("❌ Server error:", err));
  } else if (event?.status === "canceled") {
    console.warn("⛔️ User canceled Google Pay.");
  } else {
    console.error("❌ Google Pay error:", event?.error || event);
  }
}

🔹 Full Integration Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Google Pay (Web) – Jupico</title>

  <!-- Jupico hosted script (registers the web components) -->
  <script
    src="https://sandbox-payments-hosted-pages.jupico.com/wc/tokenization-form.umd.js"
    charset="utf-8"
  ></script>

  <!-- Or, if separated in your environment:
  <script src="https://sandbox-payments-hosted-pages.jupico.com/wc/google-pay-jupico.umd.js" charset="utf-8"></script>
  -->
</head>
<body>
  <div id="google-pay-container"></div>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      // 1) Get sessions from your backend (your server does the B2B authorize call)
      fetch("https://your-appserver.com/browser-session-authorize", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ publicKey: "YOUR_PUBLIC_KEY" }),
      })
      .then(response => response.json())
      .then(response => {
        // 2) Create the Google Pay component
        const googlePayEl = document.createElement("google-pay-jupico");

        googlePayEl.id = "google-pay-btn";
        googlePayEl.sessions = response?.data?.sessions;
        googlePayEl.transactionComplete = handleGooglePayAuthorization;

        document
          .getElementById("google-pay-container")
          .appendChild(googlePayEl);
      })
      .catch(error => console.error("Init error:", error));

      // 3) Completion handler (success / cancel / error)
      function handleGooglePayAuthorization(event) {
        console.log("handleGooglePayAuthorization", event);

        if (event?.status === "authorized" || event?.success === true) {
          const token =
            event.oneTimeToken ||
            event.paymentToken ||
            event.token;

          // Complete payment on your server
          fetch("https://your-appserver.com/googlepay/confirm", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ paymentToken: token }),
          })
          .then(r => r.json())
          .then(r => console.log("Server confirmation:", r))
          .catch(err => console.error("Server error:", err));
        }
        else if (event?.status === "canceled") {
          console.warn("User canceled Google Pay");
        }
        else {
          console.error("Google Pay error:", event?.error || event);
        }
      }
    });
  </script>
</body>
</html>