Google Pay Integration

This implementation provides a seamless integration between Google Pay (processed via PayPal) and HubBox's pickup point selection service, enabling customers to choose delivery to collect points directly within the Google Pay interface.

Architecture Overview

The integration consists of four primary TypeScript modules that work together to manage the payment flow and collect point selection:

• main.ts: Application initialization and SDK setup
• googlePayButton.ts: Core payment session management, event orchestration, and page reload logic
• fetchPaypal.ts: API communication layer for payment processing operations (via PayPal)
• buttonUtils.ts: Utility functions for HubBox widget management, building Google Pay requests, and parsing transaction info

Core Components

Payment Session HubBox Widget

Payment Session Management

The system initializes a Google Pay session via the PayPal SDK. Unlike the standard flow, this implementation utilises a page reload strategy to handle the Google Pay Modal's window locking behaviour.

When a customer selects the collection point shipping option, the page reloads to close the Google Pay Modal and immediately opens the HubBox widget.

HubBox Widget Integration

The HubBox Single Widget Manager is initialized in deferred render mode, pointing to the sandbox environment.

Trigger: Upon the page reload triggered by a user having selected to collect, the widget is injected into a custom modal overlay.

Action: Once a collect point is confirmed, the Google Pay Modal is automatically re-opened with the updated shipping address derived from the selected pickup point.

Event Flow

1. Initialization: The application loads both PayPal and Google Pay SDKs using a browser-safe client token, and initializes the Google Payments Client.
2. Payment Initiation: When the Google Pay button is clicked, a payment data request is built, and the Google Pay Modal is displayed.
3. Shipping Selection: If the customer selects the collection point shipping option within the Google Pay Modal, the system intercepts this event.
4. Collection Point Selection: The page is programmatically reloaded to close the locked Google Pay Modal, and the HubBox widget is immediately displayed for selection.
5. Payment Re-initiation: Upon collection point confirmation, the HubBox widget closes, and the Google Pay Modal re-opens with the collection point address pre-filled.
6. Order and Payment Completion: Upon payment authorisation, the order is created and immediately confirmed with the selected collection point address passed directly to the PayPal session (replacing the need for a separate patch update).

API Endpoints

Backend Communication

The implementation communicates with the following backend endpoints:

• GET /paypal-api/auth/browser-safe-client-token Retrieves authentication token for PayPal SDK initialization.
• POST /paypal-api/checkout/orders/create Creates a new PayPal order within the Google Pay context.
• POST /paypal-api/checkout/orders/{orderId}/capture Captures payment for an approved order.

State & Error Management

State Management

A centralised PageState class works in tandem with browser sessionStorage to maintain the payment state.

Why sessionStorage?

sessionStorage is critical in this implementation to persist transaction data and flags across the page reload required to transition between the Google Pay Modal and the HubBox widget.

Error Handling

The implementation includes comprehensive error handling for authorisation failures and invalid transaction data.

UI Feedback

Errors are mapped to standard Google Pay PaymentAuthorizationResult objects to provide feedback within the native UI.

Debugging

Console logs track internal failures.

HubBox Configuration

The environment is currently set to Sandbox mode for testing.

The HubBox Widget is configured with:

• configId: dpd_uk (DPD UK carrier)
• Locale: en-GB (British English)
• Environment: Sandbox mode

Explore our GitHub Repository

Access our collection of integration examples for leading one-click payment providers. These samples demonstrate how to pass pickup point metadata through express checkout APIs.

View GitHub Repository