@vtex/payment-flags

payment-flags

A React component which renders payment flag SVGs. They are easier to handle and look really crisp on any size, and also use the most recent branding from each carrier.

Setup

Through NPM:

$ npm install @vtex/payment-flags

import PaymentFlagPicker from '@vtex/country-codes/modules/PaymentFlagPicker'

Through vtex.io:

Add vtex.payment-flags to your manifest.json dependencies

import { PaymentFlagPicker } from 'vtex.payment-flags'

API

PaymentFlagPicker

This component takes in a code representing one of VTEX's paymentSystem codes, fetches the SVG component related to that payment, and provides it as argument to a children function. You should render the component inside a container with the desired height, as they will fit 100% of such height. If a component associated with that paymentSystem is not found, such argument will be null.

Props

• paymentSystem: Code representing a paymentSystem from the Payments API
• children: Function whose argument is the component containing the SVG of the payment system (or null)

PaymentFlagPicker.propTypes = {
  paymentSystem: PropTypes.string.isRequired,
  children: PropTypes.func.isRequired,
}

Example

// Shall render an Amex card with height 'h2'
<PaymentFlagPicker paymentSystem={'1'}>
  {FlagComponent =>
    FlagComponent && (
      <div className="h2">
        <FlagComponent />
      </div>
    )
  }
</PaymentFlagPicker>

Contributing

There are still a few credit cards missing (Aura, Banricompras and some Colombian ones). Would be nice to have SVGs for Boleto, Apple Pay, Cash, and other stuff, and also a default SVG to render when nothing is found.

There are more flags available from where I took the first ones (here). Designers willing to help develop more flags should use that list as a style reference.

Author: Gustavo Silva (@​​​​​​​​​​​​​​​​​​​​​a​​kaFTS), with initial SVGs obtained from muffinresearch/payment-icons

This project is licensed under the MIT License.