React Native Stripe

Stripe payments for react-native

Warning

This library is really fresh, if you encounter a bug don't be afraid to report it

Requirements

This module uses the latest iOS Stripe SDK (dropped support for iOS 10) so the minimum platform is now iOS 11

Installation

npm install @agaweb/react-native-stripe
cd ios && pod install

Additional iOS setup

It must be done or the compilation will fail (the Stripe SDK is now in full Swift)

1. Create the famous "Dummy" swift file (xcode -> open your project -> right click on the folder named after your project, where Info.plist resides -> new File -> Swift -> say YES when asked for the bridging header)
2. Remove the swift-5.0 search path, or you will get an error about undefined symbols (try it if you don't believe me), do this -> react-native-community/upgrade-support#62 (comment)

Tested with the latest Xcode, I spent a lot of hours finding the 2nd additional step, so if you have an outdated Xcode version or an outdated react-native version, please upgrade.

A note about the widget and the manual card validation

I'll be honest I couldn't manage to get the Android CardInputWidget working, the animation doesn't work (stripe/stripe-android#655), so I implemented the CardMultilineWidget instead.
It means that Android and iOS have different UI (on Android is more material design).
I could have used a third party credit card form like tipsi-stripe, but on the Stripe SDK the manual card validation is now deprecated so I'm not going to implement it.

Usage

Setup

You should call this method as early as possible (ex. at the first index.js), it must be called before everything else from this module

import stripe from "@agaweb/react-native-stripe";

stripe.initModule(YOUR_PUBLISHABLE_KEY)

Component: StripeCardInputWidget

Wrapper around the Android (CardMultilineWidget) and iOS (STPPaymentCardTextField) native card collection inputs (integrated with react-native TextInputState undocumented API, so Keyboard.dismiss() will work)

Basic usage

import {StripeCardInputWidget} from '@agaweb/react-native-stripe';

export const Test = () => {
    return (
        <StripeCardInputWidget
            onCardValidCallback={({isValid, cardParams}) => {
                console.log(isValid, cardParams);
        }} />
    );
};

Props

Methods (from ref)

Use these only if really needed

Module API: confirmPaymentWithCard

Confirm using the card details you get from the widget or from anywhere else

import stripe from '@agaweb/react-native-stripe';

stripe
    .confirmPaymentWithCard(clientSecret, cardParams, savePaymentMethod?)
    .then(() => {
        console.log('Paid');
    })
    .catch((err) => {
        console.log(err);
    });

Module API: confirmPaymentWithPaymentMethodId

Confirm using an already present paymentMethodId (ex. reuse cards)

import stripe from '@agaweb/react-native-stripe';

stripe
    .confirmPaymentWithPaymentMethodId(clientSecret, paymentMethodId)
    .then(() => {
        console.log('Paid');
    })
    .catch((err) => {
        console.log(err);
    });

Module API: confirmCardSetup

Confirm Setup Intent using the card details you get from the widget or from anywhere else
Both iOS and Android call this name confirmSetupIntent, but JS deprecated it, in favor of confirmCardSetup
Useful for attach cards to the customer without make a payment

import stripe from '@agaweb/react-native-stripe';

stripe
    .confirmCardSetup(clientSecret, cardParams)
    .then((data) => {
        console.log('Card Saved', data);
    })
    .catch((err) => {
        console.log(err);
    });

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT