npm package: @hesabe-pay/direct-google-pay
Description: A Web JS library for integrating direct google pay payment in Hesabe payment gateway
Author: salmanhesabe
Latest version: 1.0.1

# HesabeGooglePay Usage Guide

## Installation

### NPM

```bash
npm i @hesabe-pay/direct-google-pay
```

### CDN

```html
<script src="https://unpkg.com/@hesabe-pay/direct-google-pay@latest/cdn/hesabe-google-pay.min.js"></script>
```

## Usage

### CDN

```html
<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

```javascript
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

```javascript
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

```javascript
// 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

```html
<!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.

```javascript
await googlePay.init();
```

### `createButton(containerId)`

Creates a Google Pay button and appends it to the specified container.

```javascript
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).

```javascript
googlePay.processPayment();
```

## Error Handling

The library provides comprehensive error handling:

```javascript
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

1. User clicks Google Pay button
2. Google Pay sheet opens with available payment methods
3. User selects payment method and authorizes transaction
4. Payment is processed through Hesabe gateway
5. Transaction result is returned via callback or page redirect

## Troubleshooting

### Common Issues

1. **Google Pay button not appearing**
    - Check if Google Pay SDK is loaded
    - Verify merchant configuration
    - Ensure browser supports Google Pay

2. **Payment processing fails**
    - Verify token and environment settings
    - Check network connectivity
    - Review callback error messages

3. **Configuration errors**
    - Ensure all required parameters are provided
    - Verify parameter types match expected values
    - Check debug logs for detailed error information