boxpay-checkout-web-sdk 1.0.0-beta.0 → 1.0.0-beta.1

package/README.md

@@ -2,7 +2,7 @@
 
 A lightweight, secure, and customizable checkout experience for payments — built to embed directly inside merchant websites or open in a standalone checkout window.
 
------------------------------------------------
+---
 
 ## 🚀 Features
 
@@ -13,20 +13,23 @@ A lightweight, secure, and customizable checkout experience for payments — bui
 * Event handlers for full control
 * Lightweight and dependency-free
 
------------------------------------------------
+---
 
 ## 📦 Installation
 
 ### Via CDN
 
-<script src="https://cdn.jsdelivr.net/npm/boxpay-checkout-js-sdk@1.0.3/dist/boxpay-checkout-js-sdk.min.js"></script>
-
+```html
+<script src="https://cdn.jsdelivr.net/npm/boxpay-checkout-js-sdk@1.0.0-beta.1/dist/boxpay-checkout-js-sdk.min.js"></script>
+```
 
 ### Local Script
 
+```html
 <script src="path-to/boxpay-checkout-js-sdk.js"></script>
+```
 
------------------------------------------------
+---
 
 ## ⚙ Usage Overview
 
@@ -35,7 +38,7 @@ You can use the SDK in **two ways**:
 1. **Embedded checkout UI inside your page (`elements`)**
 2. **Popup/Iframe full-screen checkout (`open`)**
 
------------------------------------------------
+---
 
 # 1️⃣ Embedded Checkout (Elements Integration)
 
@@ -43,10 +46,13 @@ This method renders the checkout UI directly into a container on your webpage.
 
 ### **HTML**
 
+```html
 <div id="payment-element" style="height:500px;overflow-y:auto"></div>
+```
 
 ### **JS Integration**
 
+```html
 <script>
   const shopperDetails = {
     dateOfBirth: null,
@@ -73,7 +79,7 @@ This method renders the checkout UI directly into a container on your webpage.
   async function mountBoxpayCheckout() {
     checkoutInstance = await boxPay.elements({
       container: "payment-element",
-      paymentMethods: ['emi', 'card', 'wallet'],
+      paymentMethods: ['card'], // emi, wallet
       shopperDetails: shopperDetails,
       mode: "development", // "production"
       
@@ -96,13 +102,7 @@ This method renders the checkout UI directly into a container on your webpage.
           show: false,
           onPaymentButtonValidity: handlePayButtonValidity,
         },
-        layout: {
-          type: "tabs", // tabs | accordion | accordionWithRadio
-          defaultCollapsed: false
-        },
-        cssFormClass: "form-class"
       },
-
       onLoad: handlePaymentElementLoad,
       onPayment: handleOnPayment
     });
@@ -122,8 +122,9 @@ This method renders the checkout UI directly into a container on your webpage.
     // Enable external pay button if needed
   }
 </script>
+```
 
------------------------------------------------
+---
 
 # 2️⃣ Full-Page Hosted Checkout (Iframe)
 
@@ -131,10 +132,13 @@ This approach opens the hosted checkout in an iframe — no UI managed by the me
 
 ### **HTML**
 
+```html
 <div id="boxpay-checkout"></div>
+```
 
 ### **JS Integration**
 
+```html
 <script>
   function handlePaymentResponse(data) {
     console.log("Payment completed!", data);
@@ -150,13 +154,15 @@ This approach opens the hosted checkout in an iframe — no UI managed by the me
     handlePaymentCancellation
   );
 </script>
+```
 
 This automatically loads the checkout and triggers callbacks on success/cancel.
 
------------------------------------------------
+---
 
 ## 🧭 Shopper Details Format
 
+```json
 {
   "email": "example@boxpay.com",
   "firstName": "John",
@@ -174,11 +180,13 @@ This automatically loads the checkout and triggers callbacks on success/cancel.
     "postalCode": "10001"
   }
 }
+```
 
------------------------------------------------
+---
 
 ## 🎨 Appearance Customization
 
+```js
 appearance: {
   primaryColor: "#ffd042",
   secondaryColor: "#ff0000",
@@ -190,24 +198,22 @@ appearance: {
     width: "100%"
   }
 }
+```
 
------------------------------------------------
+---
 
 ## ⚙ Options
 
+```js
 options: {
   payButton: {
     show: false,
     onPaymentButtonValidity: (isValid) => {},
   },
-  layout: {
-    type: "tabs", // tabs | accordion | accordionWithRadio
-    defaultCollapsed: false
-  },
-  cssFormClass: "form-class"
 }
+```
 
------------------------------------------------
+---
 
 ## 📡 Callback Events
 
@@ -217,19 +223,21 @@ options: {
 | `onPayment`               | Triggered after payment success or failure              |
 | `onPaymentButtonValidity` | Called whenever the input form becomes valid or invalid |
 
------------------------------------------------
+---
 
 ## 🧪 Modes
 
+```js
 mode: "development"  // or "production"
+```
 
------------------------------------------------
+---
 
 ## 📝 License
 
 Proprietary – authorized use only.
 
------------------------------------------------
+---
 
 ## 📬 Support