React Payment icons

A react component library that easily integrate with the Shopify GrapQL API to display available payment methods. The naming convention for the icons are matched with the response data from paymentSettings

Example query:

query {
    shop {
      paymentSettings {
        acceptedCardBrands
        supportedDigitalWallets
      }
    }
  }

Usage

npm i @systeminfected/react-payment-icons

Example

import { Icon } from 'react-payment-method-icons'

<Icon icon='MASTERCARD'/>

Credit

Logos forked from https://github.com/payrexx/payment-logos

A collection of payment method logos. The logos are free to use for commercial purposes.

Payment methods so far

Image	Brand	Shopify API name
	Mastercard	MASTERCARD
	Visa	VISA
	American Express	AMERICAN_EXPRESS
	Google Pay	GOOGLE_PAY
	Apple Pay	APPLE_PAY
	Shopify Pay	SHOPIFY_PAY
	Klarna	KLARNA

Payment methods still to be added

Credit cards

Image	Brand
	Discover
	Diners
	JCB
	Cartes bancaires

There are additional credit card logos in the repository.

Wallets

Image	Brand
	PayPal
	Samsung Pay
	Ali Pay
	WeChat Pay

Other Payment Methods

Over 120 additional payment method logos.