@melio-eng/web-sdk 1.0.36-pr.69.b96ac0b → 1.0.36-pr.72.aa9151a

package/dist/flows/Flow.d.ts

@@ -1,4 +1,4 @@
-import { FlowInstance, FlowEventType, FlowEventCallback, FlowCompletionData, NavigationData, BaseFlowConfig, Environment, ErrorData, CheckoutSubmitData } from '../types.js';
+import { FlowInstance, FlowEventType, FlowEventCallback, FlowCompletionData, NavigationData, BaseFlowConfig, Environment, ErrorData } from '../types.js';
 /**
  * Flow class implementation for handling iframe flows and events
  */
@@ -39,9 +39,6 @@ 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
      */
@@ -54,9 +51,6 @@ 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
      */
@@ -65,9 +59,4 @@ 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,10 +61,7 @@ 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|localhost/.test(event.origin)) {
-                return;
-            }
-            if (this.iframe && event.source !== this.iframe.contentWindow) {
+            if (!/melio\.com|melioservices\.com/.test(event.origin)) {
                 return;
             }
             const { type, ...data } = event.data;
@@ -95,15 +92,6 @@ 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' });
@@ -165,13 +153,4 @@ 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/ViewPaymentFlow.d.ts

@@ -0,0 +1,14 @@
+import { ViewPaymentConfig, Environment } from '../types.js';
+import { Flow } from './Flow.js';
+/**
+ * ViewPaymentFlow subclass with custom URL construction for deep linking into a specific payment
+ */
+export declare class ViewPaymentFlow extends Flow {
+    private paymentId;
+    private authCode;
+    constructor(containerId: string, config: ViewPaymentConfig, partnerName: string, environment: Environment, authCode: string, branchOverride?: string);
+    /**
+     * Construct the specific flow URL for viewing a payment - goes through /auth
+     */
+    protected constructFlowUrl(baseUrl: string): string;
+}

package/dist/flows/ViewPaymentFlow.js

@@ -0,0 +1,23 @@
+import { Flow } from './Flow.js';
+import { isEmptyString } from './utils.js';
+/**
+ * ViewPaymentFlow subclass with custom URL construction for deep linking into a specific payment
+ */
+export class ViewPaymentFlow extends Flow {
+    constructor(containerId, config, partnerName, environment, authCode, branchOverride) {
+        super(containerId, config, partnerName, environment, branchOverride);
+        this.paymentId = config.paymentId;
+        this.authCode = authCode;
+        if (isEmptyString(this.authCode)) {
+            throw new Error('Authorization code is required for view payment flow. Please call init() before opening view payment flow.');
+        }
+    }
+    /**
+     * Construct the specific flow URL for viewing a payment - goes through /auth
+     */
+    constructFlowUrl(baseUrl) {
+        const target = `/pay-dashboard/payments/${this.paymentId}`;
+        const encodedTarget = encodeURIComponent(target);
+        return `${baseUrl}/${this.partnerName}/auth?token=${this.authCode}&redirectUrl=${encodedTarget}`;
+    }
+}

package/dist/flows/index.d.ts

@@ -1,8 +1,8 @@
-export { CheckoutFlow } from './CheckoutFlow.js';
 export { Flow } from './Flow.js';
 export { InitFlow } from './InitFlow.js';
 export { OnboardingFlow } from './OnboardingFlow.js';
 export { PayFlow } from './PayFlow.js';
 export { SettingsFlow } from './SettingsFlow.js';
 export { PaymentsDashboardFlow } from './PaymentsDashboardFlow.js';
+export { ViewPaymentFlow } from './ViewPaymentFlow.js';
 export { getBaseUrl, isEmptyString } from './utils.js';

package/dist/flows/index.js

@@ -1,8 +1,8 @@
-export { CheckoutFlow } from './CheckoutFlow.js';
 export { Flow } from './Flow.js';
 export { InitFlow } from './InitFlow.js';
 export { OnboardingFlow } from './OnboardingFlow.js';
 export { PayFlow } from './PayFlow.js';
 export { SettingsFlow } from './SettingsFlow.js';
 export { PaymentsDashboardFlow } from './PaymentsDashboardFlow.js';
+export { ViewPaymentFlow } from './ViewPaymentFlow.js';
 export { getBaseUrl, isEmptyString } from './utils.js';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { InitOptions, OnboardingConfig, SettingsConfig, FlowInstance, PaymentsDashboardConfig, PayFlowConfig, CheckoutFlowConfig, InitFlowInstance } from './types.js';
+import { InitOptions, OnboardingConfig, SettingsConfig, FlowInstance, PaymentsDashboardConfig, ViewPaymentConfig, PayFlowConfig, InitFlowInstance } from './types.js';
 /**
  * Main SDK implementation - now partner agnostic
  */
@@ -10,11 +10,6 @@ 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
      */
@@ -36,10 +31,9 @@ export declare class MelioSDK implements MelioSDK {
      */
     openPaymentsDashboard(config: PaymentsDashboardConfig): FlowInstance;
     /**
-     * Launch the checkout flow for guest payment.
-     * Does not require init().
+     * Launch the view payment flow to deep link into a specific payment
      */
-    openCheckoutFlow(config: CheckoutFlowConfig): FlowInstance;
+    openViewPayment(config: ViewPaymentConfig): FlowInstance;
 }
 /**
  * Export the SDK instance

package/dist/index.js

@@ -1,4 +1,4 @@
-import { CheckoutFlow, InitFlow, OnboardingFlow, PayFlow, SettingsFlow, PaymentsDashboardFlow, isEmptyString, } from './flows/index.js';
+import { InitFlow, OnboardingFlow, PayFlow, SettingsFlow, PaymentsDashboardFlow, ViewPaymentFlow, isEmptyString, } from './flows/index.js';
 /**
  * Main SDK implementation - now partner agnostic
  */
@@ -11,15 +11,6 @@ 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
      */
@@ -89,14 +80,13 @@ export class MelioSDK {
         return flow;
     }
     /**
-     * Launch the checkout flow for guest payment.
-     * Does not require init().
+     * Launch the view payment flow to deep link into a specific payment
      */
-    openCheckoutFlow(config) {
-        if (isEmptyString(this.partnerName)) {
-            throw new Error('Partner name is required. Please call init() or set partnerName before opening checkout flow.');
+    openViewPayment(config) {
+        if (isEmptyString(this.authCode)) {
+            throw new Error('SDK not initialized. Please call init() before opening view payment flow.');
         }
-        const flow = new CheckoutFlow(config.containerId, config, this.partnerName, this.environment, this.branchOverride);
+        const flow = new ViewPaymentFlow(config.containerId, config, this.partnerName, this.environment, this.authCode, this.branchOverride);
         flow.initialize();
         return flow;
     }

package/dist/types.d.ts

@@ -55,19 +55,6 @@ 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
  */
@@ -79,6 +66,12 @@ export interface SettingsConfig extends BaseFlowConfig {
 export interface PaymentsDashboardConfig extends BaseFlowConfig {
     paymentId?: string;
 }
+/**
+ * Configuration for view payment flow (deep link into a specific payment)
+ */
+export interface ViewPaymentConfig extends BaseFlowConfig {
+    paymentId: string;
+}
 /**
  * Configuration for init flow
  */
@@ -101,13 +94,6 @@ 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:
@@ -121,11 +107,11 @@ export interface ErrorData {
 /**
  * Event types that can be listened to
  */
-export type FlowEventType = 'completed' | 'exit' | 'navigated' | 'authenticationSucceeded' | 'authenticationFailed' | 'error' | 'loaded' | 'onboardingCompleted' | 'onboardingRequired' | 'paymentSucceeded' | 'paymentFailed' | 'checkoutSubmit';
+export type FlowEventType = 'completed' | 'exit' | 'navigated' | 'authenticationSucceeded' | 'authenticationFailed' | 'error' | 'loaded' | 'onboardingCompleted' | 'onboardingRequired';
 /**
  * Event callback function types
  */
-export type FlowEventCallback = ((data: FlowCompletionData | NavigationData | ErrorData | CheckoutSubmitData) => void) | (() => void);
+export type FlowEventCallback = ((data: FlowCompletionData | NavigationData | ErrorData) => void) | (() => void);
 /**
  * Flow instance interface for event handling
  */
@@ -144,9 +130,6 @@ 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
@@ -157,12 +140,6 @@ 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 {
     /**
@@ -213,10 +190,9 @@ export interface MelioSDK {
      */
     openPaymentsDashboard(config: PaymentsDashboardConfig): FlowInstance;
     /**
-     * Launch the checkout flow for guest payment.
-     * Does not require init().
-     * @param config - Configuration for the checkout flow
+     * Launch the view payment flow to deep link into a specific payment
+     * @param config - Configuration for the view payment flow
      * @returns Flow instance for event handling
      */
-    openCheckoutFlow(config: CheckoutFlowConfig): FlowInstance;
+    openViewPayment(config: ViewPaymentConfig): FlowInstance;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@melio-eng/web-sdk",
-  "version": "1.0.36-pr.69.b96ac0b",
+  "version": "1.0.36-pr.72.aa9151a",
   "description": "Melio Web SDK - Embed core Melio workflows directly into partner UI with minimal effort",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -20,8 +20,7 @@
     "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:checkout": "serve . -p 3009 && echo 'Open http://localhost:3009/examples/checkout-example.html'"
+    "examples:bill-pay": "serve . -p 3009 && echo 'Open http://localhost:3009/examples/bill-pay-example.html'"
   },
   "keywords": [
     "melio",

package/dist/flows/CheckoutFlow.d.ts

@@ -1,15 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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(','),
-        });
-        return `${baseUrl}/${this.partnerName}/ar/checkout?${params.toString()}`;
-    }
-}