React Native Stripe binding for iOS/Android platforms
- Xcode 8+
- iOS 10+
- CocoaPods 1.1.1+
- SDK 17+
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
.
Run npm install --save tipsi-stripe
to add the package to your app's dependencies.
Run react-native link tipsi-stripe
so your project is linked against your Xcode project and all CocoaPods dependencies are installed.
- Setup your
Podfile
like the included example/ios/Podfile then runpod install
. - Open your project in Xcode workspace.
- Drag the following folder into your project:
node_modules/tipsi-stripe/ios/TPSStripe/
- 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 addTPSStripe.xcodeproj
. - Add
libTPSStripe.a
toBuild Phases
->Link Binary With Libraries
. - Click on
TPSStripe.xcodeproj
in Libraries and go the Build Settings tab. Double click the text to the right ofHeader 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 theTPSStripe
source files are referring to by pointing to the header files installed within thereact-native
node_modules
directory. - Whenever you want to use it within React code now you can:
import stripe from 'tipsi-stripe'
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.
Run react-native link tipsi-stripe
so your project is linked against your Android project
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
).
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.
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
.
A token object returned from submitting payment details (via paymentRequestWithApplePay
, paymentRequestWithCardForm
and createTokenWithCard
) to the Stripe API.
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 be1
if you used yourLive Publishable Key
, and0
if you used yourTest 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.
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 withApple Pay
, this refers to the last 4 digits of theDevice 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.
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.
{
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',
},
}
A source object returned from creating a source (via createSourceWithParams
) with the Stripe API.
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 betrue
if you used yourLive Publishable Key
, andfalse
if you used yourTest 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.
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.
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.
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.
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
.
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
.
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.
{
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',
}
Opens the user interface to set up credit cards for Apple Pay.
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
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
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.
Launch the Apple Pay
view to accept payment.
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")
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 ofshippingMethod
objects that describe the supported shipping methods.currencyCode
String - The three-letter ISO 4217 currency code. DefaultUSD
.countryCode
String - The two-letter code for the country where the payment will be processed. DefaultUS
.
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.
After requiredBillingAddressFields
you should complete the operation by calling completeApplePayRequest
or cancel if an error occurred.
Token's extra
field
An object with the following keys:
shippingMethod
Object - SelectedshippingMethod
object.billingContact
Object - The user's billingcontact
object.shippingContact
Object - The user's shippingcontact
object.
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.
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()
(Under active development)
Indicates whether or not the device supports Android Pay. Returns a Boolean
value.
Launch the Android Pay
view to accept payment.
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. Defaulttrue
.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.
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.
Launch Add Card
view to to accept payment.
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.
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.
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").
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.
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)
Creates token based on passed card 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.
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)
Creates token based on external (bank) 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
.
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)
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.
styles
Object - Accepts allView
styles, also supportcolor
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
andcvc
.
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.
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}
/>
)
}
}
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.
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
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
, replaceCUSTOM_SCHEME
withmy_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 settingCUSTOM_SCHEME
equals tomy_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!
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.
const params = {
type: 'alipay',
amount: 5,
currency: 'EUR',
returnURL: 'example://stripe-redirect',
}
const source = await stripe.createSourceWithParams(params)
// Client specific code
// api.sendSourceToBackend(source)
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
- 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 iOSnpm run build:android
- for Androidnpm run build
- for both iOS and Android
- Open Appium in other tab
npm run appium
- Run tests:
npm run test:ios
- for iOSnpm run test:android
- for Androidnpm run test
- for both iOS and Android
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
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.
- 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.
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)"
]
}
To see more of the tipsi-stripe
in action, you can check out the source in example folder.
tipsi-stripe is available under the MIT license. See the LICENSE file for more info.