Skip to content

Unofficial integration of the payment APIs from the Stripe SDK on react-native

License

Notifications You must be signed in to change notification settings

Agaweb/react-native-stripe

Repository files navigation

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

Name Description Details
onCardValidCallback Callback which returs {isValid, cardParams}
- isValid gives you the state of the card inserted
- cardParams contains the number, expMonth, expYear, cvc, brand and if enabled postalCode
function
enabled Enable or disable the inputs boolean
postalCodeEntryEnabled Enable or disable the visibility of the postal code input boolean
cardInputStyle
iOS only
Style applicable only to the ios component, support for:
- textColor
- placeholderColor
- borderColor
- borderWidth
- backgroundColor
object
numberPlaceholder Only iOS string
cvcPlaceholder Only iOS string
expirationPlaceholder Only iOS string
postalCodePlaceholder Only iOS string

Methods (from ref)

Use these only if really needed

Name Description
focus Makes the native component request focus
blur Makes the native component lose focus
clear Clear the native fields

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);
    });
Name Description Required
clientSecret The client secret of the source. Used for client-side retrieval using a publishable key yes
cardParams Example:
{number: "4242424242424242", expMonth: 02, expYear: 22, cvc: "222"}
yes
savePaymentMethod Save the payment method to the attached customer (if present).
Used to store cards for future payments, especially helpful for confirmPaymentWithPaymentMethodId
no

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);
    });
Name Description Required
clientSecret The client secret of the source. Used for client-side retrieval using a publishable key yes
paymentMethodId The payment method attached to the customer, you can get a list of the available methods from the Stripe WS yes

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);
    });
Name Description Required
clientSecret The client secret of the SetupIntent yes
cardParams Only cardParams for now, paymentMethodId is going to be supported a bit later yes
Result (key) Description
paymentMethodId Registered method id

Contributing

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

License

MIT