boxpay-checkout-web-sdk 1.0.0-beta.2 → 1.0.0-beta.3

package/README.md

@@ -20,7 +20,7 @@ A lightweight, secure, and customizable checkout experience for payments — bui
 ### Via CDN
 
 ```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>
+<script src="https://cdn.jsdelivr.net/npm/boxpay-checkout-js-sdk@1.0.0-beta.2/dist/boxpay-checkout-js-sdk.min.js"></script>
 ```
 
 ### Local Script
@@ -47,7 +47,7 @@ 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>
+<div id="payment-element"></div>
 ```
 
 ### **JS Integration**
@@ -55,13 +55,10 @@ This method renders the checkout UI directly into a container on your webpage.
 ```html
 <script>
   const shopperDetails = {
-    dateOfBirth: null,
     email: "example@boxpay.com",
     firstName: "John",
     lastName: "Doe",
-    panNumber: "ABCDE1234F",
-    uniqueReference: "reference123",
-    phoneNumber: "+919890990909",
+    phoneNumber: "+919999999999",
     deliveryAddress: {
       address1: "123 Main St",
       address2: "Suite 1",
@@ -79,7 +76,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: ['card'], // emi, wallet
+      paymentMethods: ['card'],
       shopperDetails: shopperDetails,
       mode: "development", // "production"
       
@@ -99,11 +96,11 @@ This method renders the checkout UI directly into a container on your webpage.
 
       options: {
         payButton: {
-          show: false,
+          show: false, 
           onPaymentButtonValidity: handlePayButtonValidity,
         },
       },
-      onLoad: handlePaymentElementLoad,
+      onLoad: handlePaymentElementLoad // fires when payment element is loaded,
       onPayment: handleOnPayment
     });
   }
@@ -111,11 +108,13 @@ This method renders the checkout UI directly into a container on your webpage.
   mountBoxpayCheckout();
 
   function handlePaymentElementLoad(data) {
-    console.log("Payment element loaded:", data);
+    console.log(data);
+    // Add logic of your pay button and when pay button is clicked
+    const resp = await checkoutInstance.initiatePayment();
   }
 
   function handleOnPayment(response) {
-    console.log("Payment completed!", response);
+    console.log(response);
   }
 
   function handlePayButtonValidity(isValid) {
@@ -124,6 +123,63 @@ This method renders the checkout UI directly into a container on your webpage.
 </script>
 ```
 
+## 🧭 Shopper Details Format
+| Property | Type | Required | Description |
+| -------- | ---- | -------- | ----------- |
+| `email` | `String` | Yes | Shopper’s email address |
+| `firstName` | `String` | Yes | Shopper’s first name |
+| `lastName` | `String` | Yes | Shopper’s last name |
+| `phoneNumber` | `String` | Yes | Shopper’s mobile number including country code |
+| `deliveryAddress` | `Object` | Yes | Delivery or billing address details |
+| `deliveryAddress.address1` | `String` | Yes | Primary address line |
+| `deliveryAddress.address2` | `String` | No | Secondary address line (apartment, suite, etc.) |
+| `deliveryAddress.city` | `String` | Yes | City name |
+| `deliveryAddress.state` | `String` | Yes | State or region |
+| `deliveryAddress.countryCode` | `String` | Yes | ISO 2-letter country code<br>Example: `US`, `IN` |
+| `deliveryAddress.postalCode` | `String` | Yes | ZIP or postal code |
+
+---
+
+## 🎨 Appearance Customization
+
+| Property | Type | Required | Description |
+| -------- | ---- | -------- | ----------- |
+| `appearance` | `Object` | No | Controls the visual styling of the checkout UI |
+| `appearance.primaryColor` | `String` | No | Primary theme color used across the checkout UI |
+| `appearance.secondaryColor` | `String` | No | Secondary color used for accents and highlights |
+| `appearance.primaryTextColor` | `String` | No | Color for primary text elements |
+| `appearance.secondaryTextColor` | `String` | No | Color for secondary or helper text |
+| `appearance.payButton` | `Object` | No | Custom styling options for the Pay button |
+| `appearance.payButton.borderRadius` | `String` | No | Border radius of the Pay button<br>Example: `"8px"` |
+| `appearance.payButton.color` | `String` | No | Text color of the Pay button |
+| `appearance.payButton.width` | `String` | No | Width of the Pay button<br>Example: `"100%"` |
+| `appearance.payButton.fontSize` | `String` | No | Width of the Pay button<br>Example: `"1rem"` |
+| `appearance.payButton.padding` | `String` | No | Width of the Pay button<br>Example: `"0.5rem 1rem"` |
+
+
+---
+
+## ⚙ Options
+
+```js
+options: {
+  payButton: {
+    show: false,
+    onPaymentButtonValidity: (isValid) => {},
+  },
+}
+```
+
+---
+
+## 📡 Callback Events
+
+| Event                    | Required | Description                                             |
+| -------------------------| -------- | ------------------------------------------------------- |
+| `onLoad`                 | Yes      | Triggered when the checkout UI is mounted               |
+| `onPayment`              | Yes      | Triggered after payment success or failure              |
+| `onPaymentButtonValidity`| Yes, (only when show is false) | Called whenever the form becomes valid or invalid that helps your pay button to enable or disable click. |
+
 ---
 
 # 2️⃣ Full-Page Hosted Checkout (In-site)
@@ -160,71 +216,6 @@ This automatically loads the checkout and triggers callbacks on success/cancel.
 
 ---
 
-## 🧭 Shopper Details Format
-
-```json
-{
-  "email": "example@boxpay.com",
-  "firstName": "John",
-  "lastName": "Doe",
-  "panNumber": "ABCDE1234F",
-  "uniqueReference": "reference123",
-  "phoneNumber": "+919890990909",
-  "dateOfBirth": null,
-  "deliveryAddress": {
-    "address1": "123 Main St",
-    "address2": "Suite 1",
-    "city": "New York",
-    "state": "NY",
-    "countryCode": "US",
-    "postalCode": "10001"
-  }
-}
-```
-
----
-
-## 🎨 Appearance Customization
-
-```js
-appearance: {
-  primaryColor: "#ffd042",
-  secondaryColor: "#ff0000",
-  primaryTextColor: "#555",
-  secondaryTextColor: "#666",
-  payButton: {
-    borderRadius: "8px",
-    color: "#fff",
-    width: "100%"
-  }
-}
-```
-
----
-
-## ⚙ Options
-
-```js
-options: {
-  payButton: {
-    show: false,
-    onPaymentButtonValidity: (isValid) => {},
-  },
-}
-```
-
----
-
-## 📡 Callback Events
-
-| Event                     | Description                                             |
-| ------------------------- | ------------------------------------------------------- |
-| `onLoad`                  | Triggered when the checkout UI is mounted               |
-| `onPayment`               | Triggered after payment success or failure              |
-| `onPaymentButtonValidity` | Called whenever the input form becomes valid or invalid |
-
----
-
 ## 🧪 Modes
 
 ```js