Credit Cards with Stripe and React Native

Stripe makes PCI compliance dead simple.

If you’re building the new cool app, there will probably come a time when you need to collect credit card information from your users. This can be a nail-biter for developers who are new to PCI Compliance.

Luckily, with the React Native bridge to the iOS Stripe SDK, there are a few lovely libraries that let us quickly and easily collect and tokenize credit card information with a beautiful, prebuilt, native form.

For reference, the general rule of PCI Compliance is to avoid sending credit card information to your server. You should collect the information on the client, use a payment processor like Stripe to tokenize that card, then persist that token only in your database.

Show Me the Money… or Credit Card

For this demo, we’ll be using the excellent tipsi-stripe library that provides React Native bindings for iOS & Android.

Let’s start by installing the library.

yarn add tipsi-stripe

Boom. Nice. Now let’s use it in a component.

import React, { Component } from 'react';
import { View } from 'react-native';
import stripe from 'tipsi-stripe';
stripe.init({
  publishableKey: <your_stripe_publishable_key>,
});
const theme = {
  primaryBackgroundColor: <hex_color>,
  secondaryBackgroundColor: <hex_color>,
  primaryForegroundColor: <hex_color>,
  secondaryForegroundColor: <hex_color>,
  accentColor: <hex_color>,
  errorColor: <hex_color>
};
class NewCardPage extends Component {
  componentDidMount() {
    
    const options = {
      smsAutofillDisabled: true,
      requiredBillingAddressFields: 'zip', // or 'full'
      theme
    };
    stripe.paymentRequestWithCardForm(options)
      .then(response => {
        // Get the token from the response, and send to your server
      })
      .catch(error => {
        // Handle error
      });
  }
  render() {
    return <View />
  }
}

Regardless of what navigator you use (I like react-native-router-flux) when you navigate to this component, the native Stripe credit card collection form will be rendered:

Wowza. We just created this beautiful, native credit card info form in just a few lines of code. In addition to validating card information, the tipsi-stripe library will return a Promise with tokenized card information to store in your database.

Neat-o! As easy and amazing as this is, don’t forget the other methods exposed by tipsi-stripe like Apple Pay and Android Pay requests.

Pretty damn cool, I think.