@adyen/kyc-components 1.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Adyen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,104 @@
+# Adyen KYC Components
+
+Adyen Kyc-components provides the required forms/elements/dropins to build up an onboarding flow based
+on a legalentity.
+
+## Setup
+
+1. Including the sdk
+
+    - if using npm package
+
+    ```
+    import AdyenKyc from '@adyen/kyc-components';
+    ```
+
+    - if using umd format, include below in the html file
+
+    ```
+    <link href="/kycexternalapi/static/sdk/1.0.0/adyen-kyc-components.css" rel="stylesheet"/>
+    <script src="/kycexternalapi/static/sdk/1.0.0/adyen-kyc-components.js"  type="text/javascript" ></script>
+    ```
+
+2. Initializing the sdk
+
+    ```
+       const kyc = new AdyenKyc({
+           countryCode: 'US',
+           clientKey: '',
+           environment: 'https://kyc-test.adyen.com/kyc' OR 'https://kyc-live.adyen.com/kyc'
+       });
+    ```
+
+3. Including form Components
+
+    ```
+        const form = kyc.create('personalDetails',{
+            onChange: val => { console.log(val) }
+        });
+
+        form.mount('#container');
+    ```
+
+Configurations based on a country are underway, each form component will be capable of take
+in a country as prop based on which it will be rendered. If no country is provided the country
+value provided at initialization step will be used to configure.
+
+## Configuration
+
+#### **`AdyenKyc(config: Config)`**
+
+**`Config`**
+
+| Key           | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `locale`      | `en-US` | the locale country code                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `country`     | `US`    | the resident country code                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `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) |
+| `environment` |         | the domain where the KYC external api can be contacted.                                                                                                                                                                                                                                                                                                                                                                                     |
+
+#### **`AdyenKyc.create(dropinComponentName: ComponentName, options: Options)`**
+
+**`ComponentName`**
+Possible values are:
+| Value | Description |
+|---|---|
+| `'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. |
+| `'individualDropin'` | KYC details for a natural person
+| `'companyDropin'` | KYC details for an organization
+| `'payoutAccount'` | KYC details for a transfer intstrument
+
+**`Options`**
+
+| Option                    | Required  | Type                                                                                                                                                                               | Remarks                                                                                                                                                                                                                                                                                                                               |
+| ------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `isReview`                | Optional  | _boolean_                                                                                                                                                                          | Change all forms to be in review mode, essentially starting (and ending) every flow with a summary screen, with buttons changed to confirm and review.                                                                                                                                                                                |
+| `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                                                                                                                                               |
+| `capabilities`            | Required  | _array_                                                                                                                                                                            | List of capabilities that are being requested, e.g. ['PSP_PAYOUT']                                                                                                                                                                                                                                                                    |
+| `readOnly`                | Rrequired | _boolean_                                                                                                                                                                          | to set form to read only mode                                                                                                                                                                                                                                                                                                         |
+| `country`                 | Optional  | _string_                                                                                                                                                                           | overrides resident country set in the Config that initialises the AdyenKyc                                                                                                                                                                                                                                                            |
+| `showInlineErrors`        | Optional  | _boolean_                                                                                                                                                                          | show errors inline or only above form                                                                                                                                                                                                                                                                                                 |
+| `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). |
+| `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_                                                                            |
+| `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}).                                                                                                                                                                                     |
+| `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).                                                                                                                                                                                        |
+| `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}).                                                                                                                                                                                  |
+| `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).                                                                                                                                                                                                    |
+| `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}).                                                                                                                                                                                              |
+
+## Server configuration
+
+To complete the setup of the Adyen SDK the following additional configurations are needed on your server. These configurations are listed below.
+
+### Content Security Policy
+
+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:
+
+| Environment | CSP Section | Value                      |
+| ----------- | ----------- | -------------------------- |
+| Test        | connect-src | https://kyc-test.adyen.com |
+| Test        | font-src    | https://kyc-test.adyen.com |
+| Test        | img-src     | https://kyc-test.adyen.com |
+| Live        | connect-src | https://kyc-live.adyen.com |
+| Live        | font-src    | https://kyc-live.adyen.com |
+| Live        | img-src     | https://kyc-live.adyen.com |