@wf-financing/ui-sdk 0.1.3 → 2.0.0
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 +27 -36
- package/dist/config/url.d.ts +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +1 -2
- package/dist/index.es.js +23 -32
- package/dist/sdk/index.d.ts +2 -2
- package/dist/sdk-mode/loadSdkUiMode.d.ts +2 -2
- package/dist/utils/initializeUiSdk.d.ts +2 -2
- package/dist/utils/loadScriptAndInitializeSdk.d.ts +2 -2
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,64 +1,55 @@
|
|
|
1
1
|
# Wayflyer Financing UI SDK
|
|
2
2
|
|
|
3
|
-
Wayflyer provides a `@wf-financing/ui-sdk`
|
|
3
|
+
Wayflyer provides a `@wf-financing/ui-sdk` - a client-side UI SDK to interact with the Embedded Finance API. Its primary method mounts the CTA banner in the partner UI.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
|
-
Install the package directly from NPM with `npm install @wf-financing/ui-sdk`.
|
|
8
|
-
To minimize the bundle size and reduce the impact on partners' page load times, the SDK uses dynamic imports to load the main part of the functionality.
|
|
7
|
+
Install the package directly from NPM with `npm install @wf-financing/ui-sdk`. To minimize the bundle size and reduce the impact on partners' page load times, the SDK uses dynamic imports to load the main part of the functionality.
|
|
9
8
|
|
|
10
9
|
## Instantiation
|
|
11
10
|
|
|
12
11
|
To initialize `WayflyerUiSdk`, call the static method `loadSdk` with the following parameters:
|
|
13
12
|
|
|
14
|
-
1. `
|
|
15
|
-
2. `partnerDesignId` - The ID of the partner theme that needs to be applied to the CTA.
|
|
16
|
-
- **Note**: The partner must request Wayflyer to generate a special theme ID.
|
|
17
|
-
3. `partnerCallback` - A function of type `PartnerCallbackType`, which is also provided by the `@wf-financing/ui-sdk` package.
|
|
18
|
-
4. `companyToken` - The merchant identifier.
|
|
13
|
+
1. `companyToken` - The merchant identifier.
|
|
19
14
|
- **Note**: The `companyToken` should be minted using the Company Token endpoint on the partner's backend. See the Authentication section [here](https://docs.wayflyer.com/embedded-finance/authentication) for more details.
|
|
15
|
+
2. `options` (optional) – an object of type `SdkOptionsType` that provides an ability for SDK to run in different modes (e.g. sandbox mode).
|
|
20
16
|
|
|
21
17
|
```jsx
|
|
22
|
-
import {
|
|
18
|
+
import { WayflyerUiSdk } from '@wf-financing/ui-sdk';
|
|
23
19
|
|
|
24
|
-
const
|
|
20
|
+
const wayflyerUiSdk = await WayflyerUiSdk.loadSdk(companyToken);
|
|
25
21
|
```
|
|
26
22
|
|
|
27
23
|
## SDK methods
|
|
28
|
-
|
|
24
|
+
|
|
25
|
+
### `mountCta(targetId, partnerCallback)`
|
|
26
|
+
|
|
29
27
|
This function mounts the CTA banner once it's called.
|
|
30
28
|
|
|
29
|
+
1. `targetId` - the `id` of the DOM element where the CTA banner should be mounted.
|
|
30
|
+
2. `partnerCallback` – a callback function that should return data of type `PartnerCallbackType`.
|
|
31
|
+
|
|
31
32
|
```jsx
|
|
32
|
-
|
|
33
|
-
```
|
|
33
|
+
import { type PartnerCallbackType } from '@wf-financing/ui-sdk';
|
|
34
34
|
|
|
35
|
-
|
|
36
|
-
To simplify the testing process, the SDK can be initialized in mock mode. To do so, pass a fifth argument of type `MockedModeType`.
|
|
37
|
-
In mock mode, the partner can manually set responses for SDK methods via the `sdkScenario` field in the optional `mockedMode` argument.
|
|
35
|
+
const partnerCallback: PartnerCallbackType = await () => {};
|
|
38
36
|
|
|
39
|
-
|
|
40
|
-
|
|
37
|
+
wayflyerUiSdk.mountCta(targetId, partnerCallback);
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Sandbox
|
|
41
41
|
|
|
42
|
-
|
|
43
|
-
isMockedMode: true,
|
|
44
|
-
sdkScenario: SdkScenarios.INDICATIVE_NEW_APPLICATION,
|
|
45
|
-
};
|
|
42
|
+
To simplify the testing process, the SDK can be initialized in sandbox mode. To do so, pass the second argument of type `SdkOptionsType` with `isSandbox` flag set to `true`. In sandbox mode, the partner can simulate responses for SDK methods with the help of the additional package `@wf-financing/sandbox-ui`.
|
|
46
43
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
sdkScenario: SdkScenarios.GENERIC_NEW_APPLICATION,
|
|
50
|
-
};
|
|
44
|
+
```jsx
|
|
45
|
+
import { WayflyerUiSdk, type SdkOptionsType, type PartnerCallbackType } from '@wf-financing/ui-sdk';
|
|
51
46
|
|
|
52
|
-
const
|
|
53
|
-
|
|
54
|
-
sdkScenario: SdkScenarios.CONTINUE_APPLICATION,
|
|
55
|
-
};
|
|
47
|
+
const options: SdkOptionsType = { isSandbox: true };
|
|
48
|
+
const wayflyerUiSdk = await WayflyerUiSdk.loadSdk(companyToken, options);
|
|
56
49
|
|
|
57
|
-
const
|
|
58
|
-
isMockedMode: true,
|
|
59
|
-
sdkScenario: SdkScenarios.NO_CTA,
|
|
60
|
-
};
|
|
50
|
+
const partnerCallback: PartnerCallbackType = await () => {};
|
|
61
51
|
|
|
62
|
-
|
|
52
|
+
wayflyerUiSdk.mountCta(targetId, partnerCallback);
|
|
63
53
|
```
|
|
64
|
-
|
|
54
|
+
|
|
55
|
+
After instantiation in sandbox mode, the SDK will call the sandbox environment API.
|
package/dist/config/url.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const UI_PACKAGE_URL = "https://
|
|
1
|
+
export declare const UI_PACKAGE_URL = "https://embedded-finance-frontend.vercel.app/npm/@wf-financing/ui@3";
|
package/dist/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d="wayflyer-ui-package",l="https://embedded-finance-frontend.vercel.app/npm/@wf-financing/ui@3",a=(i,t)=>{if(!window.WayflyerUiSdk)throw new Error("Failed to load WayflyerUiSdk from the script.");const e=window.WayflyerUiSdk;return new e(i,t)},n=(i,t,e)=>new Promise((r,o)=>{i.onload=()=>{try{r(a(t,e))}catch(c){o(c)}}}),y=async(i,t)=>{try{const e=document.getElementById(d);if(window.WayflyerUiSdk)return a(i,t);if(e)return n(e,i,t);const r=document.createElement("script");return r.src=l,r.type="module",r.id=d,r.async=!0,document.head.appendChild(r),n(r,i,t)}catch(e){throw console.error("Error in loading headless SDK:",e),new Error("Failed to load script")}};class s{static async loadSdk(t,e){return await y(t,e)}}exports.WayflyerUiSdk=s;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
export type {
|
|
2
|
-
export { SdkScenarios } from '@wf-financing/embedded-types';
|
|
1
|
+
export type { IWayflyerUiSdk, PartnerCallbackType, SdkOptionsType } from '@wf-financing/embedded-types';
|
|
3
2
|
export { WayflyerUiSdk } from './sdk';
|
package/dist/index.es.js
CHANGED
|
@@ -1,43 +1,34 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}, d = (i, e, n, a, o, t) => new Promise((r, l) => {
|
|
1
|
+
const d = "wayflyer-ui-package", l = "https://embedded-finance-frontend.vercel.app/npm/@wf-financing/ui@3", a = (i, t) => {
|
|
2
|
+
if (!window.WayflyerUiSdk)
|
|
3
|
+
throw new Error("Failed to load WayflyerUiSdk from the script.");
|
|
4
|
+
const r = window.WayflyerUiSdk;
|
|
5
|
+
return new r(i, t);
|
|
6
|
+
}, n = (i, t, r) => new Promise((e, o) => {
|
|
8
7
|
i.onload = () => {
|
|
9
8
|
try {
|
|
10
|
-
|
|
11
|
-
} catch (
|
|
12
|
-
|
|
9
|
+
e(a(t, r));
|
|
10
|
+
} catch (c) {
|
|
11
|
+
o(c);
|
|
13
12
|
}
|
|
14
13
|
};
|
|
15
|
-
}),
|
|
14
|
+
}), y = async (i, t) => {
|
|
16
15
|
try {
|
|
17
|
-
const
|
|
18
|
-
if (window.
|
|
19
|
-
return
|
|
20
|
-
if (
|
|
21
|
-
return
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
a,
|
|
27
|
-
o
|
|
28
|
-
);
|
|
29
|
-
const r = document.createElement("script");
|
|
30
|
-
return r.src = S, r.type = "module", r.id = c, r.async = !0, document.head.appendChild(r), d(r, i, e, n, a, o);
|
|
31
|
-
} catch (t) {
|
|
32
|
-
throw console.error("Error in loading headless SDK:", t), new Error("Failed to load script");
|
|
16
|
+
const r = document.getElementById(d);
|
|
17
|
+
if (window.WayflyerUiSdk)
|
|
18
|
+
return a(i, t);
|
|
19
|
+
if (r)
|
|
20
|
+
return n(r, i, t);
|
|
21
|
+
const e = document.createElement("script");
|
|
22
|
+
return e.src = l, e.type = "module", e.id = d, e.async = !0, document.head.appendChild(e), n(e, i, t);
|
|
23
|
+
} catch (r) {
|
|
24
|
+
throw console.error("Error in loading headless SDK:", r), new Error("Failed to load script");
|
|
33
25
|
}
|
|
34
26
|
};
|
|
35
|
-
class
|
|
36
|
-
static async loadSdk(
|
|
37
|
-
return await
|
|
27
|
+
class s {
|
|
28
|
+
static async loadSdk(t, r) {
|
|
29
|
+
return await y(t, r);
|
|
38
30
|
}
|
|
39
31
|
}
|
|
40
32
|
export {
|
|
41
|
-
|
|
42
|
-
C as WayflyerUiSdk
|
|
33
|
+
s as WayflyerUiSdk
|
|
43
34
|
};
|
package/dist/sdk/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { SdkOptionsType, IWayflyerUiSdk } from '@wf-financing/embedded-types';
|
|
2
2
|
|
|
3
3
|
export declare class WayflyerUiSdk {
|
|
4
|
-
static loadSdk(
|
|
4
|
+
static loadSdk(companyToken: string, options?: SdkOptionsType): Promise<IWayflyerUiSdk>;
|
|
5
5
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IWayflyerUiSdk, SdkOptionsType } from '@wf-financing/embedded-types';
|
|
2
2
|
|
|
3
|
-
type LoadUiSdkModeType = (
|
|
3
|
+
type LoadUiSdkModeType = (companyToken: string, options?: SdkOptionsType) => Promise<IWayflyerUiSdk | void>;
|
|
4
4
|
export declare const loadUiSdkMode: LoadUiSdkModeType;
|
|
5
5
|
export {};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IWayflyerUiSdk, SdkOptionsType } from '@wf-financing/embedded-types';
|
|
2
2
|
|
|
3
|
-
export declare const initializeUiSdk: (
|
|
3
|
+
export declare const initializeUiSdk: (companyToken: string, options?: SdkOptionsType) => IWayflyerUiSdk;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IWayflyerUiSdk, SdkOptionsType } from '@wf-financing/embedded-types';
|
|
2
2
|
|
|
3
|
-
export declare const loadScriptAndInitializeSdk: (script: HTMLScriptElement,
|
|
3
|
+
export declare const loadScriptAndInitializeSdk: (script: HTMLScriptElement, companyToken: string, options?: SdkOptionsType) => Promise<IWayflyerUiSdk>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wf-financing/ui-sdk",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"main": "dist/index.cjs.js",
|
|
5
5
|
"module": "dist/index.es.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"dist"
|
|
16
16
|
],
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@wf-financing/embedded-types": "0.
|
|
18
|
+
"@wf-financing/embedded-types": "0.4.1"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
21
|
"vite": "^6.3.5",
|