HPP SDK

Official JavaScript SDK for HPP Payment Integration.

Installation

Install via npm:

npm install hpp-sdk

Usage

1. Import the SDK

Using ES Modules (React, Vue, etc.):

import { HPP } from 'hpp-sdk';

Using CommonJS (Node.js):

const HPP = require('hpp-sdk');

Using Script Tag (Browser):

<script src="path/to/node_modules/hpp-sdk/hpp-sdk.js"></script>
<!-- OR -->
<script src="hpp-sdk.js"></script>

2. Initialize and Open Payment

const hpp = new HPP({
  IDAccount: 'your-account-id',
  PaymentIdentifier: 'payment-session-id',
  mode: 'production', // or 'sandbox'
  viewType: 'popup', // 'popup', 'redirect', or 'embed'
  
  // Callback for success
  onSuccess: (data) => {
    console.log('Payment Successful:', data);
  },
  
  // Callback for error
  onError: (error) => {
    console.error('Payment Failed:', error);
  },
  
  // Callback for dialog close (popup mode only)
  onClose: () => {
    console.log('Payment dialog closed');
  }
});

// Open the payment interface
hpp.open();

3. Handle Callback (For Redirect Mode)

If you use viewType: 'redirect', you need to host a callback page (e.g., hpp-callback.html) to handle the user returning from the payment gateway.

1. Create a file named hpp-callback.html on your server.
2. Copy the content from the example hpp-callback.html provided in this package (or implement your own logic).
3. The callback page should parse the URL parameters and communicate back to your main application or display the result.

Configuration Options

| Option | Type | Required | Description | |--------|------|----------|-------------| | IDAccount | String | Yes | Your Merchant Account ID. | | PaymentIdentifier | String | Yes | Unique identifier for the payment session. | | mode | String | Yes | Environment: 'production' or 'sandbox'. | | viewType | String | No | 'popup' (default), 'redirect', or 'embed'. | | openInDialog | Boolean | No | Legacy option for popup mode (default: true). | | dialogWidth | Number | No | Width of the popup window (default: 1000). | | dialogHeight | Number | No | Height of the popup window (default: 700). | | onSuccess | Function | No | Callback when payment is successful. | | onError | Function | No | Callback when payment fails. | | onClose | Function | No | Callback when the popup is closed by the user. |

License

ISC