README

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)

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)
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 -> https://github.com/react-native-community/upgrade-support/issues/62#issuecomment-622985723

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 (https://github.com/stripe/stripe-android/issues/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

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 |

Contributing

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

License

MIT

Usage no npm install needed!