A stylable Checkout component for React Native: https://github.com/z-dev/react-native-checkout

Adding a New Card

We’ve been building multiple React Native Apps for our clients. We wanted to build them a top quality checkout to take card payments and Apple Pay.

Each time we were surprised that there wasn’t a great React Native component to step in and help. We’re big fans of Stripe, they have a excellent checkout on the web.

Stripe Checkout

We wanted something which was truly native. With Stripe’s checkout in mind we set out to build our own Component we could reuse across projects.

We wanted a great mobile checkout with:

Native look and feel

Validation

Apple Pay

Card scanning

Cross platform

Native Look and Feel

React Native Checkout is a set of React Native Components which works on Android and iOS.

Customisation

It was important to us that developers could control all aspects of the style of the Component (even if that meant they could break it). So we allow them to pass the entire style (or just a subset) into the component.

We’ve put the checkout into production with our Expresso App — we’ve customised the styles a fair bit.

Pick a card, any card

Validation

Stripe wrote a brilliant credit card validation library. Unfortunately it’s linked to jQuery :(. However, Jesse Pollack built a version without jQuery — Thanks Jesse!

We make borders red and display an error if the customer doesn’t get something quite right.

Apple Pay

We really wanted to support apple pay. But to keep things simple, we added a flag to turn on the button and let the developer handle a button press.

Card Scanning

card.io have already nailed this, so we used a library that does this really well.

We’re really happy with the library and have noticed a few early adopters on github. There’s still a tonne more stuff we’d love to add in the future.