@one-payments/web-components 1.5.3 → 1.5.5

package/dist/one-payment.d.ts

@@ -249,6 +249,26 @@ export declare class OnePayment extends LitElement {
      * @public
      */
     email: string;
+    /**
+     * Customer's phone number (REQUIRED)
+     *
+     * The payer's phone number. This field is required for all payment methods
+     * and is used for:
+     * - Payment verification
+     * - Transaction notifications via SMS
+     * - Customer communication
+     * - Fraud prevention
+     *
+     * **Validation:**
+     * - Cannot be empty or whitespace-only
+     * - Must be provided before payment submission
+     * - Should include country code (e.g., '+65' for Singapore, '+60' for Malaysia)
+     *
+     * @required
+     * @type {string}
+     * @public
+     */
+    phoneNumber: string;
     /**
      * Optional array of payment method IDs to exclude from display
      *
@@ -462,6 +482,13 @@ export declare class OnePayment extends LitElement {
     private handleGoPayPayment;
     private handleBoostPayment;
     private handleShopeePayPayment;
+    private handleAtomPayment;
+    private handleDanaPayment;
+    private handleTngPayment;
+    /**
+     * Get the formatted pay amount for buttons (net amount including fees)
+     */
+    private getPayButtonAmount;
     private getTransactionData;
     private renderTransactionDetailsSkeleton;
     private renderPaymentMethodsSkeleton;
@@ -474,6 +501,9 @@ export declare class OnePayment extends LitElement {
     private renderGoPayContent;
     private renderBoostContent;
     private renderShopeePayContent;
+    private renderAtomContent;
+    private renderDanaContent;
+    private renderTngContent;
     private render3DSModal;
     private renderStatusBlock;
     render(): import("lit").TemplateResult<1>;

package/dist/one-payment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"one-payment.d.ts","sourceRoot":"","sources":["../src/one-payment.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"one-payment.d.ts","sourceRoot":"","sources":["../src/one-payment.ts"],"names":[],"mappings":"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"}

package/dist/one-payment.js

@@ -5,7 +5,7 @@
 import { __decorate } from "tslib";
 import { LitElement, html, css } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { PaymentSDK, PAYMENT_METHODS, PAYNOW_ICON_DATA_URL, PROMPTPAY_ICON_DATA_URL, DUITNOW_ICON_DATA_URL, GOPAY_ICON_DATA_URL, BOOST_ICON_DATA_URL, SHOPEEPAY_ICON_DATA_URL } from '@one-payments/core';
+import { PaymentSDK, PAYMENT_METHODS, PAYNOW_ICON_DATA_URL, PROMPTPAY_ICON_DATA_URL, DUITNOW_ICON_DATA_URL, GOPAY_ICON_DATA_URL, BOOST_ICON_DATA_URL, SHOPEEPAY_ICON_DATA_URL, ATOM_ICON_DATA_URL, DANA_ICON_DATA_URL, TNG_ICON_DATA_URL } from '@one-payments/core';
 import CleaveConstructor from 'cleave.js';
 import QRCode from 'qrcode';
 /**
@@ -145,6 +145,9 @@ let OnePayment = class OnePayment extends LitElement {
         if (!this.email || typeof this.email !== 'string' || this.email.trim() === '') {
             return false;
         }
+        if (!this.phoneNumber || typeof this.phoneNumber !== 'string' || this.phoneNumber.trim() === '') {
+            return false;
+        }
         return true;
     }
     /**
@@ -422,6 +425,42 @@ let OnePayment = class OnePayment extends LitElement {
                     };
                 }
             }
+            // Check currency validation for Atom (SGD or MYR only)
+            if (method.id === PAYMENT_METHODS.ATOM) {
+                const transactionData = this.getTransactionData();
+                const currency = transactionData.currency;
+                if (currency !== 'SGD' && currency !== 'MYR') {
+                    return {
+                        id: method.id,
+                        enabled: false,
+                        disabledReason: 'Atom is only available for SGD and MYR currencies',
+                    };
+                }
+            }
+            // Check currency validation for Dana (IDR only)
+            if (method.id === PAYMENT_METHODS.DANA) {
+                const transactionData = this.getTransactionData();
+                const currency = transactionData.currency;
+                if (currency !== 'IDR') {
+                    return {
+                        id: method.id,
+                        enabled: false,
+                        disabledReason: 'Dana is only available for IDR currency',
+                    };
+                }
+            }
+            // Check currency validation for Touch 'n Go (MYR only)
+            if (method.id === PAYMENT_METHODS.TNG) {
+                const transactionData = this.getTransactionData();
+                const currency = transactionData.currency;
+                if (currency !== 'MYR') {
+                    return {
+                        id: method.id,
+                        enabled: false,
+                        disabledReason: "Touch 'n Go is only available for MYR currency",
+                    };
+                }
+            }
             return {
                 id: method.id,
                 enabled: true,
@@ -604,6 +643,34 @@ let OnePayment = class OnePayment extends LitElement {
                 window.location.href = redirectUrl;
             }
         });
+        // Handle Atom redirect
+        this.sdk.on('atom_redirect', (event) => {
+            const { redirectUrl } = event.payload;
+            if (redirectUrl) {
+                // Redirect the entire page to the external payment page
+                window.location.href = redirectUrl;
+            }
+        });
+        // Handle Dana redirect
+        this.sdk.on('dana_redirect', (event) => {
+            console.log('[WebComponent] dana_redirect event received:', event.payload);
+            const { redirectUrl } = event.payload;
+            if (redirectUrl) {
+                console.log('[WebComponent] Redirecting to Dana URL:', redirectUrl);
+                // Redirect the entire page to the external payment page
+                window.location.href = redirectUrl;
+            }
+        });
+        // Handle Touch 'n Go redirect
+        this.sdk.on('tng_redirect', (event) => {
+            console.log('[WebComponent] tng_redirect event received:', event.payload);
+            const { redirectUrl } = event.payload;
+            if (redirectUrl) {
+                console.log('[WebComponent] Redirecting to TnG URL:', redirectUrl);
+                // Redirect the entire page to the external payment page
+                window.location.href = redirectUrl;
+            }
+        });
         this.sdk.initialize({
             amount: this.amount,
             currency: this.currency,
@@ -806,6 +873,7 @@ let OnePayment = class OnePayment extends LitElement {
             firstName: this.firstName,
             lastName: this.lastName,
             email: this.email,
+            phoneNumber: this.phoneNumber,
         });
     }
     handlePayNowPayment() {
@@ -819,6 +887,7 @@ let OnePayment = class OnePayment extends LitElement {
             firstName: this.firstName,
             lastName: this.lastName,
             email: this.email,
+            phoneNumber: this.phoneNumber,
         });
         // showQRCode will be set by the event listener when qrCode is received
     }
@@ -834,6 +903,7 @@ let OnePayment = class OnePayment extends LitElement {
             firstName: this.firstName,
             lastName: this.lastName,
             email: this.email,
+            phoneNumber: this.phoneNumber,
         });
     }
     handleDuitNowPayment() {
@@ -848,6 +918,7 @@ let OnePayment = class OnePayment extends LitElement {
             firstName: this.firstName,
             lastName: this.lastName,
             email: this.email,
+            phoneNumber: this.phoneNumber,
         });
     }
     handleGoPayPayment() {
@@ -862,6 +933,7 @@ let OnePayment = class OnePayment extends LitElement {
             firstName: this.firstName,
             lastName: this.lastName,
             email: this.email,
+            phoneNumber: this.phoneNumber,
         });
     }
     handleBoostPayment() {
@@ -876,6 +948,7 @@ let OnePayment = class OnePayment extends LitElement {
             firstName: this.firstName,
             lastName: this.lastName,
             email: this.email,
+            phoneNumber: this.phoneNumber,
         });
     }
     handleShopeePayPayment() {
@@ -890,9 +963,62 @@ let OnePayment = class OnePayment extends LitElement {
             firstName: this.firstName,
             lastName: this.lastName,
             email: this.email,
+            phoneNumber: this.phoneNumber,
+        });
+    }
+    handleAtomPayment() {
+        if (!this.sdk || this.currentState.status !== 'ready') {
+            return;
+        }
+        // Lock payment methods to prevent switching
+        this.paymentLocked = true;
+        // Use customer info from props
+        // SDK will redirect to external payment page when nextActionUrl is received
+        this.sdk.submitPayment(PAYMENT_METHODS.ATOM, {
+            firstName: this.firstName,
+            lastName: this.lastName,
+            email: this.email,
+            phoneNumber: this.phoneNumber,
+        });
+    }
+    handleDanaPayment() {
+        if (!this.sdk || this.currentState.status !== 'ready') {
+            return;
+        }
+        // Lock payment methods to prevent switching
+        this.paymentLocked = true;
+        // Use customer info from props
+        // SDK will redirect to external payment page when nextActionUrl is received
+        this.sdk.submitPayment(PAYMENT_METHODS.DANA, {
+            firstName: this.firstName,
+            lastName: this.lastName,
+            email: this.email,
+            phoneNumber: this.phoneNumber,
+        });
+    }
+    handleTngPayment() {
+        if (!this.sdk || this.currentState.status !== 'ready') {
+            return;
+        }
+        // Lock payment methods to prevent switching
+        this.paymentLocked = true;
+        // Use customer info from props
+        // SDK will redirect to external payment page when nextActionUrl is received
+        this.sdk.submitPayment(PAYMENT_METHODS.TNG, {
+            firstName: this.firstName,
+            lastName: this.lastName,
+            email: this.email,
+            phoneNumber: this.phoneNumber,
         });
     }
     // --- Render Methods ---
+    /**
+     * Get the formatted pay amount for buttons (net amount including fees)
+     */
+    getPayButtonAmount() {
+        const transactionData = this.getTransactionData();
+        return `${this.currency} ${transactionData.netAmount.toFixed(2)}`;
+    }
     getTransactionData() {
         const data = this.paymentData;
         // Return fallback data if payment data is not loaded yet
@@ -1054,12 +1180,7 @@ let OnePayment = class OnePayment extends LitElement {
                       </span>
                     </div>
                     <div class="breakdown-row">
-                      <span class="breakdown-label">
-                        Merchant
-                        fee${transactionData.feeBreakdown.merchantFeeLabel
-                ? ` ${transactionData.feeBreakdown.merchantFeeLabel}`
-                : ''}:
-                      </span>
+                      <span class="breakdown-label">Merchant fee:</span>
                       <span class="breakdown-value">
                         ${formatAmount(transactionData.feeBreakdown.merchantFee)}
                       </span>
@@ -1183,7 +1304,7 @@ let OnePayment = class OnePayment extends LitElement {
             ${this.currentState.status === 'processing' ||
             this.currentState.status === 'requires_action'
             ? 'Processing...'
-            : `Pay ${this.currency} ${this.amount.toFixed(2)}`}
+            : `Pay ${this.getPayButtonAmount()}`}
           </button>
         </div>
       </div>
@@ -1242,7 +1363,7 @@ let OnePayment = class OnePayment extends LitElement {
               ${this.currentState.status === 'processing' ||
             this.currentState.status === 'requires_action'
             ? 'Processing...'
-            : `Pay ${this.currency} ${this.amount.toFixed(2)}`}
+            : `Pay ${this.getPayButtonAmount()}`}
             </button>
           </div>
         </div>
@@ -1285,7 +1406,7 @@ let OnePayment = class OnePayment extends LitElement {
               ${this.currentState.status === 'processing' ||
             this.currentState.status === 'requires_action'
             ? 'Redirecting...'
-            : `Pay ${this.currency} ${this.amount.toFixed(2)}`}
+            : `Pay ${this.getPayButtonAmount()}`}
             </button>
           </div>
         </div>
@@ -1328,7 +1449,7 @@ let OnePayment = class OnePayment extends LitElement {
               ${this.currentState.status === 'processing' ||
             this.currentState.status === 'requires_action'
             ? 'Redirecting...'
-            : `Pay ${this.currency} ${this.amount.toFixed(2)}`}
+            : `Pay ${this.getPayButtonAmount()}`}
             </button>
           </div>
         </div>
@@ -1371,7 +1492,7 @@ let OnePayment = class OnePayment extends LitElement {
               ${this.currentState.status === 'processing' ||
             this.currentState.status === 'requires_action'
             ? 'Redirecting...'
-            : `Pay ${this.currency} ${this.amount.toFixed(2)}`}
+            : `Pay ${this.getPayButtonAmount()}`}
             </button>
           </div>
         </div>
@@ -1414,7 +1535,7 @@ let OnePayment = class OnePayment extends LitElement {
               ${this.currentState.status === 'processing' ||
             this.currentState.status === 'requires_action'
             ? 'Redirecting...'
-            : `Pay ${this.currency} ${this.amount.toFixed(2)}`}
+            : `Pay ${this.getPayButtonAmount()}`}
             </button>
           </div>
         </div>
@@ -1457,7 +1578,136 @@ let OnePayment = class OnePayment extends LitElement {
               ${this.currentState.status === 'processing' ||
             this.currentState.status === 'requires_action'
             ? 'Redirecting...'
-            : `Pay ${this.currency} ${this.amount.toFixed(2)}`}
+            : `Pay ${this.getPayButtonAmount()}`}
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    renderAtomContent() {
+        return html `
+      <div class="paynow-container">
+        <div class="paynow-instructions">
+          <h3 class="instructions-title">How to Pay with Atome:</h3>
+
+          <div class="instruction-steps">
+            <div class="instruction-step">
+              <div class="step-number">1</div>
+              <p class="step-text">Click <strong>"Pay"</strong> to go to the payment page.</p>
+            </div>
+
+            <div class="instruction-step">
+              <div class="step-number">2</div>
+              <p class="step-text">Complete the payment on the external page.</p>
+            </div>
+
+            <div class="instruction-step">
+              <div class="step-number">3</div>
+              <p class="step-text">You'll be redirected back automatically.</p>
+            </div>
+          </div>
+
+          <div class="submit-section">
+            <button
+              class="pay-button ${this.currentState.status === 'processing' ||
+            this.currentState.status === 'requires_action'
+            ? 'loading'
+            : ''}"
+              @click=${this.handleAtomPayment}
+              ?disabled=${this.currentState.status === 'processing' ||
+            this.currentState.status === 'requires_action'}
+            >
+              ${this.currentState.status === 'processing' ||
+            this.currentState.status === 'requires_action'
+            ? 'Redirecting...'
+            : `Pay ${this.getPayButtonAmount()}`}
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    renderDanaContent() {
+        return html `
+      <div class="paynow-container">
+        <div class="paynow-instructions">
+          <h3 class="instructions-title">How to Pay with Dana:</h3>
+
+          <div class="instruction-steps">
+            <div class="instruction-step">
+              <div class="step-number">1</div>
+              <p class="step-text">Click <strong>"Pay"</strong> to go to the payment page.</p>
+            </div>
+
+            <div class="instruction-step">
+              <div class="step-number">2</div>
+              <p class="step-text">Complete the payment in the Dana app.</p>
+            </div>
+
+            <div class="instruction-step">
+              <div class="step-number">3</div>
+              <p class="step-text">You'll be redirected back automatically.</p>
+            </div>
+          </div>
+
+          <div class="submit-section">
+            <button
+              class="pay-button ${this.currentState.status === 'processing' ||
+            this.currentState.status === 'requires_action'
+            ? 'loading'
+            : ''}"
+              @click=${this.handleDanaPayment}
+              ?disabled=${this.currentState.status === 'processing' ||
+            this.currentState.status === 'requires_action'}
+            >
+              ${this.currentState.status === 'processing' ||
+            this.currentState.status === 'requires_action'
+            ? 'Redirecting...'
+            : `Pay ${this.getPayButtonAmount()}`}
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    renderTngContent() {
+        return html `
+      <div class="paynow-container">
+        <div class="paynow-instructions">
+          <h3 class="instructions-title">How to Pay with Touch 'n Go:</h3>
+
+          <div class="instruction-steps">
+            <div class="instruction-step">
+              <div class="step-number">1</div>
+              <p class="step-text">Click <strong>"Pay"</strong> to go to the payment page.</p>
+            </div>
+
+            <div class="instruction-step">
+              <div class="step-number">2</div>
+              <p class="step-text">Complete the payment in the Touch 'n Go eWallet app.</p>
+            </div>
+
+            <div class="instruction-step">
+              <div class="step-number">3</div>
+              <p class="step-text">You'll be redirected back automatically.</p>
+            </div>
+          </div>
+
+          <div class="submit-section">
+            <button
+              class="pay-button ${this.currentState.status === 'processing' ||
+            this.currentState.status === 'requires_action'
+            ? 'loading'
+            : ''}"
+              @click=${this.handleTngPayment}
+              ?disabled=${this.currentState.status === 'processing' ||
+            this.currentState.status === 'requires_action'}
+            >
+              ${this.currentState.status === 'processing' ||
+            this.currentState.status === 'requires_action'
+            ? 'Redirecting...'
+            : `Pay ${this.getPayButtonAmount()}`}
             </button>
           </div>
         </div>
@@ -1555,6 +1805,12 @@ let OnePayment = class OnePayment extends LitElement {
                     return 'Boost';
                 case PAYMENT_METHODS.SHOPEEPAY:
                     return 'ShopeePay';
+                case PAYMENT_METHODS.ATOM:
+                    return 'Atome';
+                case PAYMENT_METHODS.DANA:
+                    return 'Dana';
+                case PAYMENT_METHODS.TNG:
+                    return "Touch 'n Go";
                 default:
                     return id;
             }
@@ -1618,6 +1874,27 @@ let OnePayment = class OnePayment extends LitElement {
           <div class="method-icon-right">
             <img src="${SHOPEEPAY_ICON_DATA_URL}" alt="ShopeePay" style="width: 45px; height: auto;" />
           </div>
+        `;
+            }
+            else if (id === PAYMENT_METHODS.ATOM) {
+                return html `
+          <div class="method-icon-right">
+            <img src="${ATOM_ICON_DATA_URL}" alt="Atome" style="width: 45px; height: auto;" />
+          </div>
+        `;
+            }
+            else if (id === PAYMENT_METHODS.DANA) {
+                return html `
+          <div class="method-icon-right">
+            <img src="${DANA_ICON_DATA_URL}" alt="Dana" style="width: 45px; height: auto;" />
+          </div>
+        `;
+            }
+            else if (id === PAYMENT_METHODS.TNG) {
+                return html `
+          <div class="method-icon-right">
+            <img src="${TNG_ICON_DATA_URL}" alt="Touch 'n Go" style="width: 45px; height: auto;" />
+          </div>
         `;
             }
             return null;
@@ -1682,7 +1959,13 @@ let OnePayment = class OnePayment extends LitElement {
                                             ? this.renderBoostContent()
                                             : method.id === PAYMENT_METHODS.SHOPEEPAY
                                                 ? this.renderShopeePayContent()
-                                                : null}
+                                                : method.id === PAYMENT_METHODS.ATOM
+                                                    ? this.renderAtomContent()
+                                                    : method.id === PAYMENT_METHODS.DANA
+                                                        ? this.renderDanaContent()
+                                                        : method.id === PAYMENT_METHODS.TNG
+                                                            ? this.renderTngContent()
+                                                            : null}
                           </div>`
                     : ''}
                     </div>
@@ -1880,6 +2163,7 @@ OnePayment.styles = css `
       justify-content: center;
       flex-shrink: 0;
       color: var(--op-color-text-secondary);
+      margin-left: 0.5rem;
     }
 
     .method-icon-right svg {
@@ -3045,6 +3329,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], OnePayment.prototype, "email", void 0);
+__decorate([
+    property({ type: String })
+], OnePayment.prototype, "phoneNumber", void 0);
 __decorate([
     property({ type: Array })
 ], OnePayment.prototype, "excludePaymentMethods", void 0);