update xcheckout

.eslintrc.json

@@ -0,0 +1,19 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "standard-with-typescript",
+    "plugin:react/recommended",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "react"],
+  "rules": {}
+}

.github/workflows/main.yaml

@@ -0,0 +1,20 @@
+name: CI
+on:
+  push:
+    branches:
+      - "**"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 7
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+
+      - run: pnpm install
+      - run: pnpm run format && pnpm run build

.github/workflows/publish.yaml

@@ -0,0 +1,31 @@
+name: Publish
+on:
+  workflow_run:
+    workflows: [CI]
+    branches: [main]
+    types: [completed]
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  publish:
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 7
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          registry-url: 'https://registry.npmjs.org'
+
+      - run: pnpm install 
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -62,3 +62,4 @@ typings/
 .code
 
 
+bun.lockb

Makefile

@@ -0,0 +1,9 @@
+deploy:
+	@npm run build
+	@npm publish --access public
+
+format:
+	npm run format
+
+lint:
+	npm run lint

README.md

@@ -28,28 +28,29 @@ yarn add react-korba-payment
 
 ```javascript
 import React from 'react';
-import {useXCheckout} from 'react-korba-payment';
+import { useXCheckout } from 'react-korba-payment';
 
 function App() {
-  const {handleXCheckoutClick} = useXCheckout({
-    config: {
-      merchantID: '<your_merchant_id>',
-      orderID: '<unique_order_id>',
-      description: 'Ordered goods',
-      amount: 1.2,
-      redirectURL: 'http://www.yourawesomeapp.com',
-    },
-    scriptSrc: 'https://paywithkorba.s3-eu-west-1.amazonaws.com/test-checkout.js',
+  const {pay} = useXCheckout({
+    scriptSrc: 'https://paywithkorba.s3-eu-west-1.amazonaws.com/test-checkout.js', // replace with your XCheckout script URL
   });
 
   return (
-    <div className="flex items-center justify-center h-screen">
-      <button onClick={handleXCheckoutClick} className="bg-blue-500 text-white px-4 py-2">
+      <button
+        onClick={() => {
+          pay({
+            merchantID: '<your_merchant_id>',
+            orderID: '<unique_order_id>',
+            description: 'Ordered goods',
+            amount: 1.2, // in GH₵
+            redirectURL: 'http://www.yourawesomeapp.com',
+          });
+        }}
+        className="button"
+      >
         Pay Now!
       </button>
-    </div>
   );
-}
 
 export default App;
 ```
@@ -62,28 +63,30 @@ Next.js 13 introduces a new app/ directory folder structure. By default it uses
 ```javascript
 'use client';
 import React from 'react';
-import {useXCheckout} from 'react-korba-payment';
-
-function CheckoutButton() {
-  const {handleXCheckoutClick} = useXCheckout({
-    config: {
-      merchantID: '<your_merchant_id>',
-      orderID: '<unique_order_id>',
-      description: 'Ordered goods',
-      amount: 1.2,
-      redirectURL: 'http://www.yourawesomeapp.com',
-    },
-    scriptSrc: 'https://paywithkorba.s3-eu-west-1.amazonaws.com/test-checkout.js',
+import { useXCheckout } from 'react-korba-payment';
+
+export default function CheckoutButton() {
+  const {pay} = useXCheckout({
+    scriptSrc: 'https://paywithkorba.s3-eu-west-1.amazonaws.com/test-checkout.js', // replace with your XCheckout script URL
   });
 
   return (
-    <button onClick={handleXCheckoutClick} className="bg-blue-500 text-white px-4 py-2">
+    <button
+      onClick={() => {
+        pay({
+          merchantID: '<your_merchant_id>',
+          orderID: '<unique_order_id>',
+          description: 'Ordered goods',
+          amount: 1.2, // in GH₵
+          redirectURL: 'http://www.yourawesomeapp.com',
+        });
+      }}
+      className={styles.button}
+    >
       Pay Now!
     </button>
   );
 }
-
-export default CheckoutButton;
 ```
 
 Please checkout [Korba Documentation](https://xchange.korba365.com/docs/) for more.
@@ -103,6 +106,7 @@ If you would like to contribute to React Korba Payment(js),
 5. Submit a pull request 😉😉
 
 Don't forget to [follow me on instagram](https://instagram.com/1rutmann)!
+Don't forget to [follow me on twitter](https://x.com/tswwws)!
 
 ## License
 

babel.config.js

@@ -4,10 +4,10 @@ module.exports = {
       '@babel/preset-env',
       {
         targets: {
-          node: 'current'
-        }
-      }
+          node: 'current',
+        },
+      },
     ],
-    '@babel/preset-typescript'
-  ]
+    '@babel/preset-typescript',
+  ],
 };