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

For Vue.js components and usage, Vue NPM Package

For Angular components and usage, Angular NPM Package

Demo

Installation

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

Usage

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

     const { CheckoutForm } = SpotflowCheckout
     const checkout = new CheckoutForm({}
       // merchantKey = "sk_test_d968XXXXXXXXXX69", 
       // encryption = "g4ryTjP3VAGwl8Bk9r0foFtgoY64Ba4gZQ701OAAbB4=",
       // email = "[email protected]",
       // amount = 10,
       // plandId = "3c902af2-XXXXj-XXXX-XXX88d4"  

     );
     // N
     checkout.setup({
       email: "[email protected]",
       encryptionKey: "g4ryXXXXXXXXXXXX=",
       merchantKey: "sk_test_d96889XXXXXXX684adXXXXX5b69",
       planId: "3c902af2-3333-333-xxxxxxx,
       amount: 5,
       onSuccess: (value) => {
         console.log("Fully Success", { value })
       }
     });

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

<script src="https://dr4h9151gox1m.cloudfront.net/dist/checkout-inline.js"></script>  

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

<script>

  const openCheckout = () => {
     const { CheckoutForm } = SpotflowCheckout
     const checkout = new CheckoutForm({}
       // merchantKey = "sk_test_d968XXXXXXXXXX69", 
       // encryption = "g4ryTjP373849849494949OAAbB4=",
       // email = "[email protected]",
       // amount = 10,
       // plandId = "3c902af2-XXXXj-XXXX-XXX88d4"  

     );
     // N
     checkout.setup({
       email: "[email protected]",
       encryptionKey: "g4ryXXXXXXXXXXXX=",
       merchantKey: "sk_test_d96889XXXXXXX684adXXXXX5b69",
       planId: "3c902af2-3333-333-xxxxxxx,
       amount: 5,
       onSuccess: (value) => {
         console.log("Fully Success", { value })
       }
     });
  };

</script>