@hesabe-pay/direct-google-pay

v1.0.1

Published

8 months ago

A Web JS library for integrating direct google pay payment in Hesabe payment gateway

0High
0Medium
0Low

hesabe

kaliraj-hesabe

hesabe google-pay payment hesabe javascript umd browser

HesabeGooglePay Usage Guide

Installation

NPM

npm i @hesabe-pay/direct-google-pay

CDN

<script src="https://unpkg.com/@hesabe-pay/direct-google-pay@latest/cdn/hesabe-google-pay.min.js"></script>

Usage

CDN

<head>
    <script src="https://unpkg.com/@hesabe-pay/direct-google-pay@latest/cdn/hesabe-google-pay.min.js"></script>
</head>
<body>
<div id="google-pay-container">
    <!-- Google Pay button will be inserted here -->
</div>
</body>
<script>
    const config = {
        requestData: 'encrypted-request-data', // From your merchant checkout
        env: 'sandbox', // or 'production'
        debug: true,
        
        // Google Pay button customization
        buttonColor: 'default',
        buttonType: 'pay',
        buttonRadius: 6,
        buttonLocale: 'en',

        // Callbacks
        paymentAttemptedCallback: (result) => {
            if (result.status) {
                console.log('Payment successful:', result);
            } else {
                console.log('Payment failed:', result.message);
            }
        },
        paymentCancelledCallback: (error) => {
            console.log('Payment cancelled:', error);
        }
    };

    const googlePay = new HesabeGooglePay(config);
    
    // Initialize and create button
    googlePay.init().then(() => {
        googlePay.createButton('google-pay-container');
    });
</script>

ES Modules

import HesabeGooglePay from '@hesabe-pay/direct-google-pay';

const config = {
    requestData: 'encrypted-request-data', // From your merchant checkout
    env: 'sandbox', // or 'production'  
    debug: true,
    
    // Google Pay button customization
    buttonColor: 'default',
    buttonType: 'pay', 
    buttonRadius: 6,
    buttonLocale: 'en',

    // Callbacks
    paymentAttemptedCallback: (result) => {
        if (result.status) {
            console.log('Payment successful:', result);
        } else {
            console.log('Payment failed:', result.message);
        }
    },
    paymentCancelledCallback: (error) => {
        console.log('Payment cancelled:', error);
    }
};

const googlePay = new HesabeGooglePay(config);

// Initialize and create button
await googlePay.init();
await googlePay.createButton('google-pay-container');

Basic Usage

1. Initialize HesabeGooglePay

const googlePay = new HesabeGooglePay({
    // Required configuration
    requestData: 'encrypted-request-data', // From your merchant checkout

    // Optional configuration (with defaults)
    env: 'sandbox', // or 'production'
    debug: true,

    // Google Pay button customization
    buttonColor: 'default', // 'default', 'black', 'white'
    buttonType: 'pay',      // 'book', 'buy', 'checkout', 'donate', 'order', 'pay', 'plain', 'subscribe'
    buttonRadius: 6,
    buttonLocale: 'en',

    // Callbacks
    paymentAttemptedCallback: (result) => {
        if (result.status) {
            console.log('Payment successful:', result);
            // Handle successful payment
        } else {
            console.log('Payment failed:', result.message);
            // Handle failed payment
        }
    },

    paymentCancelledCallback: (error) => {
        console.log('Payment cancelled:', error);
        // Handle cancelled payment
    }
});

2. Initialize and Create Button

// Initialize Google Pay (now async and fetches configuration from API)
await googlePay.init();

// Create and add button to container
googlePay.createButton('google-pay-container')
    .then((button) => {
        console.log('Google Pay button created successfully');
    })
    .catch((error) => {
        console.error('Failed to create Google Pay button:', error);
    });

3. HTML Structure

<!DOCTYPE html>
<html>
<head>
    <title>Google Pay Integration</title>
</head>
<body>
<div id="google-pay-container">
    <!-- Google Pay button will be inserted here -->
</div>

<script src="https://unpkg.com/@hesabe-pay/direct-google-pay@latest/cdn/hesabe-google-pay.min.js"></script>
<script>
    // Your configuration and initialization code here
</script>
</body>
</html>

Configuration Options

Required Parameters

| Parameter | Type | Description | |---------------|--------|------------------------------------------------------------| | requestData | string | Encrypted payment request data from your merchant checkout |

Optional Parameters

| Parameter | Type | Default | Description | |----------------|---------|-----------|-----------------------------------------------| | env | string | 'sandbox' | Environment: 'sandbox' or 'production' | | debug | boolean | false | Enable debug logging | | buttonColor | string | 'default' | Button color ('default', 'black', 'white') | | buttonType | string | 'pay' | Button type ('book', 'buy', 'checkout', etc.) | | buttonRadius | number | 6 | Button border radius | | buttonLocale | string | 'en' | Button language |

Methods

`init()`

Initializes Google Pay SDK and sets up the payment client. Note: This method is now async and fetches configuration from the API.

await googlePay.init();

`createButton(containerId)`

Creates a Google Pay button and appends it to the specified container.

googlePay.createButton('container-id')
    .then(button => console.log('Button created'))
    .catch(error => console.error('Button creation failed'));

`processPayment()`

Processes the Google Pay payment (usually called automatically by button click).

googlePay.processPayment();

Error Handling

The library provides comprehensive error handling:

try {
    const googlePay = new HesabeGooglePay(config);
    googlePay.init();

    await googlePay.createButton('container');
} catch (error) {
    console.error('Google Pay initialization failed:', error.message);
}

Environment URLs

Payment Flow

User clicks Google Pay button
Google Pay sheet opens with available payment methods
User selects payment method and authorizes transaction
Payment is processed through Hesabe gateway
Transaction result is returned via callback or page redirect

Troubleshooting

Common Issues

Google Pay button not appearing
- Check if Google Pay SDK is loaded
- Verify merchant configuration
- Ensure browser supports Google Pay
Payment processing fails
- Verify token and environment settings
- Check network connectivity
- Review callback error messages
Configuration errors
- Ensure all required parameters are provided
- Verify parameter types match expected values
- Check debug logs for detailed error information