@adyen/kyc-components 3.13.0 → 3.13.3
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 +34 -138
- package/dist/es/adyen-kyc-components.es.js +1 -1
- package/dist/style.css +1813 -0
- package/dist/types/components/UIElement.d.ts +1 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,163 +1,59 @@
|
|
|
1
|
-
|
|
1
|
+
# Adyen KYC Components (Onboarding Components)
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
`adyen-kyc-components` provides the required pieces to build an onboarding flow based on a legal entity.
|
|
3
|
+
`adyen-kyc-components` provides the required pieces to build an onboarding flow based on a legal entity. To onboard and verify users, you need to create a user interface (UI) to collect user data. To speed up building your integration, Adyen offers onboarding components. You can integrate these components into your UI to let your users enter their data. The component then uses the entered data to create the relevant resource. This means you don't need to implement the API call to create the resource yourself.
|
|
6
4
|
|
|
7
5
|
## Setup
|
|
8
6
|
|
|
9
|
-
1.
|
|
7
|
+
1. Install and import the npm package
|
|
10
8
|
|
|
11
|
-
-
|
|
9
|
+
- Install the node package
|
|
12
10
|
|
|
13
|
-
```
|
|
14
|
-
|
|
11
|
+
```
|
|
12
|
+
npm install @adyen/kyc-components --save
|
|
15
13
|
```
|
|
16
14
|
|
|
17
|
-
-
|
|
15
|
+
- Import the package and the style sheet in your application
|
|
18
16
|
|
|
19
17
|
```
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
import AdyenKyc from '@adyen/kyc-components';
|
|
19
|
+
import '@adyen/kyc-components/styles.css';
|
|
22
20
|
```
|
|
23
21
|
|
|
24
22
|
2. Initializing the sdk
|
|
25
23
|
|
|
26
24
|
```js
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
25
|
+
const adyenKycHandler = new AdyenKyc({
|
|
26
|
+
locale: 'en-US',
|
|
27
|
+
country: 'US',
|
|
28
|
+
environment: 'https://test.adyen.com',
|
|
29
|
+
sdkToken: token,
|
|
30
|
+
getSdkToken,
|
|
31
|
+
});
|
|
32
32
|
```
|
|
33
33
|
|
|
34
|
-
3. Including
|
|
34
|
+
3. Including createTransferInstrument component
|
|
35
35
|
|
|
36
36
|
```js
|
|
37
|
-
const
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
37
|
+
const createTransferInstrumentComponent = adyenKycHandler
|
|
38
|
+
.create('createTransferInstrumentComponent', {
|
|
39
|
+
legalEntityId,
|
|
40
|
+
transferInstrumentId, // Optional
|
|
41
|
+
openBankingPartnerConfigId: 'YourBrandOBConfigId',
|
|
42
|
+
settings: {
|
|
43
|
+
allowIntraRegionCrossBorderPayout: true, // Optional
|
|
44
|
+
allowBankAccountFormatSelection: true, // Optional
|
|
45
|
+
},
|
|
46
|
+
onSubmitSuccess: (submittedData) => {},
|
|
47
|
+
})
|
|
48
|
+
.mount('#create-transfer-instrument-container'); // Mount to the container you created
|
|
44
49
|
```
|
|
45
50
|
|
|
46
|
-
|
|
47
|
-
in a country as a prop, based on which it will be rendered. If no country is provided the country
|
|
48
|
-
value provided during initialization will be used.
|
|
49
|
-
|
|
50
|
-
## Configuration
|
|
51
|
-
|
|
52
|
-
#### **`AdyenKyc(config: Config)`**
|
|
53
|
-
|
|
54
|
-
**`Config`**
|
|
55
|
-
|
|
56
|
-
| Key | Default | Description |
|
|
57
|
-
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
58
|
-
| `locale` | `en-US` | the locale country code |
|
|
59
|
-
| `country` | `US` | the resident country code |
|
|
60
|
-
| `clientKey` | | the client key to contact the KYC external API where the configuration API lives. In order for the SDK to work, your webpage needs to configure a clientKey that can be used by the SDK. The procedure for obtaining a `clientKey` for KYC Components are the same as for our other Web components. The details are listed on [docs.adyen.com](https://docs.adyen.com/development-resources/client-side-authentication#get-your-client-key) |
|
|
61
|
-
| `environment` | | the domain where the KYC external api can be contacted. |
|
|
62
|
-
|
|
63
|
-
#### **`AdyenKyc.create(dropinComponentName: ComponentName, options: Options)`**
|
|
64
|
-
|
|
65
|
-
**`ComponentName`**
|
|
66
|
-
Possible values are:
|
|
67
|
-
| Value | Description |
|
|
68
|
-
|---|---|
|
|
69
|
-
| `'taskList'` **recommended** | Let the SDK list the tasks that require completion. The navigation between each task will be handled internally. The rendering of drop-ins and navigation will be decided automatically. |
|
|
70
|
-
| `'individualDropin'` | KYC details for a natural person
|
|
71
|
-
| `'companyDropin'` | KYC details for an organization
|
|
72
|
-
| `'payoutAccount'` | KYC details for a transfer instrument
|
|
73
|
-
|
|
74
|
-
**`Options`**
|
|
75
|
-
|
|
76
|
-
| Option | Required | Type | Remarks |
|
|
77
|
-
| ------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
78
|
-
| `legalEntityResponse` | Required | Legal Entity _object_ that is returned from the [Legal Entities API](https://docs.adyen.com/api-explorer/#/balanceplatform/v1/get/legalEntities/{id}) | this now contains extended properties, see [legal-entity.ts](https://github.com/Adyen/adyen-kyc-components/blob/main/packages/lib/src/core/models/api/legal-entity.ts) for more details |
|
|
79
|
-
| `capabilities` | Required | _array_ | List of capabilities that are being requested, e.g. ['PSP_PAYOUT'] |
|
|
80
|
-
| `readOnly` | Rrequired | _boolean_ | to set form to read only mode |
|
|
81
|
-
| `country` | Optional | _string_ | overrides resident country set in the Config that initialises the AdyenKyc |
|
|
82
|
-
| `showInlineErrors` | Optional | _boolean_ | show errors inline or only above form |
|
|
83
|
-
| `onChange` | Optional | _(state) => void_ | method that passes on the entire state when changes to the state of the forms have changed. _state_ in the case of the Individual form will be of type [IndividualSchema](https://github.com/Adyen/adyen-kyc-components/blob/main/packages/lib/src/components/Individual/types.ts#:~:text=export%20interface-,IndividualSchema,-%7B). |
|
|
84
|
-
| `onSubmit` | Optional | _(state) => void_ | method that passed on the entire state _after_ submitted data has been handled by the backend (successfully received a 200 response). <br />_i.e. User clicks form submit -> API handler promise fired -> promise resolves successfully -> fires onSubmit_ |
|
|
85
|
-
| `handleGetLegalEntity` | Required | _(legalEntityId: string) => Promise\<LegalEntity\>_ | method for getting a Legal Entity using the [legalEntities API](https://docs.adyen.com/api-explorer/#/balanceplatform/v1/get/legalEntities/{id}). |
|
|
86
|
-
| `handleCreateLegalEntity` | Required | _(data: [LegalEntity](https://github.com/Adyen/adyen-kyc-components/blob/main/packages/lib/src/core/models/api/legal-entity.ts)) => Promise\<LegalEntity\>_ | method for creating a legal entity using the [legalEntities API](https://docs.adyen.com/api-explorer/#/balanceplatform/v1/post/legalEntities). |
|
|
87
|
-
| `handleUpdateLegalEntity` | Required | _(data: [LegalEntity](https://github.com/Adyen/adyen-kyc-components/blob/main/packages/lib/src/core/models/api/legal-entity.ts), legalEntityId: string) => Promise\<LegalEntity\>_ | method for updating a legal entity using the [legalEntities API](https://docs.adyen.com/api-explorer/#/balanceplatform/v1/patch/legalEntities/{id}). |
|
|
88
|
-
| `handleCreateIdDocument` | Required | _(data: [Document](https://github.com/Adyen/adyen-kyc-components/blob/main/packages/lib/src/core/models/api/document.ts)) => Promise\<Document\>_ | method for creating a document using the [documents API](https://docs.adyen.com/api-explorer/#/balanceplatform/v1/post/documents). |
|
|
89
|
-
| `handleUpdateIdDocument` | Required | _(data: [Document](https://github.com/Adyen/adyen-kyc-components/blob/main/packages/lib/src/core/models/api/document.ts), , documentId: string) => Promise\<Document\>_ | method for updating a document using the [documents API](https://docs.adyen.com/api-explorer/#/balanceplatform/v1/patch/documents/{id}). |
|
|
90
|
-
|
|
91
|
-
## Server configuration
|
|
92
|
-
|
|
93
|
-
To complete the setup of the Adyen SDK the following additional configurations are needed on your server. These configurations are listed below.
|
|
94
|
-
|
|
95
|
-
### Content Security Policy
|
|
96
|
-
|
|
97
|
-
In order for the SDK to reach out to the Adyen servers for configuration requests and assets, additional [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) need to be configured. On top of your existing configration the following domains need to be added:
|
|
98
|
-
|
|
99
|
-
| Environment | CSP Section | Value |
|
|
100
|
-
| ----------- | ----------- | -------------------------- |
|
|
101
|
-
| Test | connect-src | https://kyc-test.adyen.com |
|
|
102
|
-
| Test | font-src | https://kyc-test.adyen.com |
|
|
103
|
-
| Test | img-src | https://kyc-test.adyen.com |
|
|
104
|
-
| Live | connect-src | https://kyc-live.adyen.com |
|
|
105
|
-
| Live | font-src | https://kyc-live.adyen.com |
|
|
106
|
-
| Live | img-src | https://kyc-live.adyen.com |
|
|
107
|
-
|
|
108
|
-
## Mock API
|
|
109
|
-
|
|
110
|
-
[The `server` folder contains the mock API](./server). It is used to develop without running the Adyen platform.
|
|
111
|
-
It is also used during e2e testing in CI jobs.
|
|
112
|
-
|
|
113
|
-
## End-to-end tests
|
|
114
|
-
|
|
115
|
-
End-to-end tests live in the [tests](./tests) folder. The E2E test framework we use is [Playwright](https://playwright.dev/).
|
|
116
|
-
|
|
117
|
-
To run the e2e tests locally, simply do `npm run test:e2e -- --project {browser}`, where `{browser}` can be one of:
|
|
118
|
-
|
|
119
|
-
- `local-chrome`: uses the Google Chrome installation already present on your machine.
|
|
120
|
-
- `chromium`: uses the latest stable Chromium binary installed via `playwright install`.
|
|
121
|
-
This is usually a major version ahead of Chrome & Edge.
|
|
122
|
-
- `firefox`: uses the latest stable Firefox binary installed via `playwright install`.
|
|
123
|
-
- ~~`webkit` : uses the latest stable WebKit binary installed via `playwright install`~~ (currently disabled)
|
|
124
|
-
|
|
125
|
-
For more info on the available browsers, [see here](https://playwright.dev/docs/browsers).
|
|
126
|
-
|
|
127
|
-
By default, Playwright runs in headed mode in development, and headless in CI.
|
|
128
|
-
|
|
129
|
-
### Debugging E2E tests
|
|
130
|
-
|
|
131
|
-
When you need to figure out why a test is (or isn't) failing, `npm run test:e2e:debug` is your friend.
|
|
132
|
-
There are a few tools here which come in handy:
|
|
133
|
-
|
|
134
|
-
- [Playwright Inspector](https://playwright.dev/docs/debug#playwright-inspector):
|
|
135
|
-
This tool allows you to explore the selectors Playwright is checking and see what user actions it is performing.
|
|
136
|
-
- `.only()`: Add this to any of your tests to make it the only test Playwright runs.
|
|
137
|
-
- `page.pause()`: You can use this to make Playwright pause execution (and open the inspector) at a specific point in any test.
|
|
138
|
-
- Dev Tools: You can use the browser's dev tools as normal when inspecting a Playwright test.
|
|
139
|
-
For example, you can see what network requests are being made in the network tab.
|
|
140
|
-
Playwright will also add a `window.playwright` object you can use to test out [locators](https://playwright.dev/docs/locators).
|
|
141
|
-
|
|
142
|
-
For more info on debugging Playwright tests, [see here](https://playwright.dev/docs/debug).
|
|
143
|
-
|
|
144
|
-
### Viewing traces
|
|
145
|
-
|
|
146
|
-
When the E2E tests fail on CI, it can be quite difficult to figure out why. For that, we can use [Playwright's trace viewer](https://playwright.dev/docs/trace-viewer).
|
|
147
|
-
This tool lets us view a recorded test run and "replay" what happened. It includes screenshots, logs of browser console & network requests, and more.
|
|
148
|
-
|
|
149
|
-
To use it, first download the report artifact for the given test run from GitHub:
|
|
150
|
-
|
|
151
|
-
1. Find your test run [here](https://github.com/Adyen/adyen-kyc-components/actions/workflows/e2e-test.yml) (or click on the check from the PR).
|
|
152
|
-
2. If the tests failed, you should see `playwright-report-{xxxxx}` under _Artifacts_.
|
|
153
|
-
3. Download this file and unzip it. Inside, you will find a `data` directory which contains more `.zip`s. Each of these is the trace for a single test.
|
|
154
|
-
4. To view a trace, upload the `.zip` xto [trace.playwright.dev](https://trace.playwright.dev/).
|
|
51
|
+
See our [Onboarding components documentation](https://docs.adyen.com/platforms/onboard-users/onboarding-components/) for more details.
|
|
155
52
|
|
|
156
|
-
##
|
|
53
|
+
## Supported countries/regions
|
|
157
54
|
|
|
158
|
-
|
|
159
|
-
For more information see the [documentation for static assets](./assets/README.md).
|
|
55
|
+
You can use the Onboarding components to onboard users operating in countries listed [here](https://docs.adyen.com/platforms/onboard-users/onboarding-components/#supported-countries-regions).
|
|
160
56
|
|
|
161
|
-
##
|
|
57
|
+
## Supported languages
|
|
162
58
|
|
|
163
|
-
|
|
59
|
+
You can localize the Onboarding components by setting `locale` parameter to one of the supported languages listed [here](https://docs.adyen.com/platforms/onboard-users/onboarding-components/#supported-languages).
|
|
@@ -35014,7 +35014,7 @@ const ConfigurationApiProvider = ({
|
|
|
35014
35014
|
isEmbeddedDropin,
|
|
35015
35015
|
loadingContext
|
|
35016
35016
|
} = authContext;
|
|
35017
|
-
const sdkVersion = "3.13.
|
|
35017
|
+
const sdkVersion = "3.13.3";
|
|
35018
35018
|
useAnalytics({
|
|
35019
35019
|
onUserEvent,
|
|
35020
35020
|
legalEntityId: rootLegalEntityId,
|