@spot-flow/checkout-inline-js/README.md

This project is an inline library that enables users to make payments seamlessly. It integrates smoothly into your application, providing a streamlined checkout experience.

# Spotflow Checkout Inline

This project is an inline library that enables users to make payments seamlessly. It integrates smoothly into your application, providing a streamlined checkout experience.

For React components and usage, [React NPM Package](https://www.npmjs.com/package/@spot-flow/react-spotflow-checkout)

For Vue.js components and usage, [Vue NPM Package](https://www.npmjs.com/package/@spot-flow/vue-spotflow-checkout)

For Angular components and usage, [Angular NPM Package](https://www.npmjs.com/package/@spot-flow/ng-spotflow-checkout)

## Demo

<img width="808" alt="Screenshot 2024-07-26 at 16 05 52" src="https://github.com/user-attachments/assets/4dbb0b2e-2142-4f04-994a-5c352de7d30e">

## Installation

 ```sh
npm install @spot-flow/checkout-inline-js
   ```

## Usage

 ```javascript
 import { CheckoutForm } from "@spot-flow/checkout-inline-js";

      const { CheckoutForm } = SpotflowCheckout;
      const checkout = new CheckoutForm({});
      checkout.setup({
        email: "oluXXXXXX@gmail.com",
        encryptionKey: "g4ryXXXXXXXXXXXX=",
        merchantKey: "sk_test_d96889XXXXXXX684adXXXXX5b69",
        amount: 5,
        metadata: {
          productName: "",
          title: ""
        },
        amount: 20,
        currency: "USD",
        localCurrency: "NGN"
       
      });
 ```

Alternatively, you can include it directly in your HTML via a CDN:

```sh
<script src="https://v2.inline-checkout.spotflow.one/dist/checkout-inline.js"></script>  
```

 ```sh
 <button onclick="openCheckout()">
    Make Payment
 </button>
 ```

 ```javascript
 <script>

   const openCheckout = () => {
      const { CheckoutForm } = SpotflowCheckout;
      const checkout = new CheckoutForm({});
      checkout.setup({
        email: "oluXXXXXX@gmail.com",
        encryptionKey: "g4ryXXXXXXXXXXXX=",
        merchantKey: "sk_test_d96889XXXXXXX684adXXXXX5b69",
        metadata: {
          productName: "",
          title: ""
        },
        amount: 20,
        currency: "USD",
        localCurrency: "NGN"
      });
   };

 </script>
 ```