Add Credit Card and other Payment Methods icons to your React Native app

by React Native Example

react-native-payment-icons

There wasn't a package for displaying credit cards and other payment methods icons in React Native. Wasn't!

We use SVGs that were transormed into React Native JSX, so there isn't a loading time to show them up.

The SVGs are compressed / optimized by ~60%. It uses the Flat Rounded images from aaronfagan/svg-credit-card-payment-icons, and I intend to support other icon packs in the future, in a tree-shakable way.

If you need to discover the card type (visa, mastercard etc), you can use the credit-card-type package.

My App using this package!

? Installation

  1. Install react-native-svg

  2. Install this package:

npm install react-native-payment-icons
# or
yarn add react-native-payment-icons

? Usage

import { PaymentIcon } from 'react-native-payment-icons'

<PaymentIcon type='visa'/>
<PaymentIcon type='master' width={50}/>
<PaymentIcon type='paypal' height='30%'/>
  • You must set the type property to the desired credit card / payment method.

Available types and their images:

When there is more than one type for the same image, it's an alias!

Type Image
alipay
american-express
amex
diners-club
diners
discover
elo
hiper
hipercard
jcb
maestro
mastercard
master
mir
paypal
unionpay
visa
generic
cvv
code

Images from aaronfagan/svg-credit-card-payment-icons

  • You shall define either width or height. No need to define both, as it's set aspectRatio: 780 / 500, the width / height of the SVGs. If neither is defined, width defaults to 40.

  • It also accepts all the props of the Svg component, like style.

  • On invalid type, it defaults to generic.

? Changelog

? Dev

How to setup your own images! If you just want to use the package, you may ignore this!

  • To transform the SVGs, download the .svgs from svg-credit-card-payment-icons. I used the svgsSrc styled images. Store them in ./svgsSrc/.

  • If you want to add your own images, be sure that their width are 780 and height 500, to have the same ratio as the others.

You may run npm run svg that executes the two steps below!

  • Run svgo to compress the SVGs. The best here is -p 0 which sets the precision to 0, decreasing the total size from 96KB to 38KB. The quality loss isn't noticeable unless comparing, except in mastercard and diners that have some artifacts, so we set precision 1 for them. There are other svgo plugins set in svgo.config.js file that are automatically applied when running svgo at the same cwd.

npx svgo -f ./svgsSrc -o ./svgsCompressed -p 0

npx svgo -p 1 ./svgsSrc/mastercard.svg ./svgsSrc/diners.svg -o ./svgsCompressed/mastercard.svg ./svgsCompressed/diners.svg

  • Then, transform them into React Native format using svgr. --native for generating code for React Native, --typescript for .tsx. We store them under src/components:

npx @svgr/cli ./svgsCompressed --out-dir src/components --native --typescript

There may happen some errors in the RN convertion you may need to deal manually. If happens, npm run build will throw them up.

  • An index.tsx will be automatically created re-exporting all the components.

  • If adding or removing images, you will need to change src/index.tsx to add / remove the components in the dictionary.

  • If you want to compile the TS files into JS, npm run build.

GitHub

View Github