tipsi-stripe

React Native Stripe binding for iOS/Android platforms

Requirements

iOS

Xcode 8+
iOS 10+
CocoaPods 1.1.1+

Android

SDK 17+

Compatibility

This package is now built for React Native 0.40 or greater! If you need to support React Native < 0.40, you should install this package @1.4.0.

Installation

Run npm install --save tipsi-stripe to add the package to your app's dependencies.

iOS

react-native cli

Run react-native link tipsi-stripe so your project is linked against your Xcode project and all CocoaPods dependencies are installed.

CocoaPods

Setup your Podfile like the included example/ios/Podfile then run pod install.
Open your project in Xcode workspace.
Drag the following folder into your project:

node_modules/tipsi-stripe/ios/TPSStripe/

Manual

Open your project in Xcode, right click on Libraries and click Add Files to "Your Project Name".
Look under node_modules/tipsi-stripe/ios and add TPSStripe.xcodeproj.
Add libTPSStripe.a to Build Phases -> Link Binary With Libraries.
Click on TPSStripe.xcodeproj in Libraries and go the Build Settings tab. Double click the text to the right of Header Search Paths and verify that it has $(SRCROOT)/../../react-native/React as well as ${SRCROOT}/../../../ios/Pods/Headers/Public - if they aren't, then add them. This is so Xcode is able to find the headers that the TPSStripe source files are referring to by pointing to the header files installed within the react-native node_modules directory.
Whenever you want to use it within React code now you can:

import stripe from 'tipsi-stripe'

Running Apple Pay in a Real Device

In order to run Apple Pay on an Apple device (as opposed to a simulator), there's an extra step you need to complete in XCode. Without completing this step, Apple Pay will say that it is not supported - even if Apple Pay is set up correctly on the device.

Navigate to the Capabilities tab in your XCode project and turn Apple Pay on. Then, add your Apple Pay Merchant ID to the 'Merchant IDs' section by clicking the '+' icon. Finally, make sure that the checkbox next to your merchant ID is blue and checked off.

Android

react-native cli

Run react-native link tipsi-stripe so your project is linked against your Android project

Manual

In your android/app/build.gradle add:

...
dependencies {
  ...
+ compile project(':tipsi-stripe')
}

In your android/settings.gradle add:

...
+include ':tipsi-stripe'
+project(':tipsi-stripe').projectDir = new File(rootProject.projectDir, '../node_modules/tipsi-stripe/android')

In your android/build.gradle add:

...
allprojects {
  repositories {
    ...
+   maven { url "https://jitpack.io" }
  }
}

In your android/app/src/main/java/com/%YOUR_APP_NAME%/MainApplication.java add:

...
+ import com.gettipsi.stripe.StripeReactPackage;
...
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
-   new MainReactPackage()
+   new MainReactPackage(),
+   new StripeReactPackage()
  );
}

Ensure that you have Google Play Services installed:

For Genymotion you can follow these instructions. For a physical device you need to search on Google for 'Google Play Services'. There will be a link that takes you to the Play Store and from there you will see a button to update it (do not search within the Play Store).

Android Pay

For using Android Pay in your android/app/src/main/AndroidManifest.xml add:

<application
...     
+  <meta-data
+    android:name="com.google.android.gms.wallet.api.enabled"
+    android:value="true" />
...
</application>

More information about Android Pay deployment and testing.

Usage

Let's require tipsi-stripe module:

import stripe from 'tipsi-stripe'

And initialize it with your Stripe credentials that you can get from dashboard. If you want to use Apple Pay you must provide your Merchant ID.

stripe.init({
  publishableKey: 'PUBLISHABLE_KEY',
  merchantId: 'MERCHANT_ID', // Optional
  androidPayMode: 'test', // Optional, android only, 'production' by default
})

androidPayMode String (Android only) - Corresponds to WALLET_ENVIRONMENT. Can be one of: test|production.

Token

A token object returned from submitting payment details (via paymentRequestWithApplePay, paymentRequestWithCardForm and createTokenWithCard) to the Stripe API.

`token`

An object with the following keys:

tokenId String - The value of the token. You can store this value on your server and use it to make charges and customers.
created Number - When the token was created.
livemode Number - Whether or not this token was created in livemode. Will be 1 if you used your Live Publishable Key, and 0 if you used your Test Publishable Key.
card Object - The credit card details object that were used to create the token.
bankAccount Object - The external (bank) account details object that were used to create the token.
extra Object (iOS only)- An additional information that method can provide.

`card`

An object with the following keys:

cardId String - The Stripe ID for the card.
brand String - The card’s brand. Can be one of: JCB|American Express|Visa|Discover|Diners Club|MasterCard|Unknown.
funding String (iOS only) - The card’s funding. Can be one of: debit|credit|prepaid|unknown.
last4 String - The last 4 digits of the card.
dynamicLast4 String (iOS only) - For cards made with Apple Pay, this refers to the last 4 digits of the Device Account Number for the tokenized card.
isApplePayCard Bool (iOS only) - Whether or not the card originated from Apple Pay.
expMonth Number - The card’s expiration month. 1-indexed (i.e. 1 == January)
expYear Number - The card’s expiration year.
country String - Two-letter ISO code representing the issuing country of the card.
currency String - This is only applicable when tokenizing debit cards to issue payouts to managed accounts. The card can then be used as a transfer destination for funds in this currency.
name String - The cardholder’s name.
addressLine1 String - The cardholder’s first address line.
addressLine2 String - The cardholder’s second address line.
addressCity String - The cardholder’s city.
addressState String - The cardholder’s state.
addressCountry String - The cardholder’s country.
addressZip String - The cardholder’s zip code.

`bankAccount`

An object with the following keys:

routingNumber String - The routing number of this account.
accountNumber String - The account number for this BankAccount.
countryCode String - The two-letter country code that this account was created in.
currency String - The currency of this account.
accountHolderName String - The account holder's name.
accountHolderType String - the bank account type. Can be one of: company|individual.
fingerprint String - The account fingerprint.
bankName String - The name of bank.
last4 String - The last four digits of the account number.

Example

{
  tokenId: 'tok_19GCAQI5NuVQgnjeKNE32K0p',
  created: 1479236426,
  livemode: 0,
  card: {
    cardId: 'card_19GCAQI5NuVQgnjeRZizG4U3',
    brand: 'Visa',
    funding: 'credit',
    last4: '4242',
    expMonth: 4,
    expYear: 2024,
    country: 'US',
    name: 'Eugene Grissom',
    addressLine1: 'Green Street',
    addressLine2: '3380',
    addressCity: 'Nashville',
    addressState: 'Tennessee',
    addressCountry: 'US',
    addressZip: '37211',
  },
  bankAccount: {
    bankName: 'STRIPE TEST BANK',
    accountHolderType: 'company',
    last4: '6789',
    accountHolderName: 'Test holder name',
    currency: 'usd',
    fingerprint: 'afghsajhaartkjasd',
    countryCode: 'US',
    accountNumber: '424542424',
    routingNumber: '110000000',
  },
}

Source

A source object returned from creating a source (via createSourceWithParams) with the Stripe API.

`source`

An object with the following keys:

amount Number - The amount associated with the source.
clientSecret String - The client secret of the source. Used for client-side polling using a publishable key.
created Number - When the source was created.
currency String - The currency associated with the source.
flow String - The authentication flow of the source. Can be one of: none|redirect|verification|receiver|unknown.
livemode Bool - Whether or not this source was created in livemode. Will be true if you used your Live Publishable Key, and false if you used your Test Publishable Key.
metadata Object - A set of key/value pairs associated with the source object.
owner Object - Information about the owner of the payment instrument.
receiver Object (Optional) - Information related to the receiver flow. Present if the source is a receiver.
redirect Object (Optional) - Information related to the redirect flow. Present if the source is authenticated by a redirect.
status String - The status of the source. Can be one of: pending|chargable|consumed|cancelled|failed.
type String - The type of the source. Can be one of: bancontact|bitcoin|card|giropay|ideal|sepaDebit|sofort|threeDSecure|alipay|unknown.
usage String - Whether this source should be reusable or not. Can be one of: reusable|single|unknown.
verification Object (Optional) - Information related to the verification flow. Present if the source is authenticated by a verification.
details Object - Information about the source specific to its type.
cardDetails Object (Optional) - If this is a card source, this property contains information about the card.
sepaDebitDetails Object (Optional) - If this is a SEPA Debit source, this property contains information about the sepaDebit.

`owner`

An object with the following keys:

address Object (Optional) - Owner’s address.
email String (Optional) - Owner’s email address.
name String (Optional) - Owner’s full name.
phone String (Optional) - Owner’s phone number.
verifiedAddress Object (Optional) - Verified owner’s address.
verifiedEmail String (Optional) - Verified owner’s email address.
verifiedName String (Optional) - Verified owner’s full name.
verifiedPhone String (Optional) - Verified owner’s phone number.

`receiver`

An object with the following keys:

address Object - The address of the receiver source. This is the value that should be communicated to the customer to send their funds to.
amountCharged Number - The total amount charged by you.
amountReceived Number - The total amount received by the receiver source.
amountReturned Number - The total amount that was returned to the customer.

`redirect`

An object with the following keys:

returnURL String - The URL you provide to redirect the customer to after they authenticated their payment.
status String - The status of the redirect. Can be one of: pending|succeeded|failed|unknown.
url String - The URL provided to you to redirect a customer to as part of a redirect authentication flow.

`verification`

An object with the following keys:

attemptsRemaining Number - The number of attempts remaining to authenticate the source object with a verification code.
status String - The status of the verification. Can be one of: pending|succeeded|failed|unknown.

`cardDetails`

An object with the following keys:

last4 String - The last 4 digits of the card.
expMonth Number - The card’s expiration month. 1-indexed (i.e. 1 == January)
expYear Number - The card’s expiration year.
brand String - The issuer of the card. Can be one of: JCB|American Express|Visa|Discover|Diners Club|MasterCard|Unknown.
funding String (iOS only) - The funding source for the card. Can be one of: debit|credit|prepaid|unknown.
country String - Two-letter ISO code representing the issuing country of the card.
threeDSecure String Whether 3D Secure is supported or required by the card. Can be one of: required|optional|notSupported|unknown.

`sepaDebitDetails`

An object with the following keys:

last4 String - The last 4 digits of the account number.
bankCode String - The account’s bank code.
country String - Two-letter ISO code representing the country of the bank account.
fingerprint String - The account’s fingerprint.
mandateReference String The reference of the mandate accepted by your customer.
mandateURL String - The details of the mandate accepted by your customer.

Example

{
  livemode: false,
  amount: 50,
  owner: {},
  metadata: {},
  clientSecret: 'src_client_secret_BLnXIZxZprDmdhw3zv12123L',
  details: {
    native_url: null,
    statement_descriptor: null
  },
  type: 'alipay',
  redirect: {
    url: 'https://hooks.stripe.com/redirect/authenticate/src_1Az5vzE5aJKqY779Kes5s61m?client_secret=src_client_secret_BLnXIZxZprDmdhw3zv12123L',
    returnURL: 'example://stripe-redirect?redirect_merchant_name=example',
    status: 'succeeded'
  },
  usage: 'single',
  created: 1504713563,
  flow: 'redirect',
  currency: 'eur',
  status: 'chargable',
}

Apple Pay (iOS only)

`openApplePaySetup()`

Opens the user interface to set up credit cards for Apple Pay.

`deviceSupportsApplePay() -> Promise`

Returns whether the user can make Apple Pay payments. User may not be able to make payments for a variety of reasons. For example, this functionality may not be supported by their hardware, or it may be restricted by parental controls. Returns true if the device supports making payments; otherwise, false.

NOTE: iOS Simulator always return true

`canMakeApplePayPayments([options]) -> Promise`

Returns whether the user can make Apple Pay payments with specified options. If there are no configured payment cards, this method always returns false. Return true if the user can make Apple Pay payments through any of the specified networks; otherwise, false.

NOTE: iOS Simulator always return true

`options`

An object with the following keys:

networks [String] (Array of String) - Indicates whether the user can make Apple Pay payments through the specified network. Available networks: american_express|discover|master_card|visa. If option does not specify we pass all available networks under the hood.

`paymentRequestWithApplePay(items, [options]) -> Promise`

Launch the Apple Pay view to accept payment.

`items`

An array of object with the following keys:

label String - A short, localized description of the item.
amount String - The summary item’s amount.

NOTE: The final item should represent your company; it'll be prepended with the word "Pay" (i.e. "Pay Tipsi, Inc $50")

`options`

An object with the following keys:

requiredBillingAddressFields Array<String> - A bit field of billing address fields that you need in order to process the transaction. Can be one of: all|name|email|phone|postal_address or not specify to disable.
requiredShippingAddressFields Array<String> - A bit field of shipping address fields that you need in order to process the transaction. Can be one of: all|name|email|phone|postal_address or not specify to disable.
shippingMethods Array - An array of shippingMethod objects that describe the supported shipping methods.
currencyCode String - The three-letter ISO 4217 currency code. Default USD.
countryCode String - The two-letter code for the country where the payment will be processed. Default US.

`shippingMethod`

An object with the following keys:

id String - A unique identifier for the shipping method, used by the app.
label String - A short, localized description of the shipping method.
detail String - A user-readable description of the shipping method.
amount String - The shipping method’s amount.

`completeApplePayRequest()/cancelApplePayRequest() -> Promise`

After requiredBillingAddressFields you should complete the operation by calling completeApplePayRequest or cancel if an error occurred.

Extra info

Token's extra field

`extra`

An object with the following keys:

shippingMethod Object - Selected shippingMethod object.
billingContact Object - The user's billing contact object.
shippingContact Object - The user's shipping contact object.

`contact`

An object with the following keys:

name String - The contact’s name.
phoneNumber String - The contact’s phone number.
emailAddress String - The contact’s email address.
street String - The street name in a postal address.
city String - The city name in a postal address.
state String - The state name in a postal address.
country String - The country name in a postal address.
ISOCountryCode String - The ISO country code for the country in a postal address.
postalCode String - The postal code in a postal address.
supplementarySubLocality String - The contact’s sublocality.

Example

const items = [{
  label: 'Whisky',
  amount: '50.00',
}, {
  label: 'Tipsi, Inc',
  amount: '50.00',
}]

const shippingMethods = [{
  id: 'fedex',
  label: 'FedEX',
  detail: 'Test @ 10',
  amount: '10.00',
}]

const options = {
  requiredBillingAddressFields: ['all'],
  requiredShippingAddressFields: ['phone', 'postal_address'],
  shippingMethods,
}

const token = await stripe.paymentRequestWithApplePay(items, options)

// Client specific code
// api.sendTokenToBackend(token)

// You should complete the operation by calling
stripe.completeApplePayRequest()

// Or cancel if an error occurred
// stripe.cancelApplePayRequest()

Android Pay (Android only)

(Under active development)

`deviceSupportsAndroidPay() -> Promise`

Indicates whether or not the device supports Android Pay. Returns a Boolean value.

`paymentRequestWithAndroidPay(options) -> Promise`

Launch the Android Pay view to accept payment.

`options`

An object with the following keys:

total_price String - Price of the item.
currency_code String - Three-letter ISO currency code representing the currency paid out to the bank account.
shipping_address_required Boolean (Optional) - Is shipping address menu required. Default true.
shipping_countries Array (Optional) - Set of country specifications that should be allowed for shipping. If omitted or an empty array is provided the API will default to using a country specification that only allows shipping in the US. Country code allowed in ISO 3166-2 format.
line_items Array - Array of purchased items. Each item contains:
- currency_code String - Currency code string.
- description String - Short description that will shown to user.
- total_price String - Total order price.
- unit_price String - Price per unit.
- quantity String - Number of items.

Example

const options = {
  total_price: '80.00',
  currency_code: 'USD',
  shipping_address_required: false,
  shipping_countries: ["US", "CA"],
  line_items: [{
    currency_code: 'USD',
    description: 'Whisky',
    total_price: '50.00',
    unit_price: '50.00',
    quantity: '1',
  }, {
    currency_code: 'USD',
    description: 'Vine',
    total_price: '30.00',
    unit_price: '30.00',
    quantity: '1',
  }],
}

const token = await stripe.paymentRequestWithAndroidPay(options)

// Client specific code
// api.sendTokenToBackend(token)

Example of token:

{ card: 
  { currency: null,
    fingerprint: null,
    funding: "credit",
    brand: "MasterCard",
    number: null,
    addressState: null,
    country: "US",
    cvc: null,
    expMonth: 12,
    addressLine1: null,
    expYear: 2022,
    addressCountry: null,
    name: null,
    last4: "4448",
    addressLine2: null,
    addressCity: null,
    addressZip: null 
  },
  created: 1512322244000,
  used: false,
  extra: { 
    email: "randomemail@mail.com",
    billingContact: { 
      postalCode: "220019",
      name: "John Doe",
      locality: "NY",
      countryCode: "US",
      administrativeArea: "US",
      address1: "Time square 1/11" 
    },
    shippingContact: {} 
  },
  livemode: false,
  tokenId: "tok_1BV1IeDZwqOES60ZphBXBoDr" 
}

Where billingContact and shippingContact are representation of theUserAddress.

Request with Card Form

`paymentRequestWithCardForm(options) -> Promise`

Launch Add Card view to to accept payment.

`options (iOS only)`

An object with the following keys:

requiredBillingAddressFields String - The billing address fields the user must fill out when prompted for their payment details. Can be one of: full|zip or not specify to disable.
prefilledInformation Object - You can set this property to pre-fill any information you’ve already collected from your user.
managedAccountCurrency String - Required to be able to add the card to an account (in all other cases, this parameter is not used). More info.
theme Object - Can be used to visually style Stripe-provided UI.

`prefilledInformation`

An object with the following keys:

email String - The user’s email address.
phone String - The user’s phone number.
billingAddress Object - The user’s billing address. When set, the add card form will be filled with this address.

`billingAddress`

An object with the following keys:

name String - The user’s full name (e.g. "Jane Doe").
line1 String - The first line of the user’s street address (e.g. "123 Fake St").
line2 String - The apartment, floor number, etc of the user’s street address (e.g. "Apartment 1A").
city String - The city in which the user resides (e.g. "San Francisco").
state String - The state in which the user resides (e.g. "CA").
postalCode String - The postal code in which the user resides (e.g. "90210").
country String - The ISO country code of the address (e.g. "US").
phone String - The phone number of the address (e.g. "8885551212").
email String - The email of the address (e.g. "jane@doe.com").

`theme`

An object with the following keys:

primaryBackgroundColor String - The primary background color of the theme.
secondaryBackgroundColor String - The secondary background color of this theme.
primaryForegroundColor String - The primary foreground color of this theme. This will be used as the text color for any important labels in a view with this theme (such as the text color for a text field that the user needs to fill out).
secondaryForegroundColor String - The secondary foreground color of this theme. This will be used as the text color for any supplementary labels in a view with this theme (such as the placeholder color for a text field that the user needs to fill out).
accentColor String - The accent color of this theme - it will be used for any buttons and other elements on a view that are important to highlight.
errorColor String - The error color of this theme - it will be used for rendering any error messages or view.

Example

const options = {
  requiredBillingAddressFields: 'full',
  prefilledInformation: {
    billingAddress: {
      name: 'Gunilla Haugeh',
      line1: 'Canary Place',
      line2: '3',
      city: 'Macon',
      state: 'Georgia',
      country: 'US',
      postalCode: '31217',
    },
  },
}

const token = await stripe.paymentRequestWithCardForm(options)

// Client specific code
// api.sendTokenToBackend(token)

Request with card params object

`createTokenWithCard(params) -> Promise`

Creates token based on passed card params.

`params`

An object with the following keys:

number String (Required) - The card’s number.
expMonth Number (Required) - The card’s expiration month.
expYear Number (Required) - The card’s expiration year.
cvc String - The card’s security code, found on the back.
name String - The cardholder’s name.
addressLine1 String - The first line of the billing address.
addressLine2 String - The second line of the billing address.
addressCity String - City of the billing address.
addressState String - State of the billing address.
addressZip String - Zip code of the billing address.
addressCountry String - Country for the billing address.
brand String (Android only) - Brand of this card. Can be one of: JCB|American Express|Visa|Discover|Diners Club|MasterCard|Unknown.
last4 String (Android only) - last 4 digits of the card.
fingerprint String (Android only) - The card fingerprint.
funding String (Android only) - The funding type of the card. Can be one of: debit|credit|prepaid|unknown.
country String (Android only) - ISO country code of the card itself.
currency String - Three-letter ISO currency code representing the currency paid out to the bank account. This is only applicable when tokenizing debit cards to issue payouts to managed accounts. You should not set it otherwise. The card can then be used as a transfer destination for funds in this currency.

Example

const params = {
  // mandatory
  number: '4242424242424242',
  expMonth: 11,
  expYear: 17,
  cvc: '223',
  // optional
  name: 'Test User',
  currency: 'usd',
  addressLine1: '123 Test Street',
  addressLine2: 'Apt. 5',
  addressCity: 'Test City',
  addressState: 'Test State',
  addressCountry: 'Test Country',
  addressZip: '55555',
}

const token = await stripe.createTokenWithCard(params)

// Client specific code
// api.sendTokenToBackend(token)

Request with external (bank) account params object

`createTokenWithBankAccount(params) -> Promise`

Creates token based on external (bank) params.

`params`

An object with the following keys:

accountNumber String (Required) - The account number for this BankAccount.
countryCode String (Required) - The two-letter country code that this account was created in.
currency String (Required) - The currency of this account.
routingNumber String - The routing number of this account.
accountHolderName String - The account holder's name.
accountHolderType String - the bank account type. Can be one of: company|individual.

Example

const params = {
  // mandatory
  accountNumber: '000123456789',
  countryCode: 'us',
  currency: 'usd',
  // optional
  routingNumber: '110000000', // 9 digits
  accountHolderName: 'Test holder name',
  accountHolderType: 'company', // "company" or "individual"
}

const token = await stripe.createTokenWithBankAccount(params)

// Client specific code
// api.sendTokenToBackend(token)

PaymentCardTextField component

A text field component specialized for collecting credit/debit card information. It manages multiple text fields under the hood to collect this information. It’s designed to fit on a single line.

Props

styles Object - Accepts all View styles, also support color param.
cursorColor String (IOS only) - The cursor color for the field.
textErrorColor String (IOS only) - The text color to be used when the user has entered invalid information, such as an invalid card number.
placeholderColor String (IOS only)- The text placeholder color used in each child field.
numberPlaceholder String - The placeholder for the card number field.
expirationPlaceholder String - The placeholder for the expiration field.
cvcPlaceholder String - The placeholder for the cvc field.
disabled Bool (IOS only) - Enable/disable selecting or editing the field. Useful when submitting card details to Stripe.
enabled Bool (Android only) - Enable/disable selecting or editing the field. Useful when submitting card details to Stripe.
onChange Func - This function will be called each input change.
onParamsChange Func - This function will be called each input change, it takes two argumants:
- valid Bool - Whether or not the form currently contains a valid card number, expiration date, and CVC.
- params Object - Contains entered card params: number, expMonth, expYear and cvc.

Initial params

To set inital params you can use <instance>.setParams(params) method which is available via ref. For example, if you’re using another library to scan your user’s credit card with a camera, you can assemble that data into an object and set this property to that object to prefill the fields you’ve collected.

You can also access to valid and params info via <instance>.valid and <instance>.params respectively.

Example

import React, { Component } from 'react'
import { StyleSheet } from 'react-native'
import { PaymentCardTextField } from 'tipsi-stripe'

const styles = StyleSheet.create({
  field: {
    width: 300,
    color: '#449aeb',
    borderColor: '#000',
    borderWidth: 1,
    borderRadius: 5,
  }
})

class FieldExample extends Component {
  handleFieldParamsChange = (valid, params) => {
    console.log(`
      Valid: ${valid}
      Number: ${params.number || '-'}
      Month: ${params.expMonth || '-'}
      Year: ${params.expYear || '-'}
      CVC: ${params.cvc || '-'}
    `)
  }

  render() {
    return (
      <PaymentCardTextField
        style={styles.field}
        cursorColor={...}
        textErrorColor={...}
        placeholderColor={...}
        numberPlaceholder={...}
        expirationPlaceholder={...}
        cvcPlaceholder={...}
        disabled={false}
        onParamsChange={this.handleFieldParamsChange}
      />
    )
  }
}

Create source object with params

`createSourceWithParams(params) -> Promise`

Creates source object based on params. Sources are used to create payments for a variety of payment methods

NOTE: For sources that require redirecting your customer to authorize the payment, you need to specify a return URL when you create the source. This allows your customer to be redirected back to your app after they authorize the payment. For this return URL, you can either use a custom URL scheme or a universal link supported by your app.

iOS

For more information on registering and handling URLs in your app, refer to the Apple documentation:

You also need to setup your AppDelegate.m app delegate to forward URLs to the Stripe SDK according to the official iOS implementation

Android

You have to declare your return url in application's build.gradle file. In order to do that, add the following code replacing CUSTOM_SCHEME with the your custom scheme inside android.defaultConfig block.

android {
    // ...
    defaultConfig {
        // ...
        manifestPlaceholders = [
            tipsiStripeRedirectScheme: "CUSTOM_SCHEME"
        ]
    }
    // ...
}

Example: if the return url used is my_custom_scheme://callback, replace CUSTOM_SCHEME with my_custom_scheme.

NOTE: the redirection will be automatically handled by tipsi-stripe on its own activity. In case of your app makes use of its own custom URL scheme for other purpose rather than handling stripe payments, be sure that CUSTOM_SCHEME value is not exaclty the same that the one used in the rest of the app.

In such case you might end up using my_custom_scheme_tipsi://callback as return URL and setting CUSTOM_SCHEME equals to my_custom_scheme_tipsi, following the previous example.

You also need to add into your application's manifest section with redirect activity:

<activity android:name=".RedirectUriReceiver">
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="${tipsiStripeRedirectScheme}" tools:replace="android:scheme" />
  </intent-filter>
</activity>

Thouse explicit designation of RedirectUriReceiver need to override default example redirect scheme, that has been already defined into tipsi-stripe library.

Also you need to add: xmlns:tools="http://schemas.android.com/tools" as an attribute into the root node of your manifest.

NOTE: This is only necessary if you are going to use Sources!

`params`

An object with the following keys: (Depending on the type you need to provide different params. Check the STPSourceParams docs for reference)

type String (Required) - The type of the source to create. Can be one of: bancontact|bitcoin|card|giropay|ideal|sepaDebit|sofort|threeDSecure|alipay.
amount Number - A positive number in the smallest currency unit representing the amount to charge the customer (e.g., 1099 for a €10.99 payment).
name String - The full name of the account holder.
returnURL String The URL the customer should be redirected to after they have successfully verified the payment.
statementDescriptor String A custom statement descriptor for the payment.
currency String - The currency associated with the source. This is the currency for which the source will be chargeable once ready.
email String - The customer’s email address.
bank String - The customer’s bank.
iban String - The IBAN number for the bank account you wish to debit.
addressLine1 String - The bank account holder’s first address line (optional).
city String - The bank account holder’s city.
postalCode String - The bank account holder’s postal code.
country String - The bank account holder’s two-letter country code (sepaDebit) or the country code of the customer’s bank (sofort).
card String - The ID of the card source.

Example

const params = {
  type: 'alipay',
  amount: 5,
  currency: 'EUR',
  returnURL: 'example://stripe-redirect',
}

const source = await stripe.createSourceWithParams(params)

// Client specific code
// api.sendSourceToBackend(source)

Tests

Local CI

To run example app e2e tests for all platforms you can use npm run ci command. Before run this command you need to specify PUBLISHABLE_KEY and MERCHANT_ID environment variables:

PUBLISHABLE_KEY=<...> MERCHANT_ID=<...> npm run ci

Manual

Go to example folder cd example
Install CocoaPods dependencies (iOS only) pod install --project-directory=ios
Install npm dependencies npm install
Configure project before build PUBLISHABLE_KEY=<...> MERCHANT_ID=<...> npm run configure
Build project:

npm run build:ios - for iOS
npm run build:android - for Android
npm run build - for both iOS and Android

Open Appium in other tab npm run appium
Run tests:

npm run test:ios - for iOS
npm run test:android - for Android
npm run test - for both iOS and Android

Troubleshooting

Tests

You might encounter the following error while trying to run tests:

An unknown server-side error occurred while processing the command. Original error: Command \'/bin/bash Scripts/bootstrap.sh -d\' exited with code 1

You can fix it by installing Carthage:

brew install carthage

use_frameworks! issue

If you are using CocoaPods and use_frameworks! enabled in your Podfile you might get the following error:

fatal error: 'Stripe/Stripe.h' file not found

To solve this problem please be sure that Stripe.framework is added to Link Binary with Libraries section of Build Phases in TPSStripe.xcodeproj. If problem still persist, please try to clean your build folder and rebuild again.

Android

Using higher than ours version of Google Play Services in your project might encourage an error: NoClassDefFoundError: com.google.android.gms.wallet.MaskedWalletRequest

We have fixed this issue, but if you somehow facing this bug again - please, create an issue or a pull request and we will take another look.

jest

To make jest work with tipsi-stripe, you should change transformIgnorePatterns in package.json file. Please refer to here

"jest": {
  "preset": "react-native",
  "transformIgnorePatterns": [
    "node_modules/(?!(jest-)?react-native|tipsi-stripe)"
  ]
}

Example

To see more of the tipsi-stripe in action, you can check out the source in example folder.

License

tipsi-stripe is available under the MIT license. See the LICENSE file for more info.

Name		Name	Last commit message	Last commit date
Latest commit History 86 Commits
.travis		.travis
android		android
example		example
ios		ios
scripts		scripts
src		src
.editorconfig		.editorconfig
.eslintrc		.eslintrc
.gitignore		.gitignore
.npmignore		.npmignore
.travis.yml		.travis.yml
LICENSE		LICENSE
README.md		README.md
package.json		package.json
tipsi-stripe.podspec		tipsi-stripe.podspec

License

localyyz/tipsi-stripe

Folders and files

Latest commit

History

Repository files navigation

tipsi-stripe

Requirements

iOS

Android

Compatibility

Installation

iOS

react-native cli

CocoaPods

Manual

Running Apple Pay in a Real Device

Android

react-native cli

Manual

Android Pay

Usage

Token

token

card

bankAccount

Example

Source

source

owner

receiver

redirect

verification

cardDetails

sepaDebitDetails

Example

Apple Pay (iOS only)

openApplePaySetup()

deviceSupportsApplePay() -> Promise

canMakeApplePayPayments([options]) -> Promise

options

paymentRequestWithApplePay(items, [options]) -> Promise

items

options

shippingMethod

completeApplePayRequest()/cancelApplePayRequest() -> Promise

Extra info

extra

contact

Example

Android Pay (Android only)

deviceSupportsAndroidPay() -> Promise

paymentRequestWithAndroidPay(options) -> Promise

options

Example

Request with Card Form

paymentRequestWithCardForm(options) -> Promise

options (iOS only)

prefilledInformation

billingAddress

theme

Example

Request with card params object

createTokenWithCard(params) -> Promise

params

Example

Request with external (bank) account params object

createTokenWithBankAccount(params) -> Promise

params

Example

PaymentCardTextField component

Props

Initial params

Example

Create source object with params

createSourceWithParams(params) -> Promise

iOS

Android

params

Example

`token`

`card`

`bankAccount`

`source`

`owner`

`receiver`

`redirect`

`verification`

`cardDetails`

`sepaDebitDetails`

`openApplePaySetup()`

`deviceSupportsApplePay() -> Promise`

`canMakeApplePayPayments([options]) -> Promise`

`options`

`paymentRequestWithApplePay(items, [options]) -> Promise`

`items`

`options`

`shippingMethod`

`completeApplePayRequest()/cancelApplePayRequest() -> Promise`

`extra`

`contact`

`deviceSupportsAndroidPay() -> Promise`

`paymentRequestWithAndroidPay(options) -> Promise`

`options`

`paymentRequestWithCardForm(options) -> Promise`

`options (iOS only)`

`prefilledInformation`

`billingAddress`

`theme`

`createTokenWithCard(params) -> Promise`

`params`

`createTokenWithBankAccount(params) -> Promise`

`params`

`createSourceWithParams(params) -> Promise`

`params`

Packages