remit2any-ui-sdk

Remit2Any Components

This document provides a brief overview of the Remit2Any components used for KYC (Know Your Customer) and bank account management for users in the United States and India.

Components

remit2any-us-kyc

This component is used for KYC verification of users in the United States.

Attributes:

• env: Environment production/sandbox.
• token: Token from the API.

Usage:

<remit2any-us-kyc env="production" token="token">
  <button slot="button" class="primary-button">USA KYC</button>
</remit2any-us-kyc>

remit2any-us-bank-accounts

This component is used for managing bank accounts of users in the United States.

Attributes:

• env: Environment production/sandbox.
• token: Token from the API.

Usage:

<remit2any-us-bank-accounts env="production" token="token">
  <button slot="button" class="primary-button">USA BANK ACCOUNTS</button>
</remit2any-us-bank-accounts>

remit2any-indian-kyc

This component is used for KYC verification of users in India.

Attributes:

• env: Environment production/sandbox.
• token: Token from the API.

Usage:

<remit2any-indian-kyc env="production" token="token">
  <button slot="button" class="primary-button">India KYC</button>
</remit2any-indian-kyc>

remit2any-indian-bank-accounts

This component is used for managing bank accounts of users in India.

Attributes:

• kyc-unique-reference-id: A unique reference ID associated with the user's KYC.
• auth-token: Authorization token for accessing bank account management features.

Slots:

account-name-input: Input field for the account name. account-number-input: Input field for the account number. confirm-account-number-input: Input field for confirming the account number. ifsc-code-input: Input field for the IFSC code. create-bank-account-button: Button for adding a new bank account.

Usage:

<remit2any-indian-bank-accounts env="production" token="token" @remit2any-delete-bank=${handleDeleteBankAccount}>
  Account name: <input slot="account-name-input" /> Account number:
  <input slot="account-number-input" /> Confirm Account number:
  <input slot="confirm-account-number-input" /> Ifsc code:
  <input slot="ifsc-code-input" />
  <button slot="create-bank-account-button" class="primary-button">
    Add bank account
  </button>
   <button slot="delete-bank-account-button" class="secondary-button">
    Delete bank account
  </button>
</remit2any-indian-bank-accounts>

<script>
  function handleDeleteBankAccount(event) {
    console.log('Delete button clicked', event.detail);

  }
</script>

remit2any-show-bank-accounts

This component is used for displaying a list of bank accounts.

Attributes:

bank-accounts: JSON array of bank account objects with details such as IFSC code, bank name, account name, and account number.

Usage:

<remit2any-show-bank-accounts
  bank-accounts='[
    {
      "ifsc": "100112012",
      "bank_name": "ICICI",
      "name": "Mahesh",
      "account_number": "1234567890"
    },
    {
      "ifsc": "100112012",
      "bank_name": "HSBC",
      "name": "Mahesh",
      "account_number": "1234567890"
    }
  ]'
>
</remit2any-show-bank-accounts>

Notes

Replace "your_unique_reference_id" and "your_auth_token" with the actual unique reference ID and authorization token from the API.

To get the Tokens

Make a request to the following endpoint:

<end_point_url>api/v2/users/<user_id>/access-tokens</user_id></end_point_url>

Include the following headers in your request:

X-Remit2Any-Tenant -
<your_tenant_key>
  X-Remit2Any-AccessKey -
  <your_access_key>
    X-Remit2Any-SecretKey - <your_secret_key></your_secret_key></your_access_key
></your_tenant_key>

Provide the following payload:

{ "accessTokenScope": "US_KYC" }

Available scopes:

• US_KYC
• US_BANK_ACCOUNT
• IN_KYC
• IN_BANK_ACCOUNT

TO Import default styles:

@import '~remit2any-ui-sdk/dist/style.css';

Response:

• The response will contain an accessToken which is base64 encoded.
• By decoding the accessToken, you can get the your_unique_reference_id and your_auth_token.

Using remit2any-bank-alerts widget (KYC Documentation Page)

Step 1: Fetch source payment instruments (/transmitter/source-payment-instruments)

Step 2: Invoke the widget with source payment instruments

<remit2any-bank-alerts debug="true" default-class="r2a-bank" bank-accounts='[
            {
        "guid": "749885f05cc9393865ae02840d9e4f71",
        "name": "Plaid Checking verified",
        "asset": "USD",
        "accountKind": "plaid",
        "environment": "sandbox",
        "bankGuid": "01a1b737f72a8c5dc52d76cdeea71d85",
        "customerGuid": "8088eefed13db07d7a0673005d8ece5e",
        "createdAt": "2023-12-26T07:38:54.016349Z",
        "plaidAccountMask": "0000",
        "plaidAccountName": "Plaid Checking",
        "state": "completed",
        "failureCode": null,
        "availableBalance": null,
        "currentBalance": null
    },
    {
        "guid": "749885f05cc9393865ae02840d9e4f71",
        "name": "Plaid Checking Unverified",
        "asset": "USD",
        "accountKind": "plaid",
        "environment": "sandbox",
        "bankGuid": "01a1b737f72a8c5dc52d76cdeea71d85",
        "customerGuid": "8088eefed13db07d7a0673005d8ece5e",
        "createdAt": "2023-12-26T07:38:54.016349Z",
        "plaidAccountMask": "0000",
        "plaidAccountName": "Plaid Checking",
        "state": "unverified",
        "documentSubmissionUrl": "https://plaid.update.documents.com",
        "verificationState": "VERIFICATION_IN_PROGRESS"
    }
          ]'>
    </remit2any-bank-alerts>

Step 3: Listen to remit2any-bank-alerts-submitted-documents event and update Remit2Any to confirm submission

document.addEventListener("remit2any-bank-alerts-submitted-documents", function(bankAccount) {
        console.log(bankAccount);
        // call `/transmitter/source-payment-instrument/${bankAccount.guid}/document-submission/${bankAccount.identityVerificationDetailsId}`
      })