@adyen/kyc-components/README.md

This guide assumes that you have already an account with Adyen. A legalEntity needs to be created, and you need to have a `legalEntityId` to instatiate a Component.

# Quick start

This guide assumes that you have already an account with Adyen. A legalEntity needs to be created, and you need to have a `legalEntityId` to instatiate a Component.

## Installing

Install the library

```sh
npm install @adyen/kyc-components
```

## Available Adyen Components

- [Transfer Instrument Configuration](https://docs.adyen.com/platforms/onboard-users/components?component=Transfer+Instrument&integration=components&version=4.0.x#transfer-instrument-configuration-component) for adding, editing and linking bank accounts.
- [Transfer Instrument Management](https://docs.adyen.com/platforms/onboard-users/components?component=Transfer+Instrument&integration=components&version=4.0.x#transfer-instrument-management-component), a UI for the above.

## Usage

Import the component you need, and use it as a custom-element.

Check [component properties](https://docs.adyen.com/platforms/onboard-users/components?component=Transfer+Instrument&integration=components&version=4.0.x#configure-component-properties) for details on what the properties are.

```jsx
import "@adyen/kyc-components/transfer-instrument-configuration";

// in your HTML (or JSX, templating, etc.)

<adyen-transfer-instrument-configuration
  locale="en-US"
  environment="test"
  rootlegalentityid="myLegalEntityId"
  transferinstrumentid="testTransferInstrumentId"
  fetchToken="fetchToken"
></adyen-transfer-instrument-configuration>
```

> [!WARNING]
> Custom elements need closing tags, which means you need to have the closing `</adyen-transfer-instrument-configuration>`

## FetchToken and Authentication

The [fetchToken](https://docs.adyen.com/platforms/onboard-users/components?component=Transfer+Instrument&integration=components&version=4.0.x#id732020335) function needs to return a token. You will need to have an endpoint set up in your backend that returns `{ token: 'adyenValidToken' }`. An endpoint is needed on your side in order to not expose your Adyen credentials in the frontend, and to be able to get a token with more granular permissions.

## Done

This is all you need to get started. After integrating successful with the first Components, integrating others will be much easier, since the instantiation process is the same.