@melio-eng/web-sdk 1.0.36-pr.67.71c92f3 → 1.0.36-pr.69.063a65a

package/dist/flows/CheckoutFlow.d.ts

@@ -0,0 +1,15 @@
+import { CheckoutFlowConfig, Environment } from '../types.js';
+import { Flow } from './Flow.js';
+/**
+ * CheckoutFlow - loads the Melio checkout experience without requiring authentication.
+ * Used by partners (e.g. Xero) to embed the payment checkout in their payer experience.
+ *
+ * The host page can call `submit()` on this flow instance to trigger the checkout submission.
+ * The component will then emit a 'checkoutSubmit' event with a JWT token containing the
+ * tokenized payment details.
+ */
+export declare class CheckoutFlow extends Flow {
+    private allowPaymentMethod;
+    constructor(containerId: string, config: CheckoutFlowConfig, partnerName: string, environment: Environment, branchOverride?: string);
+    protected constructFlowUrl(baseUrl: string): string;
+}

package/dist/flows/CheckoutFlow.js

@@ -0,0 +1,23 @@
+import { Flow } from './Flow.js';
+/**
+ * CheckoutFlow - loads the Melio checkout experience without requiring authentication.
+ * Used by partners (e.g. Xero) to embed the payment checkout in their payer experience.
+ *
+ * The host page can call `submit()` on this flow instance to trigger the checkout submission.
+ * The component will then emit a 'checkoutSubmit' event with a JWT token containing the
+ * tokenized payment details.
+ */
+export class CheckoutFlow extends Flow {
+    constructor(containerId, config, partnerName, environment, branchOverride) {
+        super(containerId, config, partnerName, environment, branchOverride);
+        this.allowPaymentMethod = config.allowPaymentMethod || ['card', 'ach'];
+    }
+    constructFlowUrl(baseUrl) {
+        const params = new URLSearchParams({
+            externalOrigin: this.partnerName,
+            allowPaymentMethod: this.allowPaymentMethod.join(','),
+            parentOrigin: window.location.origin,
+        });
+        return `${baseUrl}/${this.partnerName}/ar/checkout?${params.toString()}`;
+    }
+}

package/dist/flows/Flow.d.ts

@@ -1,4 +1,4 @@
-import { FlowInstance, FlowEventType, FlowEventCallback, FlowCompletionData, NavigationData, BaseFlowConfig, Environment, ErrorData } from '../types.js';
+import { FlowInstance, FlowEventType, FlowEventCallback, FlowCompletionData, NavigationData, BaseFlowConfig, Environment, ErrorData, CheckoutSubmitData } from '../types.js';
 /**
  * Flow class implementation for handling iframe flows and events
  */
@@ -39,6 +39,9 @@ export declare class Flow implements FlowInstance {
     protected emit(event: 'error', data: ErrorData): void;
     protected emit(event: 'onboardingCompleted'): void;
     protected emit(event: 'onboardingRequired'): void;
+    protected emit(event: 'paymentSucceeded', data: FlowCompletionData): void;
+    protected emit(event: 'paymentFailed', data: ErrorData): void;
+    protected emit(event: 'checkoutSubmit', data: CheckoutSubmitData): void;
     /**
      * Register an event listener
      */
@@ -51,6 +54,9 @@ export declare class Flow implements FlowInstance {
     on(event: 'loaded', callback: () => void): void;
     on(event: 'onboardingCompleted', callback: () => void): void;
     on(event: 'onboardingRequired', callback: () => void): void;
+    on(event: 'paymentSucceeded', callback: (data: FlowCompletionData) => void): void;
+    on(event: 'paymentFailed', callback: (data: ErrorData) => void): void;
+    on(event: 'checkoutSubmit', callback: (data: CheckoutSubmitData) => void): void;
     /**
      * Remove an event listener
      */
@@ -59,4 +65,9 @@ export declare class Flow implements FlowInstance {
      * Close the flow and clean up resources
      */
     close(): void;
+    /**
+     * Send the paymentIntent JWT token to the checkout iframe to trigger submission.
+     * @param token - The paymentIntent JWT token created by the partner's backend via Melio API
+     */
+    submit(token: string): void;
 }

package/dist/flows/Flow.js

@@ -61,7 +61,10 @@ export class Flow {
         // Add post message handlers for internal events - setHeight, scroll etc
         // Also need to implement callbacks for flow completed exit etc in the platform-app
         this.messageHandler = (event) => {
-            if (!/melio\.com|melioservices\.com/.test(event.origin)) {
+            if (!/melio\.com|melioservices\.com|localhost/.test(event.origin)) {
+                return;
+            }
+            if (this.iframe && event.source !== this.iframe.contentWindow) {
                 return;
             }
             const { type, ...data } = event.data;
@@ -92,6 +95,15 @@ export class Flow {
                 case 'PAYMENT_SCHEDULED':
                     this.emit('completed', { flowName: 'payment', ...data });
                     break;
+                case 'PAYMENT_SUCCEEDED':
+                    this.emit('paymentSucceeded', data);
+                    break;
+                case 'PAYMENT_FAILED':
+                    this.emit('paymentFailed', data);
+                    break;
+                case 'CHECKOUT_SUBMIT_RESULT':
+                    this.emit('checkoutSubmit', data);
+                    break;
                 case 'MELIO_ERROR':
                     if (data.code === 'failed_to_sync_bills') {
                         this.emit('error', { errorCode: 'billsSyncFailed' });
@@ -153,4 +165,13 @@ export class Flow {
         }
         this.eventListeners.clear();
     }
+    /**
+     * Send the paymentIntent JWT token to the checkout iframe to trigger submission.
+     * @param token - The paymentIntent JWT token created by the partner's backend via Melio API
+     */
+    submit(token) {
+        if (this.iframe?.contentWindow) {
+            this.iframe.contentWindow.postMessage({ type: 'CHECKOUT_SUBMIT', payload: { token } }, '*');
+        }
+    }
 }

package/dist/flows/index.d.ts

@@ -1,3 +1,4 @@
+export { CheckoutFlow } from './CheckoutFlow.js';
 export { Flow } from './Flow.js';
 export { InitFlow } from './InitFlow.js';
 export { OnboardingFlow } from './OnboardingFlow.js';

package/dist/flows/index.js

@@ -1,3 +1,4 @@
+export { CheckoutFlow } from './CheckoutFlow.js';
 export { Flow } from './Flow.js';
 export { InitFlow } from './InitFlow.js';
 export { OnboardingFlow } from './OnboardingFlow.js';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { InitOptions, OnboardingConfig, SettingsConfig, FlowInstance, PaymentsDashboardConfig, PayFlowConfig, InitFlowInstance } from './types.js';
+import { InitOptions, OnboardingConfig, SettingsConfig, FlowInstance, PaymentsDashboardConfig, PayFlowConfig, CheckoutFlowConfig, InitFlowInstance } from './types.js';
 /**
  * Main SDK implementation - now partner agnostic
  */
@@ -10,6 +10,11 @@ export declare class MelioSDK implements MelioSDK {
     private authCode;
     private initFlow;
     constructor();
+    /**
+     * Configure the SDK without triggering authentication.
+     * Use this for unauthenticated flows like checkout.
+     */
+    configure(options: Pick<InitOptions, 'partnerName' | 'environment' | 'branchOverride'>): void;
     /**
      * Initialize the SDK - triggers auth event without creating iframe
      */
@@ -30,6 +35,11 @@ export declare class MelioSDK implements MelioSDK {
      * Launch the payments dashboard flow
      */
     openPaymentsDashboard(config: PaymentsDashboardConfig): FlowInstance;
+    /**
+     * Launch the checkout flow for guest payment.
+     * Does not require init().
+     */
+    openCheckoutFlow(config: CheckoutFlowConfig): FlowInstance;
 }
 /**
  * Export the SDK instance

package/dist/index.js

@@ -1,4 +1,4 @@
-import { InitFlow, OnboardingFlow, PayFlow, SettingsFlow, PaymentsDashboardFlow, isEmptyString, } from './flows/index.js';
+import { CheckoutFlow, InitFlow, OnboardingFlow, PayFlow, SettingsFlow, PaymentsDashboardFlow, isEmptyString, } from './flows/index.js';
 /**
  * Main SDK implementation - now partner agnostic
  */
@@ -11,6 +11,15 @@ export class MelioSDK {
         this.authCode = '';
         this.initFlow = null;
     }
+    /**
+     * Configure the SDK without triggering authentication.
+     * Use this for unauthenticated flows like checkout.
+     */
+    configure(options) {
+        this.partnerName = options.partnerName;
+        this.environment = options.environment || 'production';
+        this.branchOverride = options.branchOverride;
+    }
     /**
      * Initialize the SDK - triggers auth event without creating iframe
      */
@@ -79,6 +88,18 @@ export class MelioSDK {
         flow.initialize();
         return flow;
     }
+    /**
+     * Launch the checkout flow for guest payment.
+     * Does not require init().
+     */
+    openCheckoutFlow(config) {
+        if (isEmptyString(this.partnerName)) {
+            throw new Error('Partner name is required. Please call init() or set partnerName before opening checkout flow.');
+        }
+        const flow = new CheckoutFlow(config.containerId, config, this.partnerName, this.environment, this.branchOverride);
+        flow.initialize();
+        return flow;
+    }
 }
 /**
  * Export the SDK instance

package/dist/types.d.ts

@@ -55,6 +55,19 @@ export interface OnboardingConfig extends BaseFlowConfig {
 export interface PayFlowConfig extends BaseFlowConfig {
     billIds: Array<string>;
 }
+/**
+ * Allowed payment methods for the checkout flow
+ */
+export type AllowedPaymentMethod = 'card' | 'ach';
+/**
+ * Configuration for checkout flow.
+ * Used by partners (e.g. Xero) to embed the payment checkout in their payer experience.
+ * Does not require prior authentication.
+ */
+export interface CheckoutFlowConfig extends BaseFlowConfig {
+    /** Allowed payment methods. Defaults to ['card', 'ach'] if not specified */
+    allowPaymentMethod?: AllowedPaymentMethod[];
+}
 /**
  * Configuration for settings flow
  */
@@ -88,6 +101,13 @@ export interface FlowCompletionData {
     flowName: 'onboarding' | 'payment';
     [key: string]: any;
 }
+/**
+ * Data returned when checkout submission is complete.
+ */
+export interface CheckoutSubmitData {
+    /** Result payload from the checkout submission */
+    [key: string]: any;
+}
 /**
  * Flow error data.
  * billsSyncFailed could be returned if the following cases:
@@ -101,11 +121,11 @@ export interface ErrorData {
 /**
  * Event types that can be listened to
  */
-export type FlowEventType = 'completed' | 'exit' | 'navigated' | 'authenticationSucceeded' | 'authenticationFailed' | 'error' | 'loaded' | 'onboardingCompleted' | 'onboardingRequired';
+export type FlowEventType = 'completed' | 'exit' | 'navigated' | 'authenticationSucceeded' | 'authenticationFailed' | 'error' | 'loaded' | 'onboardingCompleted' | 'onboardingRequired' | 'paymentSucceeded' | 'paymentFailed' | 'checkoutSubmit';
 /**
  * Event callback function types
  */
-export type FlowEventCallback = ((data: FlowCompletionData | NavigationData | ErrorData) => void) | (() => void);
+export type FlowEventCallback = ((data: FlowCompletionData | NavigationData | ErrorData | CheckoutSubmitData) => void) | (() => void);
 /**
  * Flow instance interface for event handling
  */
@@ -124,6 +144,9 @@ export interface FlowInstance {
     on(event: 'loaded', callback: () => void): void;
     on(event: 'onboardingCompleted', callback: () => void): void;
     on(event: 'onboardingRequired', callback: () => void): void;
+    on(event: 'paymentSucceeded', callback: (data: FlowCompletionData) => void): void;
+    on(event: 'paymentFailed', callback: (data: ErrorData) => void): void;
+    on(event: 'checkoutSubmit', callback: (data: CheckoutSubmitData) => void): void;
     /**
      * Remove an event listener for this flow
      * @param event - The event type to remove listener for
@@ -134,6 +157,12 @@ export interface FlowInstance {
      * Close the flow and clean up resources
      */
     close(): void;
+    /**
+     * Trigger the checkout submit from the host.
+     * Sends the paymentIntent JWT token to the checkout component.
+     * @param token - The paymentIntent JWT token created by the partner's backend via Melio API
+     */
+    submit(token: string): void;
 }
 export interface InitFlowInstance {
     /**
@@ -183,4 +212,11 @@ export interface MelioSDK {
      * @returns Flow instance for event handling
      */
     openPaymentsDashboard(config: PaymentsDashboardConfig): FlowInstance;
+    /**
+     * Launch the checkout flow for guest payment.
+     * Does not require init().
+     * @param config - Configuration for the checkout flow
+     * @returns Flow instance for event handling
+     */
+    openCheckoutFlow(config: CheckoutFlowConfig): FlowInstance;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@melio-eng/web-sdk",
-  "version": "1.0.36-pr.67.71c92f3",
+  "version": "1.0.36-pr.69.063a65a",
   "description": "Melio Web SDK - Embed core Melio workflows directly into partner UI with minimal effort",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -20,7 +20,8 @@
     "prepublishOnly": "npm run build && npm run docs",
     "examples": "serve . -p 3009",
     "examples:basic": "serve . -p 3009 && echo 'Open http://localhost:3009/examples/basic-usage.html'",
-    "examples:bill-pay": "serve . -p 3009 && echo 'Open http://localhost:3009/examples/bill-pay-example.html'"
+    "examples:bill-pay": "serve . -p 3009 && echo 'Open http://localhost:3009/examples/bill-pay-example.html'",
+    "examples:checkout": "serve . -p 3009 && echo 'Open http://localhost:3009/examples/checkout-example.html'"
   },
   "keywords": [
     "melio",