@jpmorgan-payments/embedded-finance-components 0.5.89 → 0.5.91
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 +44 -9
- package/dist/{2FJCTAHO-BNMCFO5a.js → 2FJCTAHO-DPc0CZn5.js} +1 -1
- package/dist/esm/ef-components.js +1 -1
- package/dist/{index-Bs-wewb5.js → index-CqdN97gs.js} +18278 -17947
- package/dist/index.css +1 -1
- package/dist/index.d.ts +62 -0
- package/dist/{production-CQ2TqOBp.js → production-Kv5140hg.js} +2 -2
- package/dist/umd/ef-components.js +1496 -1496
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -135,7 +135,7 @@ graph TB
|
|
|
135
135
|
|
|
136
136
|
### 1. OnboardingWizardBasic
|
|
137
137
|
|
|
138
|
-
The `OnboardingWizardBasic` component implements the client onboarding process as described in the [Embedded Payments API documentation](https://developer.payments.jpmorgan.com/docs/embedded-finance-solutions/embedded-payments/
|
|
138
|
+
The `OnboardingWizardBasic` component implements the client onboarding process as described in the [Embedded Payments API documentation](https://developer.payments.jpmorgan.com/docs/embedded-finance-solutions/embedded-payments/capabilities/onboard-a-client).
|
|
139
139
|
|
|
140
140
|
#### Main Features:
|
|
141
141
|
|
|
@@ -146,9 +146,29 @@ The `OnboardingWizardBasic` component implements the client onboarding process a
|
|
|
146
146
|
- Manage requests for additional documentation
|
|
147
147
|
- Check and display onboarding status
|
|
148
148
|
|
|
149
|
-
####
|
|
149
|
+
#### Props:
|
|
150
|
+
|
|
151
|
+
| Prop Name | Type | Required | Description |
|
|
152
|
+
| ----------------------------------- | ------------------------------------------------------------------- | -------- | -------------------------------------------------- |
|
|
153
|
+
| `initialClientId` | `string` | No | Initial client ID for existing client onboarding |
|
|
154
|
+
| `onSetClientId` | `(clientId: string) => Promise<void>` | No | Callback function when client ID is set |
|
|
155
|
+
| `onPostClientResponse` | `(response?: ClientResponse, error?: ApiError) => void` | No | Callback function for client creation response |
|
|
156
|
+
| `onPostPartyResponse` | `(response?: PartyResponse, error?: ApiError) => void` | No | Callback function for party creation response |
|
|
157
|
+
| `onPostClientVerificationsResponse` | `(response?: ClientVerificationResponse, error?: ApiError) => void` | No | Callback function for client verification response |
|
|
158
|
+
| `availableProducts` | `Array<ClientProduct>` | Yes | List of available products for onboarding |
|
|
159
|
+
| `availableJurisdictions` | `Array<Jurisdiction>` | Yes | List of available jurisdictions for onboarding |
|
|
160
|
+
| `availableOrganizationTypes` | `Array<OrganizationType>` | No | List of available organization types |
|
|
161
|
+
| `usePartyResource` | `boolean` | No | Whether to use party resource for onboarding |
|
|
162
|
+
| `blockPostVerification` | `boolean` | No | Whether to block post-verification steps |
|
|
163
|
+
| `showLinkedAccountPanel` | `boolean` | No | Whether to show linked account panel |
|
|
164
|
+
| `initialStep` | `number` | No | Initial step to start onboarding from |
|
|
165
|
+
| `variant` | `'circle' \| 'circle-alt' \| 'line'` | No | Visual variant of the stepper component |
|
|
166
|
+
| `onboardingContentTokens` | `DeepPartial<typeof defaultResources['enUS']['onboarding']>` | No | Custom content tokens for onboarding |
|
|
167
|
+
| `alertOnExit` | `boolean` | No | Whether to show alert when exiting onboarding |
|
|
168
|
+
| `userEventsToTrack` | `string[]` | No | List of user events to track |
|
|
169
|
+
| `userEventsHandler` | `({ actionName }: { actionName: string }) => void` | No | Handler for user events |
|
|
150
170
|
|
|
151
|
-
|
|
171
|
+
#### Usage:
|
|
152
172
|
|
|
153
173
|
```jsx
|
|
154
174
|
import {
|
|
@@ -170,7 +190,6 @@ const OnboardingSection = () => {
|
|
|
170
190
|
|
|
171
191
|
return (
|
|
172
192
|
<EBComponentsProvider apiBaseUrl="https://your-api-base-url.com">
|
|
173
|
-
{/* you could use https://api-mock.payments.jpmorgan.com/tsapi/ef/do/v1/ from the API mock server, please find more details at https://developer.payments.jpmorgan.com/api/embedded-finance-solutions/embedded-payments/onboarding#/ */}
|
|
174
193
|
<OnboardingWizardBasic
|
|
175
194
|
title="Client Onboarding"
|
|
176
195
|
initialClientId={clientId}
|
|
@@ -178,21 +197,37 @@ const OnboardingSection = () => {
|
|
|
178
197
|
onPostClientVerificationResponse={handlePostClientVerificationsResponse}
|
|
179
198
|
availableProducts={['EMBEDDED_PAYMENTS']}
|
|
180
199
|
availableJurisdictions={['US']}
|
|
200
|
+
variant="circle-alt"
|
|
201
|
+
initialStep={0}
|
|
202
|
+
showLinkedAccountPanel={true}
|
|
203
|
+
userEventsToTrack={['click']}
|
|
204
|
+
userEventsHandler={({ actionName }) => {
|
|
205
|
+
// Track user events
|
|
206
|
+
console.log(`User action: ${actionName}`);
|
|
207
|
+
}}
|
|
181
208
|
/>
|
|
182
209
|
</EBComponentsProvider>
|
|
183
210
|
);
|
|
184
211
|
};
|
|
185
212
|
```
|
|
186
213
|
|
|
187
|
-
OnboardingWizard
|
|
188
|
-
|
|
189
|
-
`availableProducts` determines which products are selectable in the initial step of the onboarding process. If only one product is provided, the component will default to that product and the field will become read-only.
|
|
214
|
+
The OnboardingWizard component accepts various props to customize the onboarding process:
|
|
190
215
|
|
|
191
|
-
|
|
216
|
+
- `availableProducts` determines which products are selectable in the initial step. If only one product is provided, the component will default to that product and the field will become read-only.
|
|
217
|
+
- `availableJurisdictions` is an array of country codes that are selectable. If only one is provided, it will default to that country.
|
|
218
|
+
- `availableOrganizationTypes` allows customization of the types of organizations that can be onboarded.
|
|
219
|
+
- `usePartyResource` enables using the party resource for onboarding, which may be required for certain integration scenarios.
|
|
220
|
+
- `blockPostVerification` can be used to prevent access to post-verification steps.
|
|
221
|
+
- `showLinkedAccountPanel` controls the visibility of the linked account panel.
|
|
222
|
+
- `initialStep` allows starting the onboarding process from a specific step.
|
|
223
|
+
- `variant` controls the visual style of the stepper component.
|
|
224
|
+
- `onboardingContentTokens` enables customization of text content and labels.
|
|
225
|
+
- `alertOnExit` provides a warning when users attempt to leave the onboarding process.
|
|
226
|
+
- `userEventsToTrack` and `userEventsHandler` enable tracking of user interactions during onboarding.
|
|
192
227
|
|
|
193
228
|
### 2. LinkedAccountWidget
|
|
194
229
|
|
|
195
|
-
The `LinkedAccountWidget` component facilitates the process of adding a client's linked account, as described in the [Add Linked Account API documentation](https://developer.payments.jpmorgan.com/docs/embedded-finance-solutions/embedded-payments/how-to/add-linked-account).
|
|
230
|
+
The `LinkedAccountWidget` component facilitates the process of adding a client's linked account, as described in the [Add Linked Account API documentation](https://developer.payments.jpmorgan.com/docs/embedded-finance-solutions/embedded-payments/capabilities/embedded-payments/how-to/add-linked-account).
|
|
196
231
|
|
|
197
232
|
#### Main Features:
|
|
198
233
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var xs = Object.defineProperty;
|
|
2
2
|
var ws = (e, t, n) => t in e ? xs(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
|
|
3
3
|
var Le = (e, t, n) => ws(e, typeof t != "symbol" ? t + "" : t, n);
|
|
4
|
-
import { c as R, d as tr, s as Nn, m as Un, a as B, b as m, e as j, f as te, S as N, g as M, h as pe, u as be, i as H, j as T, k as Re, o as rt, P as zo, l as G, n as $s, p as Ot, q as E, r as I, t as Cs, v as Tt, w as Ss, x as ks, y as mn, F as Es, z as Ds, D as Ms, A as P, I as As, B as nr, C as kn, E as Kr, G as Ts, H as Dt, J as Ft, $ as Ro, K as Br, L as Fs, M as Is, N as Ls, O as qn, Q as Os, R as Ps, T as qs, U as _s } from "./production-
|
|
4
|
+
import { c as R, d as tr, s as Nn, m as Un, a as B, b as m, e as j, f as te, S as N, g as M, h as pe, u as be, i as H, j as T, k as Re, o as rt, P as zo, l as G, n as $s, p as Ot, q as E, r as I, t as Cs, v as Tt, w as Ss, x as ks, y as mn, F as Es, z as Ds, D as Ms, A as P, I as As, B as nr, C as kn, E as Kr, G as Ts, H as Dt, J as Ft, $ as Ro, K as Br, L as Fs, M as Is, N as Ls, O as qn, Q as Os, R as Ps, T as qs, U as _s } from "./production-Kv5140hg.js";
|
|
5
5
|
var Ko = {
|
|
6
6
|
À: "A",
|
|
7
7
|
Á: "A",
|