{"id":16528925,"url":"https://github.com/ftzi/react-native-payment-icons","last_synced_at":"2025-07-10T06:34:34.744Z","repository":{"id":115671389,"uuid":"437717531","full_name":"ftzi/react-native-payment-icons","owner":"ftzi","description":"Add Credit Card and other Payment Methods icons to your React Native app!","archived":false,"fork":false,"pushed_at":"2025-04-03T23:33:32.000Z","size":450,"stargazers_count":18,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-04T00:26:19.214Z","etag":null,"topics":["card","credit","credit-card","creditcard","icon","icons","logo","logos","mastercard","paypal","react-native","visa"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ftzi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-13T02:58:17.000Z","updated_at":"2025-04-03T23:33:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"7c0cdbae-b01d-4fa7-a601-c3f1d0079e2a","html_url":"https://github.com/ftzi/react-native-payment-icons","commit_stats":null,"previous_names":["hfantauzzi/react-native-payment-icons","brfantauzzi/react-native-payment-icons","ftzi/react-native-payment-icons","srbrahma/react-native-payment-icons"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ftzi/react-native-payment-icons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ftzi%2Freact-native-payment-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ftzi%2Freact-native-payment-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ftzi%2Freact-native-payment-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ftzi%2Freact-native-payment-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ftzi","download_url":"https://codeload.github.com/ftzi/react-native-payment-icons/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ftzi%2Freact-native-payment-icons/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264538582,"owners_count":23624436,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["card","credit","credit-card","creditcard","icon","icons","logo","logos","mastercard","paypal","react-native","visa"],"created_at":"2024-10-11T17:42:15.551Z","updated_at":"2025-07-10T06:34:34.738Z","avatar_url":"https://github.com/ftzi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n[![npm](https://img.shields.io/npm/v/react-native-payment-icons)](https://www.npmjs.com/package/react-native-payment-icons)\n[![TypeScript](https://badgen.net/npm/types/env-var)](http://www.typescriptlang.org/)\n[![​npm​](https://img.shields.io/npm/dt/react-native-payment-icons)](https://www.npmjs.com/package/react-native-payment-icons)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n[![](https://img.shields.io/badge/-Contribute%20with%20a%20%E2%98%85!-%23ffd700)](https://github.com/SrBrahma/react-native-payment-icons)\n\n\u003c/div\u003e\n\n# react-native-payment-icons\n\nThere wasn't a package for displaying credit cards and other payment methods icons in React Native. **Wasn't!**\n\nWe use SVGs that were transormed into React Native JSX, so there isn't a loading time to show them up in Expo Go / Expo Dev Client, as images are transferred on demand.\n\nThe SVGs are compressed / optimized by ~60%. It uses the Flat Rounded images from [`aaronfagan/svg-credit-card-payment-icons`](https://github.com/aaronfagan/svg-credit-card-payment-icons), and I intend to support other icon packs in the future, in a tree-shakable way.\n\nIf you need to discover the card type (`visa`, `mastercard` etc), you can use the [credit-card-type](https://www.npmjs.com/package/credit-card-type) package.\n\n\u003cimg src=\"https://github.com/SrBrahma/react-native-payment-icons/raw/main/resources/example.jpg\" width=\"30%\" height=\"30%\" /\u003e\n\n\u003e My App using this package!\n\n## 💿 Installation\n\n1) Install [react-native-svg](https://github.com/react-native-svg/react-native-svg)\n\n2) Install this package:\n```bash\nnpm install react-native-payment-icons\n# or\nyarn add react-native-payment-icons\n```\n\n## 📖 Usage\n\n```jsx\nimport { PaymentIcon } from 'react-native-payment-icons'\n\n\u003cPaymentIcon type='visa'/\u003e\n\u003cPaymentIcon type='master' width={50}/\u003e\n\u003cPaymentIcon type='paypal' height='30%'/\u003e\n```\n\n* You must set the `type` property to the desired credit card / payment method.\n\n### Available `types` and their images:\n\n\u003e When there is more than one type for the same image, it's an alias!\n\n|Type    |Image\n|---    |---\n|`alipay`    |\u003cimg src=\"https://github.com/SrBrahma/react-native-payment-icons/raw/main/svgsSrc/alipay.svg\" width=80/\u003e\n|`american-express`\u003cbr\u003e`amex` |\u003cimg src=\"https://github.com/SrBrahma/react-native-payment-icons/raw/main/svgsSrc/amex.svg\" width=80/\u003e\n|`diners-club`\u003cbr\u003e`diners`    |\u003cimg src=\"https://github.com/SrBrahma/react-native-payment-icons/raw/main/svgsSrc/diners.svg\" width=80/\u003e\n|`discover`   |\u003cimg src=\"https://github.com/SrBrahma/react-native-payment-icons/raw/main/svgsSrc/discover.svg\" width=80/\u003e\n|`elo`    |\u003cimg src=\"https://github.com/SrBrahma/react-native-payment-icons/raw/main/svgsSrc/elo.svg\" width=80/\u003e\n|`hiper`    |\u003cimg src=\"https://github.com/SrBrahma/react-native-payment-icons/raw/main/svgsSrc/hiper.svg\" width=80/\u003e\n|`hipercard`   |\u003cimg src=\"https://github.com/SrBrahma/react-native-payment-icons/raw/main/svgsSrc/hipercard.svg\" width=80/\u003e\n|`jcb`    |\u003cimg src=\"https://github.com/SrBrahma/react-native-payment-icons/raw/main/svgsSrc/jcb.svg\" width=80/\u003e\n|`maestro`   |\u003cimg src=\"https://github.com/SrBrahma/react-native-payment-icons/raw/main/svgsSrc/maestro.svg\" width=80/\u003e\n|`mastercard`\u003cbr\u003e`master`   |\u003cimg src=\"https://github.com/SrBrahma/react-native-payment-icons/raw/main/svgsSrc/mastercard.svg\" width=80/\u003e\n|`mir`    |\u003cimg src=\"https://github.com/SrBrahma/react-native-payment-icons/raw/main/svgsSrc/mir.svg\" width=80/\u003e\n|`paypal`    |\u003cimg src=\"https://github.com/SrBrahma/react-native-payment-icons/raw/main/svgsSrc/paypal.svg\" width=80/\u003e\n|`unionpay`   |\u003cimg src=\"https://github.com/SrBrahma/react-native-payment-icons/raw/main/svgsSrc/unionpay.svg\" width=80/\u003e\n|`visa`    |\u003cimg src=\"https://github.com/SrBrahma/react-native-payment-icons/raw/main/svgsSrc/visa.svg\" width=80/\u003e\n|`generic`  |\u003cimg src=\"https://github.com/SrBrahma/react-native-payment-icons/raw/main/svgsSrc/generic.svg\" width=80/\u003e\n|`cvv`\u003cbr\u003e`code`  |\u003cimg src=\"https://github.com/SrBrahma/react-native-payment-icons/raw/main/svgsSrc/code.svg\" width=80/\u003e\n\n\u003e Images from [`aaronfagan/svg-credit-card-payment-icons`](https://github.com/aaronfagan/svg-credit-card-payment-icons)\n\n* 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`.\n\n* It also accepts all the props of the `Svg` component, like `style`.\n\n* On invalid `type`, it defaults to `generic`.\n\n## 📰 [Changelog](CHANGELOG.md)\n\n\n## 🤖 Dev\n\n\u003e How to setup your own images! If you just want to use the package, you may ignore this!\n\n* To transform the SVGs, [download the .svgs](https://stackoverflow.com/a/18194523/10247962) from [svg-credit-card-payment-icons](https://github.com/aaronfagan/svg-credit-card-payment-icons). I used the `Flat Rounded` styled images. Store them in `./svgsSrc/`.\n\n* 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.\n\n#### You may run `npm run svg` that executes the two steps below!\n\n* Run [svgo](https://github.com/svg/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**.\n\n`npx svgo -f ./svgsSrc -o ./svgsCompressed -p 0`\n\n`npx svgo -p 1 ./svgsSrc/mastercard.svg ./svgsSrc/diners.svg -o ./svgsCompressed/mastercard.svg ./svgsCompressed/diners.svg`\n\n* Then, transform them into React Native format using [svgr](https://github.com/gregberge/svgr). `--native` for generating code for React Native, `--typescript` for .tsx. We store them under `src/components`:\n\n`npx @svgr/cli ./svgsCompressed --out-dir src/components --native --typescript`\n\n\u003e There may happen some errors in the RN convertion you may need to deal manually. If happens, `npm run build` will throw them up.\n\n* An `index.tsx` will be automatically created re-exporting all the components.\n\n* If adding or removing images, you will need to change src/index.tsx to add / remove the components in the dictionary.\n\n* If you want to compile the TS files into JS, `npm run build`.\n\n\u003c!-- https://unblast.com/free-payment-method-icons-ai/ --\u003e\n\u003c!-- https://unblast.com/20-payment-card-icons-psd/ --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fftzi%2Freact-native-payment-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fftzi%2Freact-native-payment-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fftzi%2Freact-native-payment-icons/lists"}