@paypal/merchant-onboarding-sdk 1.0.0 → 1.0.2
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 +176 -149
- package/dist/index.d.ts +3 -1
- package/dist/onboarding.js +198 -145
- package/dist/servicing.js +13013 -223
- package/dist/v1/js/development.partner.js +8187 -148
- package/dist/v1/js/development.servicing.js +15630 -1368
- package/dist/v1/js/partner.js +1 -1
- package/dist/v1/js/partner.js.LICENSE.txt +33 -0
- package/dist/v1/js/sandbox.partner.js +8187 -148
- package/dist/v1/js/sandbox.servicing.js +15630 -1368
- package/dist/v1/js/servicing.js +1 -1
- package/dist/v1/js/servicing.js.LICENSE.txt +33 -0
- package/dist/v1/js/staging.partner.js +8187 -148
- package/dist/v1/js/staging.servicing.js +15630 -1368
- package/dist/v1/js/te-e2e-embedded-path-testing.partner.js +8187 -148
- package/dist/v1/js/te-e2e-embedded-path-testing.servicing.js +15630 -1368
- package/dist/v1/js/te-eop-release.partner.js +8187 -148
- package/dist/v1/js/te-eop-release.servicing.js +15630 -1368
- package/dist/v1/js/te-hybrid-path-integration.partner.js +8187 -148
- package/dist/v1/js/te-hybrid-path-integration.servicing.js +15630 -1368
- package/package.json +6 -39
package/README.md
CHANGED
|
@@ -1,177 +1,228 @@
|
|
|
1
1
|
# Merchant Onboarding SDK
|
|
2
2
|
|
|
3
3
|
This SDK simplifies the integration of merchant onboarding workflows into any
|
|
4
|
-
application that
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
- **Workflow Management:** Handles complex onboarding flows with dynamic steps
|
|
8
|
-
and redirects.
|
|
9
|
-
- **Data Collection and Validation:** Simplifies the collection and validation
|
|
10
|
-
of merchant data.
|
|
11
|
-
- **Integration with Backend Services:** Provides seamless integration with
|
|
12
|
-
backend services for data persistence and other operations.
|
|
13
|
-
- **User Context Management:** Maintains user context throughout the onboarding
|
|
14
|
-
journey.
|
|
15
|
-
- **Tracking and Analytics:** Tracks onboarding progress and gathers analytics
|
|
16
|
-
data.
|
|
4
|
+
application that uses the SDK package. It provides a set of tools and utilities
|
|
5
|
+
to manage the onboarding process, including:
|
|
17
6
|
|
|
18
7
|
## Table of Contents
|
|
19
8
|
|
|
20
9
|
- [Getting Started](#getting-started)
|
|
21
10
|
- [Installation](#installation)
|
|
22
11
|
- [Usage](#usage)
|
|
23
|
-
- [SDK Reference](#sdk-reference)
|
|
24
|
-
- [
|
|
25
|
-
- [
|
|
26
|
-
|
|
27
|
-
- [
|
|
28
|
-
|
|
29
|
-
- [
|
|
12
|
+
- [Onboarding SDK Reference](#onboarding-sdk-reference)
|
|
13
|
+
- [Install Onboarding SDK](#install-onboarding-sdk)
|
|
14
|
+
- [Initialize Onboarding SDK](#initialize-onboarding-sdk)
|
|
15
|
+
- [Onboarding Props Reference](#onboarding-props-reference)
|
|
16
|
+
- [Render Onboarding SDK](#render-onboarding-sdk)
|
|
17
|
+
- [Servicing SDK Reference](#servicing-sdk-reference)
|
|
18
|
+
- [Install Servicing SDK](#install-servicing-sdk)
|
|
19
|
+
- [Initialize and Render Servicing SDK](#initialize-and-render-servicing-sdk)
|
|
20
|
+
- [Supported Modules](#supported-modules)
|
|
21
|
+
- [Servicing Props Reference](#servicing-props-reference)
|
|
22
|
+
- [Styling Options](#styling-options)
|
|
30
23
|
|
|
31
24
|
## Getting Started
|
|
32
25
|
|
|
33
26
|
### Installation
|
|
34
27
|
|
|
35
|
-
#### Install
|
|
28
|
+
#### Install the SDK
|
|
36
29
|
|
|
37
30
|
```bash
|
|
38
|
-
npm install
|
|
31
|
+
npm install @paypal/merchant-onboarding-sdk
|
|
39
32
|
```
|
|
40
33
|
|
|
41
|
-
|
|
34
|
+
## Usage
|
|
42
35
|
|
|
43
|
-
|
|
44
|
-
and production
|
|
36
|
+
### 1. Add sdk package to your UI element
|
|
45
37
|
|
|
46
|
-
```
|
|
47
|
-
|
|
38
|
+
```aiexclude
|
|
39
|
+
import { onboard } from "@paypal/merchant-onboarding-sdk/onboarding";
|
|
48
40
|
```
|
|
49
41
|
|
|
50
|
-
|
|
42
|
+
OR
|
|
51
43
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
```bash
|
|
55
|
-
npm run build:staging:te -- te=<<te-name>>
|
|
44
|
+
```aiexclude
|
|
45
|
+
import { servicing } from "@paypal/merchant-onboarding-sdk/servicing";
|
|
56
46
|
```
|
|
57
47
|
|
|
58
|
-
|
|
48
|
+
Do not add both packages to the DOM at the same time as they should not be used
|
|
49
|
+
concurrently.
|
|
59
50
|
|
|
60
|
-
####
|
|
51
|
+
#### Usage NOTE
|
|
61
52
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
3. on partner application add script referencing the file you just copy
|
|
53
|
+
If you use SSR, import the script only in the UI as it relies on client-side
|
|
54
|
+
global objects like `window`
|
|
65
55
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
56
|
+
Example:
|
|
57
|
+
|
|
58
|
+
```aiexclude
|
|
59
|
+
import {
|
|
60
|
+
Onboard,
|
|
61
|
+
OnboardOptions,
|
|
62
|
+
} from "@paypal/merchant-onboarding-sdk/onboarding";
|
|
63
|
+
|
|
64
|
+
const [onboard, setOnboard] = useState<Onboard>(null as unknown as Onboard);
|
|
65
|
+
|
|
66
|
+
useEffect(() => {
|
|
67
|
+
const initSdk = async () => {
|
|
68
|
+
const onbPackage = await import(
|
|
69
|
+
"@paypal/merchant-onboarding-sdk/onboarding"
|
|
70
|
+
);
|
|
71
|
+
setOnboard(onbPackage.default as unknown as Onboard);
|
|
72
|
+
};
|
|
73
|
+
initSdk();
|
|
74
|
+
}, []);
|
|
75
|
+
|
|
76
|
+
useEffect(() => {
|
|
77
|
+
if (onboard) {
|
|
78
|
+
onboard.initialize({ // props }).render("elementId")
|
|
79
|
+
}
|
|
80
|
+
}, [onboard])
|
|
69
81
|
```
|
|
70
82
|
|
|
71
|
-
|
|
83
|
+
### 2. initialize sdk in your app and render
|
|
72
84
|
|
|
73
85
|
```aiexclude
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
},
|
|
85
|
-
primary: {
|
|
86
|
-
main: '#1b75bc', //header & button
|
|
87
|
-
mainHover: '#1871b6',
|
|
88
|
-
mainActive: '#204d74', // button color after you click
|
|
89
|
-
},
|
|
90
|
-
},
|
|
91
|
-
},
|
|
92
|
-
onError: function (error,errorInfo) {
|
|
93
|
-
alert("There is an error\nError: " + error +"\nError Description: \n"+ errorInfo)
|
|
94
|
-
window.location.reload()
|
|
86
|
+
onboard
|
|
87
|
+
.initialize({
|
|
88
|
+
env: 'production', // required for node_module integrations only
|
|
89
|
+
accessToken: 'A21_A.AAdU_t4bpoqBrSPWCvZWX7px-4feNn6Ap1Ixon9zgB46GNnibPWM_GrYcwTUBou-8LUM1WSOP5-XUecATSod2E1x-eoYPA',
|
|
90
|
+
actionUrl: 'https://www.paypal.com/bizsignup/partner/entry?referralToken=ZjRmMTdiNjItMDhlNi00ZjJiLTk3ODAtNTQ0NzE3YjI5MTRkQ3pncW5vYlZpaEZOUnpmc082bTRVekphRENVcy9iWjJmWUt1b3l3TWNidz12Mg==',
|
|
91
|
+
cancelUrl: 'http://www.partner.com/cancelUrl' // add partner's app url
|
|
92
|
+
style: {
|
|
93
|
+
color: {
|
|
94
|
+
background: {
|
|
95
|
+
highContrast: '#48484a', // font color
|
|
95
96
|
},
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
97
|
+
primary: {
|
|
98
|
+
main: '#1b75bc', //header & button
|
|
99
|
+
mainHover: '#1871b6',
|
|
100
|
+
mainActive: '#204d74', // button color after you click
|
|
99
101
|
},
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
.
|
|
109
|
-
|
|
102
|
+
},
|
|
103
|
+
},
|
|
104
|
+
onError: async function (error,errorInfo) {
|
|
105
|
+
alert("There is an error\nError: " + error +"\nError Description: \n"+ errorInfo)
|
|
106
|
+
window.location.reload()
|
|
107
|
+
},
|
|
108
|
+
onSDKError: async function (error,errorInfo) {
|
|
109
|
+
alert("There is an error\nError: " + error +"\nError Description: \n"+ errorInfo.componentStack)
|
|
110
|
+
window.location.reload()
|
|
111
|
+
},
|
|
112
|
+
onProgress: async function (progress) {},
|
|
113
|
+
onComplete: async function () { alert("Onboard completed!!")},
|
|
114
|
+
onAccessTokenExpiry: async function () {},
|
|
115
|
+
onReferralTokenExpiry: async function () {},
|
|
116
|
+
onCancel: async function () {alert("User cancelled the onboarding")},
|
|
117
|
+
onContactUs: async function () {}
|
|
118
|
+
onLoginRequested: async function (spokePayerId) { return await getToken()} // STANDALONE_HYBRID partners only
|
|
119
|
+
})
|
|
120
|
+
.render('root')
|
|
110
121
|
```
|
|
111
122
|
|
|
112
|
-
|
|
113
|
-
6. Launch sample partner html and test
|
|
123
|
+
## Onboarding SDK Reference
|
|
114
124
|
|
|
115
|
-
|
|
125
|
+
### Install Onboarding SDK
|
|
116
126
|
|
|
117
|
-
|
|
127
|
+
```aiexclude
|
|
128
|
+
import { onboard } from "@paypal/merchant-onboarding-sdk/onboarding";
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### Initialize Onboarding SDK
|
|
118
132
|
|
|
119
133
|
```aiexclude
|
|
120
|
-
|
|
121
|
-
<div id="container"></div>
|
|
134
|
+
Paypal.onboard.initialize(props)
|
|
122
135
|
```
|
|
123
136
|
|
|
124
|
-
|
|
137
|
+
### Onboarding Props Reference
|
|
138
|
+
|
|
139
|
+
| Parameter | Type | Description | Required |
|
|
140
|
+
| ----------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------- |
|
|
141
|
+
| `accessToken` | `string` | The access token for authentication. | Yes |
|
|
142
|
+
| `env` | `string` | The env that should be used. Possible values are 'sandbox' or 'production' | No (defaults to 'production' for npm integrations) |
|
|
143
|
+
| `actionUrl` | `string` | The URL containing the `referralToken`. | Yes |
|
|
144
|
+
| `cancelUrl` | `string` | The URL to return from onboarding on cancel. | No |
|
|
145
|
+
| `style` | `object` | Styling options (see below). | No |
|
|
146
|
+
| `onProgress` | `function` | Async Callback function that receives a `progress` object (structure TBD). | No |
|
|
147
|
+
| `onComplete` | `function` | Async Callback function invoked when onboarding completes successfully. | No |
|
|
148
|
+
| `onAccessTokenExpiry` | `function` | Async Callback function invoked when the access token expires. The partner should refresh the token and provide a new `actionUrl`. | No |
|
|
149
|
+
| `onReferralTokenExpiry` | `function` | Async Callback function invoked when the referral token expires. The partner should refresh the token and provide a new `actionUrl`. | No |
|
|
150
|
+
| `onCancel` | `function` | Async Callback function invoked when the user cancels onboarding. | No |
|
|
151
|
+
| `onError` | `function` | Async Callback function invoked when an error occurs during onboarding. Receives `error` and `errorInfo` objects. | No |
|
|
152
|
+
| `onSDKError` | `function` | Async Callback function invoked for SDK-specific errors. Receives `error` and `errorInfo` objects. | No |
|
|
153
|
+
| `onContactUs` | `function` | Async Callback function to display contact information when appropriate. | No |
|
|
154
|
+
| `onLoginRequested` | `function` | Async Callback function to fetch access token for STANDALONE_HYBRID merchant. | Yes (only for spoke-only partners) |
|
|
155
|
+
|
|
156
|
+
### Render Onboarding SDK
|
|
125
157
|
|
|
126
158
|
```aiexclude
|
|
127
|
-
|
|
128
|
-
.initialize({
|
|
129
|
-
env: '<<desired_env>>',
|
|
130
|
-
accessToken: '<<partner_access_Token>>',
|
|
131
|
-
actionUrl: '<<action_url_with_referral_token>>',
|
|
132
|
-
style: <<customized_styling_object>>,
|
|
133
|
-
onError: <<callback_OnError_function>>
|
|
134
|
-
onSDKError: <<callback_onSDKError_function>>,
|
|
135
|
-
onProgress: <<callback_onProgress_function>>,
|
|
136
|
-
onComplete: <<callback_onComplete_function>>,
|
|
137
|
-
onAccessTokenExpiry: <<callback_onAccessTokenExpiry_function>>,
|
|
138
|
-
onReferralTokenExpiry: <<callback_onReferralTokenExpiry_function>>,
|
|
139
|
-
onCancel: <<callback_onCancel_function>>,
|
|
140
|
-
onContactUs: <<callback_onContactUs_function>>
|
|
141
|
-
onLoginRequested: <<callback_onLoginRequested_function>>
|
|
142
|
-
})
|
|
159
|
+
Paypal.onboard.render(<containerId>)
|
|
143
160
|
```
|
|
144
161
|
|
|
145
|
-
|
|
162
|
+
`containerId` is the id of the html container to render the onboarding flow
|
|
163
|
+
|
|
164
|
+
#### Example
|
|
165
|
+
|
|
166
|
+
To render Onboarding in the following div:
|
|
146
167
|
|
|
147
168
|
```aiexclude
|
|
148
|
-
|
|
169
|
+
<div id="container"></div>
|
|
149
170
|
```
|
|
150
171
|
|
|
151
|
-
|
|
172
|
+
Render the SDK like:
|
|
152
173
|
|
|
153
|
-
|
|
174
|
+
```aiexclude
|
|
175
|
+
Paypal.onboard.render('container')
|
|
176
|
+
```
|
|
154
177
|
|
|
155
|
-
|
|
156
|
-
| ----------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------- |
|
|
157
|
-
| `accessToken` | `string` | The access token for authentication. | Yes |
|
|
158
|
-
| `env` | `string` | The env that should be used. Possible values are 'sandbox' or 'production' | No (defaults to 'production' for npm integrations) |
|
|
159
|
-
| `actionUrl` | `string` | The URL containing the `referralToken`. | Yes |
|
|
160
|
-
| `cancelUrl` | `string` | The URL to return from onboarding on cancel. | No |
|
|
161
|
-
| `style` | `object` | Styling options (see below). | No |
|
|
162
|
-
| `onProgress` | `function` | Callback function that receives a `progress` object (structure TBD). | No |
|
|
163
|
-
| `onComplete` | `function` | Callback function invoked when onboarding completes successfully. | No |
|
|
164
|
-
| `onAccessTokenExpiry` | `function` | Callback function invoked when the access token expires. The partner should refresh the token and provide a new `actionUrl`. | No |
|
|
165
|
-
| `onReferralTokenExpiry` | `function` | Callback function invoked when the referral token expires. The partner should refresh the token and provide a new `actionUrl`. | No |
|
|
166
|
-
| `onCancel` | `function` | Callback function invoked when the user cancels onboarding. | No |
|
|
167
|
-
| `onError` | `function` | Callback function invoked when an error occurs during onboarding. Receives `error` and `errorInfo` objects. | No |
|
|
168
|
-
| `onSDKError` | `function` | Callback function invoked for SDK-specific errors. Receives `error` and `errorInfo` objects. | No |
|
|
169
|
-
| `onContactUs` | `function` | Callback function to display contact information when appropriate. | No |
|
|
170
|
-
| `onLoginRequested` | `function` | Callback function to fetch access token for spoke-only merchant. | Yes (only for spoke-only partners) |
|
|
178
|
+
## Servicing SDK Reference
|
|
171
179
|
|
|
172
|
-
###
|
|
180
|
+
### Install Servicing SDK
|
|
173
181
|
|
|
174
|
-
|
|
182
|
+
```aiexclude
|
|
183
|
+
import { servicing } from "@paypal/merchant-onboarding-sdk/servicing";
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
### Initialize And Render Servicing SDK
|
|
187
|
+
|
|
188
|
+
```aiexclude
|
|
189
|
+
PayPal.servicing.<MODULE>.initialize(props)
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
example: `PayPal.servicing.ACTION_WIDGETS.initialize(props)`
|
|
193
|
+
|
|
194
|
+
#### Supported modules
|
|
195
|
+
|
|
196
|
+
| Supported Module Names |
|
|
197
|
+
| ------------------------------------ |
|
|
198
|
+
| MONEY |
|
|
199
|
+
| BANKS |
|
|
200
|
+
| ACTION_WIDGETS |
|
|
201
|
+
| PAID_FEATURES |
|
|
202
|
+
| PHONE |
|
|
203
|
+
| LIFT_LIMITS |
|
|
204
|
+
| LANGUAGE_EDIT |
|
|
205
|
+
| TIMEZONE_EDIT |
|
|
206
|
+
| INSIGHTS |
|
|
207
|
+
| REPORT |
|
|
208
|
+
| PAYMENT_PREFERENCES |
|
|
209
|
+
| VIEW_BUSINESS_PROFILE |
|
|
210
|
+
| CSM |
|
|
211
|
+
| ACCOUNT_SETTINGS_PAYMENT_PREFERENCES |
|
|
212
|
+
| MERCHANT_LISTING |
|
|
213
|
+
| ACTIVITY_REFUND |
|
|
214
|
+
| WORKING_CAPITAL |
|
|
215
|
+
|
|
216
|
+
### Servicing Props Reference
|
|
217
|
+
|
|
218
|
+
| Parameter | Type | Description | Required |
|
|
219
|
+
| ------------------------- | ---------- | -------------------------------------------------------------------------- | -------------------------------------------------- |
|
|
220
|
+
| `targetElementId` | `string` | The id of the HTML container to render the Servicing SDK | Yes |
|
|
221
|
+
| `getAccessToken` | `function` | Async Callback function that returns spoke account access token | Yes |
|
|
222
|
+
| `env` | `string` | The env that should be used. Possible values are 'sandbox' or 'production' | No (defaults to 'production' for npm integrations) |
|
|
223
|
+
| `partnerName` | `string` | The Partner's name | No |
|
|
224
|
+
| `partnerHostedModuleUrls` | `object` | The URL to return from onboarding on cancel. | No |
|
|
225
|
+
| `style` | `object` | Styling options (see below, same as onboarding). | No |
|
|
175
226
|
|
|
176
227
|
### Styling Options
|
|
177
228
|
|
|
@@ -180,33 +231,9 @@ maintain a design system, such as spacing, color, size, space, motion, etc.
|
|
|
180
231
|
Styles can be passed using these tokens and Paypal will override its Theme with
|
|
181
232
|
the tokens passed using vanilla-extract.
|
|
182
233
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
desire tokens following the PayPal Theme token format(see example in
|
|
187
|
-
[Installation](#installation))
|
|
188
|
-
|
|
189
|
-
## CDN Information
|
|
190
|
-
|
|
191
|
-
### Current CDN locations
|
|
192
|
-
|
|
193
|
-
| Environment | sdk to use |
|
|
194
|
-
| ----------- | ----------------------------------------------------------------------------------------------------------------- |
|
|
195
|
-
| Production | https://www.paypalobjects.com/sdk/v1/js/partner.js https://www.paypalobjects.com/sdk/v1/js/partner.js.LICENSE.txt |
|
|
196
|
-
| Sandbox | https://www.paypalobjects.com/sdk/v1/js/sandbox.partner.js |
|
|
197
|
-
| Staging | https://www.paypalobjects.com/sdk/v1/js/staging.partner.js |
|
|
198
|
-
| Development | https://www.paypalobjects.com/sdk/v1/js/development.partner.js |
|
|
199
|
-
|
|
200
|
-
## CDN distribution:
|
|
201
|
-
|
|
202
|
-
Once distribution files are generated and tested locally using demo pages, you
|
|
203
|
-
can deploy them by
|
|
234
|
+
To override with specific styles just add the `style` object to the props in
|
|
235
|
+
onboard.initialize({}) as shown in
|
|
236
|
+
[Initialize and Render](#2-initialize-sdk-in-your-app-and-render)
|
|
204
237
|
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
Namespaces" list, please contact @besierra or @augreer
|
|
208
|
-
3. click on Files
|
|
209
|
-
4. Start a new upload
|
|
210
|
-
5. Test using staging url
|
|
211
|
-
6. Send for approval
|
|
212
|
-
7. You can deploy once approved
|
|
238
|
+
The Style object takes the format of a vanilla-extract Theme:
|
|
239
|
+
https://vanilla-extract.style/documentation/theming/
|
package/dist/index.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ export interface OnboardOptions {
|
|
|
10
10
|
onError?: (error: any, errorInfo?: any) => void;
|
|
11
11
|
onSDKError?: (error: any, errorInfo?: any) => void;
|
|
12
12
|
onContactUs?: () => void;
|
|
13
|
+
onLoginRequested?: (payerId: string) => Promise<string>;
|
|
13
14
|
[key: string]: any;
|
|
14
15
|
}
|
|
15
16
|
|
|
@@ -18,12 +19,13 @@ export interface Onboard {
|
|
|
18
19
|
initialize(props: OnboardOptions): this;
|
|
19
20
|
onProgress(progress: any): void;
|
|
20
21
|
onComplete(): void;
|
|
21
|
-
onAccessTokenExpiry():
|
|
22
|
+
onAccessTokenExpiry(): Promise<string>;
|
|
22
23
|
onReferralTokenExpiry(): void;
|
|
23
24
|
onCancel(): void;
|
|
24
25
|
onError(error: any, errorInfo?: any): void;
|
|
25
26
|
onSDKError(error: any, errorInfo?: any): void;
|
|
26
27
|
onContactUs(): void;
|
|
28
|
+
onLoginRequested(payerId: string): Promise<string>;
|
|
27
29
|
render(elementId: string): this;
|
|
28
30
|
_getClientToken(): Promise<string>;
|
|
29
31
|
}
|