npm package: @pekopay/pay-js
Description: PekoCheckoutForm is a customizable pure JavaScript library for securely collecting payment information and processing transactions. It streamlines integration with the Pekopay platform, providing built-in validation, error handling, and submission of the 
Latest version: 0.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @pekopay/pay-js
PekoCheckoutForm is a customizable pure JavaScript library for securely collecting payment information and processing transactions. It streamlines integration with the Pekopay platform, providing built-in validation, error handling, and submission of the payment method to the PekoPay platform for processing.

## How to install
```npm install --save @pekopay/pay-js```

## How to use
1. Create an HTML element where the credit card will be rendered
```html
<div id="credit-card-form-container"></div>
```
2. Include the library using HTML script tag
```html
<script src="/path/to/pay-js/index.js"></script>
```
You may need to copy the installed pay-js library from node_modules folder to your web application static folder

3. After the pay-js library bundle has been loaded, add another script tag to initialize and render the credit card form.
```html
  <script type="text/javascript">
    /**
     * You will need to generate a payment token using the PekoPay API
     */
    const paymentToken = '<%= paymentToken %>'; // e.g using payment token from backend using ejs templating
    document.addEventListener('DOMContentLoaded', function () {
      const checkoutFormContainer = document.getElementById('credit-card-form-container');
      const form = PekoCheckoutForm.initialize({
        sessionToken: paymentToken,
        environment: 'sandbox', // Change to 'production' in production
        container: checkoutFormContainer,
        height: 160,
        width: 300,
        onFormFieldStateChange: (data) => {
            // Handle and react to any form fields changes
          console.log('Form field state changed:', data);
        },
        onLoadError: (error) => {
          console.error('Form load error:', error);
        },
        completeTransaction: async (data) => {
          console.log('Transaction completed:', data);
          const paymentToken = data.sessionToken;
          // Build credit card details object
          const selectedCard = {
            cardLastFourDigits: data.cardData.last4Digits,
            cardType: data.cardData.cardType,
          };
        },
      });

      document.getElementById('pay-button').addEventListener('click', () => {
        form.submitFormFields();
      });
    });
  </script>
```
## Credit card form configuration options

| Option                   | Type       | Description                                                                                   | Required | Default     |
|--------------------------|------------|-----------------------------------------------------------------------------------------------|----------|-------------|
| `sessionToken`           | `string`   | Token generated from PekoPay API for the payment session.                                     | Yes      | -           |
| `environment`            | `string`   | Environment to use: `'sandbox'` or `'production'`.                                            | Yes      | `'sandbox'` |
| `container`              | `Element`  | DOM element where the form will be rendered.                                                  | Yes      | -           |
| `height`                 | `number`   | Height of the form in pixels.                                                                 | No       | `160`       |
| `width`                  | `number`   | Width of the form in pixels.                                                                  | No       | `300`       |
| `onFormFieldStateChange` | `function` | Callback for form field changes. Receives field state data.                                   | No       | -           |
| `onLoadError`            | `function` | Callback for handling form load errors. Receives error object.                                | No       | -           |
| `completeTransaction`    | `function` | Callback when the payment method (credit card) has been successfully associated with the sessionToken/paymentTOken                            | Yes      | -           |

## Completing a payment
To complete a payment, trigger the `submitFormFields` method (for example, when the user clicks the pay button). Once the form is successfully submitted, the `completeTransaction` callback will be invoked with the session token and card details. You can then use this session token to make a payment request via the Pekopay invoicing transactions or subscription API, securely associating the collected card information with the transaction or subscription.