@adyen/kyc-components

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
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	this now contains extended properties, see 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.
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). 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.
handleCreateLegalEntity	Required	(data: LegalEntity) => Promise<LegalEntity>	method for creating a legal entity using the legalEntities API.
handleUpdateLegalEntity	Required	(data: LegalEntity, legalEntityId: string) => Promise<LegalEntity>	method for updating a legal entity using the legalEntities API.
handleCreateIdDocument	Required	(data: Document) => Promise<Document>	method for creating a document using the documents API.
handleUpdateIdDocument	Required	(data: Document, , documentId: string) => Promise<Document>	method for updating a document using the documents API.

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 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