npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-payment-card-component

v0.2.1

Published

> A modern credit card component for React

Downloads

499

Readme

React Payment Card Component | GitHub license Travis CI Status

A modern credit card component for React

This React component will help you building your checkout on your e-commerce.

The first version of a payment card modal was used in Pagar.me's checkout 1.0, but as we're now rewriting it to version 2.0 in React, why not creating a component so people also can use it the way they prefer?

By having a lot of credit cards from many different banks, brands and types, users will be able to see a digital version of their credit cards as they type the credit card number.

Check it live at https://pagarme.github.io/react-payment-card-component

Usage

To use this component in your React app, start by adding it to the project dependencies list:

npm version > 5

npm i react-payment-card-component

npm version < 5

npm i react-payment-card-component --save

yarn

yarn add react-payment-card-component

And then, import it:

import PaymentCard from 'react-payment-card-component'

render () {
  return (
    <PaymentCard
      bank="itau"
      model="personnalite"
      type="black"
      brand="mastercard"
      number="4111111111111111"
      cvv="202"
      holderName="Owen Lars"
      expiration="12/20"
      flipped={false}
    />
  );
}

Flipping the card

You can use React to manage the card state and implement your own logic, like flipping the card with a button or when user is typing the CVV (Card Verification Value).

flipCard () {
  const flipped = !this.state.flipped
  this.setState({ flipped })
}

Available Props

| Name | Type | Required | Description | | ---- | ---- | -------- | ----------- | | bank | String | true | The bank prop defines the major style for the card, like the elements positions, background color and logos. Examples.: default, itau, santander, nubank | | model | String | false | Model refers to the card model. Examples.: normal, prime, personnalite | | type | String | false (although it's not required, some styles may not properly work without it) | The type is used alongside with bank and model to get the final card styling. They are the types of a credit card that each bank can emit. Examples.: gold, black, platinum | | brand | String | true | This prop is used to get the correct logo and position of the brand used in the card. Examples: mastercard, visa. | | number | String | false | The card number printed in the card | | cvv| String | false | 3-digit CVV (Card Verification Value) | | holderName | String | false | The holder name as printed in the card | | expiration| String | false | The expiration month and year following the pattern: MM/YY | | flipped | Boolean | false | If true the backface of the card will be shown |

Customizing

Styling

The CSS files to manage the banks styles are under ./src/components/PaymentCard/styles, where each bank needs its own file under the banks folder and have it imported in the main ./src/components/PaymentCard/styles/index.css file.

To add a new style, remember to create classes following the pattern: bankName-cardModel-cardType:

.santander-normal-black {
  background: #000000;
}

Logos

We currently have 3 types of logos:

  • bankLogo
  • brandLogo
  • modelLogo

If you need to add new assets for corresponding logos, do it under the proper component folder in the images folder.

Guidelines

  • Prefer .svg files or .png (in that order)
  • Keep them as small as possible, even if they are going to be compressed in the build process

Contributing

We're always happy with contributors helping us evolving this project, so feel free to warn us about any bugs you found, new features you think might be cool for the project and also by adding new banks so we can have a lot of different credit cards.

Start by reading our Contributing guide and checking our Issues page.

License

This project is licensed under MIT License