Navigation Targets

The SDK exports a NavigationTarget object with typed constants and deep link helpers for all CFC navigation targets. This provides full autocomplete support and eliminates magic strings.

Usage

import { CfcClient, Environment, IntegrationMode, NavigationTarget } from "@melio-eng/cfc-sdk";

// On init — deep link directly to a bill
const client = new CfcClient({
	container: document.getElementById("cfc-container")!,
	environment: Environment.STAGING,
	token: authToken,
	tenant: "my-tenant",
	mode: IntegrationMode.FULL_PAGE,
	target: NavigationTarget.schedulePayment("bill-123"),
});
client.init();

// Navigate at runtime
client.navigateTo(NavigationTarget.VIEW_BILLS);
client.navigateTo(NavigationTarget.viewBill("bill-456"));

Static Path Constants

These are simple path constants with no parameters:

Constant	Path
NavigationTarget.VIEW_PAYMENTS	/view-payments
NavigationTarget.VIEW_BILLS	/view-bills
NavigationTarget.VIEW_VENDORS	/view-vendors
NavigationTarget.VIEW_SETTINGS	/view-settings
NavigationTarget.VIEW_PLANS	/view-plans
NavigationTarget.CREATE_BILL	/create-bill
NavigationTarget.ADD_VENDOR	/add-vendor
NavigationTarget.MANAGE_PLANS	/manage-plans
NavigationTarget.MANAGE_USERS	/manage-users
NavigationTarget.MANAGE_ACCOUNTING_SOFTWARE	/manage-accounting-software
NavigationTarget.MANAGE_RECEIVING_METHODS	/manage-receiving-methods
NavigationTarget.AR_ENROLLMENT	/ar/enrollment

Deep Link Helpers

These functions build paths with parameters for deep linking:

Helper	Example Output
NavigationTarget.schedulePayment(billId)	/schedule-payment/bill-123
NavigationTarget.scheduleBatchPayments(billIds)	/schedule-batch-payments?bill_ids=b1,b2,b3
NavigationTarget.viewPayment(paymentId)	/view-payment/pay-456
NavigationTarget.viewBill(billId)	/view-bill/bill-789
NavigationTarget.viewVendor(vendorId)	/view-vendor/vendor-abc
NavigationTarget.callback(token)	/callback/tok-xyz
NavigationTarget.arViewInvoices(status?)	/ar/view-invoices?status=unpaid

Examples

import { NavigationTarget } from "@melio-eng/cfc-sdk";

// Schedule a single payment
client.navigateTo(NavigationTarget.schedulePayment("bill-123"));

// Schedule batch payments
client.navigateTo(NavigationTarget.scheduleBatchPayments(["bill-1", "bill-2", "bill-3"]));

// View a specific vendor
client.navigateTo(NavigationTarget.viewVendor("vendor-abc"));

// View unpaid invoices
client.navigateTo(NavigationTarget.arViewInvoices("unpaid"));

// View all invoices (no status filter)
client.navigateTo(NavigationTarget.arViewInvoices());

// Callback redirect
client.navigateTo(NavigationTarget.callback("my-token"));

Deep Links on Init

Deep link helpers work directly in the target config option. The path is appended to target= in the auth URL:

const client = new CfcClient({
	// ...
	target: NavigationTarget.schedulePayment("bill-123"),
	// Auth URL: https://cfc.fiserv.com/auth?token=...&tenant=...&target=/schedule-payment/bill-123
});

Receiving Navigation Events

When CFC navigates internally, the SDK calls your onNavigated callback:

const client = new CfcClient({
	// ...
	onNavigated: (target, targetAction) => {
		console.log(`CFC navigated to: ${target}`);
	},
	onPaymentSuccess: () => {
		showToast("Payment completed!");
	},
});

Target Actions

Some navigation events include a targetAction field that indicates a sub-action:

Target Action	Context	Description
schedulePaymentSuccess	Payment flows	A payment was successfully scheduled

The SDK detects schedulePaymentSuccess automatically and calls onPaymentSuccess if provided.

MessageType Constants

For advanced use cases with client.on() or client.sendMessage(), the SDK exports typed message type constants. Use MessageType for all types, or IncomingMessageType/OutgoingMessageType for direction-specific types:

import { MessageType, IncomingMessageType } from "@melio-eng/cfc-sdk";

client.on(IncomingMessageType.LOADED, () => {
	console.log("CFC loaded");
});

client.on(IncomingMessageType.NAVIGATED_TO_TARGET, (msg) => {
	console.log(msg.target);
});