@melio-eng/web-sdk 1.0.40-pr.88.ea95f3d → 1.0.40-pr.92.83c7b28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +40 -0
- package/dist/types.d.ts +69 -32
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -135,6 +135,46 @@ Host Melio account settings within your product.
|
|
|
135
135
|
melioSDK.openSettings(config: SettingsConfig): FlowInstance
|
|
136
136
|
```
|
|
137
137
|
|
|
138
|
+
#### Entry Point (`entryPoint`)
|
|
139
|
+
|
|
140
|
+
`PayFlowConfig`, `JustPayFlowConfig` and `OnboardingConfig` accept an optional `entryPoint` — which
|
|
141
|
+
page of your product the user came from. The SDK composes it into the `externalOrigin` query param as
|
|
142
|
+
`${partnerName}-${entryPoint}`, and Melio uses that value to word the button that ends the flow. Omit
|
|
143
|
+
it and `externalOrigin` stays the bare partner name.
|
|
144
|
+
|
|
145
|
+
| `entryPoint` | resulting `externalOrigin` (partner `xero`) | return button reads |
|
|
146
|
+
|---|---|---|
|
|
147
|
+
| `"bills"` | `xero-bills` | "Back to bills" |
|
|
148
|
+
| `"contacts"` | `xero-contacts` | "Back to contacts" |
|
|
149
|
+
| `"quickpayment"` | `xero-quickpayment` | "Back to quick payment" |
|
|
150
|
+
| `"managepayments"` | `xero-managepayments` | "Back to manage payments" |
|
|
151
|
+
| `"home"` | `xero-home` | "Back to homepage" |
|
|
152
|
+
| `"generic"` | `xero-generic` | "Finish and return" |
|
|
153
|
+
| _omitted_ | `xero` | today's default wording |
|
|
154
|
+
|
|
155
|
+
```typescript
|
|
156
|
+
const payFlow = melioSDK.openPayFlow({
|
|
157
|
+
containerId: "melio-payflow-container",
|
|
158
|
+
billIds: ["ext-bill-1"], // accounting ids — the default billIdType
|
|
159
|
+
entryPoint: "bills", // -> externalOrigin=<partnerName>-bills, "Back to bills"
|
|
160
|
+
});
|
|
161
|
+
|
|
162
|
+
// The entry point only labels the button — you still navigate:
|
|
163
|
+
payFlow.on("completed", () => router.push("/bills"));
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
Pass the value **unprefixed**: the SDK adds `${partnerName}-` for you. Use `"generic"` when your host
|
|
167
|
+
page cannot name a single destination. Labels are owned by the Melio platform and may be reworded, so
|
|
168
|
+
treat the third column as indicative rather than contractual.
|
|
169
|
+
|
|
170
|
+
> **Descriptive only — the entry point does not route the user.** It affects the button's wording and
|
|
171
|
+
> nothing else. The `completed` event carries no destination, so **your** application still decides
|
|
172
|
+
> where the click actually lands. Entry point and real destination stay coupled by convention alone:
|
|
173
|
+
> don't assume Melio navigates the user back for you.
|
|
174
|
+
|
|
175
|
+
On the Pay Flow, `entryPoint` only reaches the platform for the default `billIdType: "accounting"`
|
|
176
|
+
target; with `billIdType: "melio"` the payment screen opens directly and no `externalOrigin` is sent.
|
|
177
|
+
|
|
138
178
|
### Event Handling
|
|
139
179
|
|
|
140
180
|
Each flow method returns a `FlowInstance` that allows you to register event listeners:
|
package/dist/types.d.ts
CHANGED
|
@@ -24,53 +24,66 @@ export interface BaseFlowConfig {
|
|
|
24
24
|
/** Optional authorization code for the flow */
|
|
25
25
|
authCode?: string;
|
|
26
26
|
}
|
|
27
|
-
export type BusinessType = '
|
|
28
|
-
export type TaxIdType = 'ssn' | 'itin' | 'ein';
|
|
29
|
-
/**
|
|
30
|
-
* A US mailing address used to prefill business address fields
|
|
31
|
-
*/
|
|
32
|
-
export interface Address {
|
|
33
|
-
street1?: string;
|
|
34
|
-
street2?: string;
|
|
35
|
-
city?: string;
|
|
36
|
-
state?: string;
|
|
37
|
-
zipCode?: string;
|
|
38
|
-
}
|
|
39
|
-
export interface Industry {
|
|
40
|
-
name?: string;
|
|
41
|
-
/** NAICS industry code */
|
|
42
|
-
code?: number;
|
|
43
|
-
}
|
|
27
|
+
export type BusinessType = 'partnership' | 'limitedLiabilityCompany' | 'corporation' | 'nonProfit';
|
|
44
28
|
export interface OrganizationDetails {
|
|
45
29
|
companyName?: string;
|
|
46
|
-
/** Doing-business-as name, if different from companyName */
|
|
47
|
-
dbaName?: string;
|
|
48
30
|
businessType?: BusinessType;
|
|
49
31
|
companyLegalName?: string;
|
|
50
|
-
taxIdType?: TaxIdType;
|
|
51
32
|
taxId?: string;
|
|
52
33
|
legalDateOfBirth?: string;
|
|
53
34
|
website?: string;
|
|
54
35
|
description?: string;
|
|
55
36
|
contactPhone?: string;
|
|
56
|
-
/** Physical/operating address of the business */
|
|
57
|
-
businessAddress?: Address;
|
|
58
|
-
/** Registered legal address of the business, if different from businessAddress */
|
|
59
|
-
legalAddress?: Address;
|
|
60
|
-
industry?: Industry;
|
|
61
37
|
}
|
|
62
38
|
export interface UserDetails {
|
|
63
39
|
email?: string;
|
|
64
40
|
firstName?: string;
|
|
65
41
|
lastName?: string;
|
|
66
42
|
dateOfBirth?: string;
|
|
67
|
-
phone?: string;
|
|
68
43
|
}
|
|
69
44
|
/**
|
|
70
|
-
* Entry point context for the flow
|
|
71
|
-
*
|
|
45
|
+
* Entry point context for the flow — which page in your product the user came from.
|
|
46
|
+
*
|
|
47
|
+
* When provided, the `externalOrigin` query param passed to the platform becomes
|
|
48
|
+
* `${partnerName}-${entryPoint}`; when omitted it stays the bare `partnerName`.
|
|
49
|
+
* Melio uses that value to choose the wording of the button that ends the flow, so pick
|
|
50
|
+
* the value naming the page the user came from (and will be returned to):
|
|
51
|
+
*
|
|
52
|
+
* | `entryPoint` | resulting `externalOrigin` (partner `xero`) | return button reads |
|
|
53
|
+
* | --- | --- | --- |
|
|
54
|
+
* | `'bills'` | `xero-bills` | "Back to bills" |
|
|
55
|
+
* | `'contacts'` | `xero-contacts` | "Back to contacts" |
|
|
56
|
+
* | `'quickpayment'` | `xero-quickpayment` | "Back to quick payment" |
|
|
57
|
+
* | `'managepayments'` | `xero-managepayments` | "Back to manage payments" |
|
|
58
|
+
* | `'home'` | `xero-home` | "Back to homepage" |
|
|
59
|
+
* | `'generic'` | `xero-generic` | "Finish and return" |
|
|
60
|
+
*
|
|
61
|
+
* Use `'generic'` as the catch-all when your host page cannot name a single destination.
|
|
62
|
+
* The values are deliberately unprefixed — the SDK prepends `${partnerName}-` itself.
|
|
63
|
+
* Labels are owned by the Melio platform and may be reworded; treat the table as
|
|
64
|
+
* indicative rather than contractual.
|
|
65
|
+
*
|
|
66
|
+
* @remarks
|
|
67
|
+
* **Descriptive only — the entry point does not route the user.** It only tells Melio how to
|
|
68
|
+
* label the button that ends the flow. The `completed` event (`FLOW_COMPLETED`) carries no
|
|
69
|
+
* destination, so your application still decides where the click actually lands. Entry point
|
|
70
|
+
* and real destination stay coupled by convention alone: do not assume Melio navigates the
|
|
71
|
+
* user back for you.
|
|
72
|
+
*
|
|
73
|
+
* @example
|
|
74
|
+
* ```typescript
|
|
75
|
+
* // User started from the bills list, so the flow ends with a "Back to bills" button.
|
|
76
|
+
* const payFlow = melioSDK.openPayFlow({
|
|
77
|
+
* containerId: "melio-payflow-container",
|
|
78
|
+
* billIds: ["bill_abc123"],
|
|
79
|
+
* entryPoint: "bills",
|
|
80
|
+
* });
|
|
81
|
+
*
|
|
82
|
+
* // ...and your app still performs the actual navigation:
|
|
83
|
+
* payFlow.on("completed", () => router.push("/bills"));
|
|
84
|
+
* ```
|
|
72
85
|
*/
|
|
73
|
-
export type ExternalEntryPoint = 'contacts';
|
|
86
|
+
export type ExternalEntryPoint = 'bills' | 'contacts' | 'quickpayment' | 'managepayments' | 'home' | 'generic';
|
|
74
87
|
/**
|
|
75
88
|
* Configuration for onboarding flow
|
|
76
89
|
*/
|
|
@@ -78,7 +91,14 @@ export interface OnboardingConfig extends BaseFlowConfig {
|
|
|
78
91
|
userDetails?: UserDetails;
|
|
79
92
|
organizationDetails?: OrganizationDetails;
|
|
80
93
|
enforceOnboarding?: boolean;
|
|
81
|
-
/**
|
|
94
|
+
/**
|
|
95
|
+
* Optional entry point context — which page in your product the user came from.
|
|
96
|
+
* Affects the `externalOrigin` passed to the platform (`${partnerName}-${entryPoint}`),
|
|
97
|
+
* which Melio uses to label the button that ends the flow. Accepts `'bills'`, `'contacts'`,
|
|
98
|
+
* `'quickpayment'`, `'managepayments'`, `'home'` or `'generic'`; omit it to send the bare
|
|
99
|
+
* partner name. Descriptive only — it does not route the user; your app still handles where
|
|
100
|
+
* the click lands. See {@link ExternalEntryPoint}.
|
|
101
|
+
*/
|
|
82
102
|
entryPoint?: ExternalEntryPoint;
|
|
83
103
|
}
|
|
84
104
|
/**
|
|
@@ -86,7 +106,17 @@ export interface OnboardingConfig extends BaseFlowConfig {
|
|
|
86
106
|
*/
|
|
87
107
|
export interface PayFlowConfig extends BaseFlowConfig {
|
|
88
108
|
billIds: Array<string>;
|
|
89
|
-
/**
|
|
109
|
+
/**
|
|
110
|
+
* Optional entry point context — which page in your product the user came from.
|
|
111
|
+
* Affects the `externalOrigin` passed to the platform (`${partnerName}-${entryPoint}`),
|
|
112
|
+
* which Melio uses to label the button that ends the flow. Accepts `'bills'`, `'contacts'`,
|
|
113
|
+
* `'quickpayment'`, `'managepayments'`, `'home'` or `'generic'`; omit it to send the bare
|
|
114
|
+
* partner name. Descriptive only — it does not route the user; your app still handles where
|
|
115
|
+
* the click lands. See {@link ExternalEntryPoint}.
|
|
116
|
+
*
|
|
117
|
+
* Only reaches the platform for the default `billIdType: 'accounting'` target; with
|
|
118
|
+
* `billIdType: 'melio'` the payment screen opens directly and no `externalOrigin` is sent.
|
|
119
|
+
*/
|
|
90
120
|
entryPoint?: ExternalEntryPoint;
|
|
91
121
|
/**
|
|
92
122
|
* How the platform should resolve the provided `billIds`. Defaults to `'accounting'`.
|
|
@@ -107,7 +137,14 @@ export interface JustPayFlowConfig extends BaseFlowConfig {
|
|
|
107
137
|
externalVendorIds: Array<string>;
|
|
108
138
|
/** Optional amount to prefill in the payment flow */
|
|
109
139
|
amount?: number;
|
|
110
|
-
/**
|
|
140
|
+
/**
|
|
141
|
+
* Optional entry point context — which page in your product the user came from.
|
|
142
|
+
* Affects the `externalOrigin` passed to the platform (`${partnerName}-${entryPoint}`),
|
|
143
|
+
* which Melio uses to label the button that ends the flow. Accepts `'bills'`, `'contacts'`,
|
|
144
|
+
* `'quickpayment'`, `'managepayments'`, `'home'` or `'generic'`; omit it to send the bare
|
|
145
|
+
* partner name. Descriptive only — it does not route the user; your app still handles where
|
|
146
|
+
* the click lands. See {@link ExternalEntryPoint}.
|
|
147
|
+
*/
|
|
111
148
|
entryPoint?: ExternalEntryPoint;
|
|
112
149
|
}
|
|
113
150
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@melio-eng/web-sdk",
|
|
3
|
-
"version": "1.0.40-pr.
|
|
3
|
+
"version": "1.0.40-pr.92.83c7b28",
|
|
4
4
|
"description": "Melio Web SDK - Embed core Melio workflows directly into partner UI with minimal effort",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|