@belvo/payments-atoms

Belvo Payments Atoms

Library of native web components that aims to facilitate integrating with Belvo's Payments Widget.

Visit Belvo Payments Atoms Docs for more detailed instructions.

🚀 Getting started

Installation

npm install @belvo/payments-atoms

Initialization

Add a default import from @belvo/payments-atoms and call its init function with a callback so you're able to retrieve the selected payer institution. For example:

import BelvoPaymentsAtoms from '@belvo/payments-atoms'

BelvoPaymentsAtoms.init({
  bankShortcuts: {
    // This callback is executed when the user selects a bank.
    // It returns the payer institution, containing its id, display_name and icon_logo.
    callback: (payerInstitution) => setPayerInstitutionId(payerInstitution.id),
  },
})

Usage Example

Once initialized, simply add the desired web component wherever you wish in your web application.

<belvo-payments-grid />

🇹🇸 TypeScript

Belvo Payments Atoms has TypeScript support and provides a set of types that you can import into your project. We export them by default and you are able to import them as named imports like:

import type { Callback, Country, Institution } from '@belvo/payments-atoms'

:busts_in_silhouette: Contributing

If you wish to submit a pull request, please be sure check the items on this list:

• Open an issue to discuss about the proposed changes
• Tests related to the changed code were executed
• The source code has been coded following the OWASP security best practices (https://owasp.org/www-pdf-archive/OWASP_SCP_Quick_Reference_Guide_v2.pdf).
• Commit message following the conventional commits specification.

Setting up the project

1. Fork the repository and clone it.

2. Install the dependencies on the repository:

   npm install
   

3. Start storybook:

   npm run storybook
   

Setting up the docs

Make sure you have the latest Ruby version installed.

1. Open up your terminal and install the bundler gem on version 2.4.22:

   gem install bundler -v 2.4.22
   

2. Go to the docs folder and install the dependencies:

   bundle install
   

3. Run bundle exec jekyll serve to serve the docs locally.

🧪 Automated testing

Unit tests

Once you have all the dependencies installed, execute the following command to run unit tests:

npm run test

Or run the following if you want them to run with coverage:

npm run coverage

Lint and Prettier

VSCode settings

#.vscode/settings.json

{
  "editor.formatOnSave": true,
  "prettier.requireConfig": true,
  "vetur.validation.template": false,
  "eslint.format.enable": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}