@spot-flow/checkout-inline-js 0.1.14 → 0.1.21

package/README.md

@@ -3,36 +3,52 @@
 
 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, [link](https://github.com/Spotflow-One/react-spotflow-checkout)
+For React components and usage, [React NPM Package](https://www.npmjs.com/package/@spot-flow/react-spotflow-checkout)
 
-For Vue.js components and usage, [link](https://github.com/Spotflow-One/vue-spotflow-checkout)
-
-For Angular components and usage, [link](https://github.com/Spotflow-One/angular-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">
 
+<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
- ```sh
+
+ ```javascript
  import { CheckoutForm } from "@spot-flow/checkout-inline-js";
 
- const checkout = new CheckoutForm(
-       merchantKey = "<sk_test_f998479c0eedhXXXXXXXXXXXXXXXX>"// This is your Merchant Key generated for your Merchant on Spotflow
-       email = "email",
-       amount = 1000,
-     );
- checkout.setup();
+      const { CheckoutForm } = SpotflowCheckout
+      const checkout = new CheckoutForm({}
+        // merchantKey = "sk_test_d968XXXXXXXXXX69", 
+        // encryption = "g4ryTjP3VAGwl8Bk9r0foFtgoY64Ba4gZQ701OAAbB4=",
+        // email = "oldsdkdk@youmain.com",
+        // amount = 10,
+        // plandId = "3c902af2-XXXXj-XXXX-XXX88d4"  
+
+      );
+      // N
+      checkout.setup({
+        email: "oludkhsdksn@gmail.com",
+        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:
-```sh 
+
+```sh
 <script src="https://dr4h9151gox1m.cloudfront.net/dist/checkout-inline.js"></script>  
 ```
 
@@ -41,50 +57,32 @@ Alternatively, you can include it directly in your HTML via a CDN:
     Make Payment
  </button>
  ```
- ```sh
+
+ ```javascript
  <script>
+
    const openCheckout = () => {
-     const { CheckoutForm } = SpotflowCheckout
-     const checkout = new CheckoutForm(
-       merchantKey = "<sk_test_f998479c0eedhXXXXXXXXXXXXXXXX>"// This is your Merchant Key generated for your Merchant on Spotflow
-       email = "temi@mailinator.com",
-       amount = 1000,
-     );
-     checkout.setup();
+      const { CheckoutForm } = SpotflowCheckout
+      const checkout = new CheckoutForm({}
+        // merchantKey = "sk_test_d968XXXXXXXXXX69", 
+        // encryption = "g4ryTjP373849849494949OAAbB4=",
+        // email = "oldsdkdk@youmain.com",
+        // amount = 10,
+        // plandId = "3c902af2-XXXXj-XXXX-XXX88d4"  
+
+      );
+      // N
+      checkout.setup({
+        email: "oludkhsdksn@gmail.com",
+        encryptionKey: "g4ryXXXXXXXXXXXX=",
+        merchantKey: "sk_test_d96889XXXXXXX684adXXXXX5b69",
+        planId: "3c902af2-3333-333-xxxxxxx,
+        amount: 5,
+        onSuccess: (value) => {
+          console.log("Fully Success", { value })
+        }
+      });
    };
+
  </script>
  ```
-
-
-## Contributing
-
-We welcome contributions! Follow the steps below to get started:
-
-### Getting Started
-
-1. **Clone the repository:**
-
-   ```sh
-   git clone https://github.com/Spotflow-One/spotflow-checkout.git
-   cd your-repo
-   ```
-
-2. **Install dependencies:**
-
-   ```sh
-   npm install
-   ```
-
-### Example Usage
-
-You can see an example of how to use the library in `index.html`. Open this file in your browser to see it in action.
-
-### Building the Project
-
-To build the project, run:
-
-```sh
-npm run build
-```
-
-This will compile the source files and generate the output in the `dist` directory.

package/dist/checkout-class.d.ts

@@ -1,14 +1,16 @@
 import { MainPageScreen } from './views/shared/main-page';
 import { SharedErrorScreen } from './views/shared/shared-error-page';
 import { PageLoader } from './views/shared/page-loader';
+import { SpotflowProps } from './types';
 
 declare class CheckoutForm {
     modalContainer: HTMLDivElement;
     currentPaymentMethod: number;
     currentStep: number;
     mainLayout: HTMLDivElement;
+    private onSuccess;
+    private onClose;
     encryption: string;
-    container: HTMLDivElement;
     mainScreen: MainPageScreen;
     mainError: SharedErrorScreen;
     mainLoader: PageLoader;
@@ -18,9 +20,9 @@ declare class CheckoutForm {
     email: string;
     amount: number;
     isMobile: boolean;
-    constructor(merchantKey: string, encryption: string, email: string, amount: number, planId: string);
+    constructor(config: Partial<SpotflowProps>);
     closeBTN(): void;
-    setup(): void;
+    setup(config: Partial<SpotflowProps>): void;
     private getPlanDetails;
     closeModal(): void;
 }