react-native-stripe

by lrettig

A React Native wrapper for the Stripe native SDK (currently iOS only)

129 Stars 30 Forks Last release: Not found MIT License 64 Commits 9 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

React Native : Stripe SDK

Wraps the native Stripe iOS SDK for React Native apps.

Features

  • Collect credit card information and convert to a Stripe token, all in native code.
  • Get billing and shipping information (name, address, phone number, email address) from Apple Pay.
  • Fall back on simple Stripe native credit card form for older devices.
  • Check if the device supports Apple Pay, and if so, whether it has cards configured.
  • If not, you can prompt the user to configure Apple Pay and enter a card.
  • Specify which fields to request from the user in Apple Pay: name, postal address, phone number, and/or email.
  • Collect credit card details in JavaScript and convert them to a card token (without needing to use the Stripe JS SDK).
  • All methods return promises.

Caveats

  • Stripe only allows you to exchange card information for a payment token on the frontend. This does not actually verify the payment information. It just checks that it looks reasonable, e.g., that the number has the right format, that the expiration date is in the future, etc. You should get this token, and then immediately pass it to a backend function that validates it, either by creating a charge, or else by attaching it to a customer. See the Stripe API for more information, and this helpful blog post for more on handling Stripe errors.
  • As a corollary, you should only embed your Stripe publishable key in a frontend app.

Installation

  • Install Stripe iOS SDK
  • Install the module:
    npm i react-native-stripe --save
    
  • Run
    open node_modules/react-native-stripe
  • Drag
    StripeNative.xcodeproj
    into your
    Libraries
    group
  • Select your main project in the navigator to bring up settings
  • Under
    Build Phases
    expand the
    Link Binary With Libraries
    header
  • Scroll down and click the
    +
    to add a library
  • Find and add
    libStripeNative.a
    and
    libStripe.a
    under the
    Workspace
    group
  • ⌘+B

Example

var React = require('react-native');
var StripeNative = require('react-native-stripe');

const STRIPE_KEY = "";

const SOME_ITEMS = [ { label: "Llama Kitty T-shirt", amount: 19.99, }, { label: "Hello Kitty Humidifier", amount: 25.00, }, ];

var AppEntry = React.createClass({

componentDidMount: function () { StripeNative.init(STRIPE_KEY); },

applePay: function () { Promise.all([StripeNative.canMakePayments(), StripeNative.canMakePaymentsUsingNetworks()]).then( function (canMakePayments) { if (!canMakePayments[0]) alert("Apple Pay is not enabled on this device"); else if (!canMakePayments[1]) alert("Apple Pay is enabled but no card is configured"); else { var options = { fallbackOnCardForm: false, shippingAddressFields: StripeNative.iOSConstants.PKAddressFieldAll, currencyCode: 'USD' }; StripeNative.paymentRequestWithApplePay(SOME_ITEMS, "Llama Kitty Shop", options).then(function (obj) { var token = obj[0], shippingInfo = obj[1], billingInfo = obj[2];

        // (Create charge here)

        (chargeWasSuccessful ? StripeNative.success : StripeNative.failure)();
      }, function (err) {
        alert(err);
      })
    }
  });

}, });

Sample application

  • cd node_modules/react-native-stripe/example/
  • Edit
    index.ios.js
    and replace
     with your Stripe publishable key.
  • Optionally, replace
     with your merchant ID.  Note that this doesn't matter for testing in the simulator.
  • npm install
  • react-native start
  • open ios/example.xcodeproj
  • ⌘+R to run the app in X-code.

Limitations

  • Currently only supports iOS.
  • Apple does not currently allow us to get any billing contact info other than a postal address.
  • Cannot yet check if payment is possible or request payment using a specific card brand ("Visa", "Amex", etc.).
  • Currently only supports Stripe as payment processor.
  • The manual card entry form is very vanilla and probably not usable in production. You should show a user's cart to them at the point of checkout, and present errors directly on this form. It's meant as a starting point.

Copyright and license

Code and documentation copyright 2016-2017 Lane M Rettig. Code released under the MIT license.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.