Expo Docs

Payments

Expo includes support for payments through Stripe and Apple Pay on iOS via ExpoKit, and Stripe and Android Pay on Android.
Need more help than what's on the page? The Payments module is largely based off tipsi-stripe. The documentation and questions there may prove helpful.

If you haven't done payments with Stripe before, create an account with Stripe. After getting the account set up, navigate to the Stripe API dashboard. Here, you'll need to make a note of the Publishable key and Secret key listed.

The Payments module is currently only supported through ExpoKit on iOS (to understand why, refer to Why ExpoKit on iOS?).
First, detach your Expo project using ExpoKit (refer to Detach to ExpoKit for more information). Then, navigate to and open your-project-name/ios/Podfile. Add "Payments" to your Podfile's subspecs. Example:

...
target 'your-project-name' do
  pod 'ExpoKit',
    :git => "https://github.com/expo/expo.git",
    :subspecs => [
      "Core",
      "CPP", # Add a comma here!
      "Payments" # Add this line here!
    ]

  pod 'React',
  ...

Finally, make sure CocoaPods is installed and run pod install in your-project-name/ios. This will add the Payments module files to your project and the corresponding dependencies.

The Payments module is included with the Expo bundle on Android. Skip ahead to importing payments.

The Payments SDK is in Alpha and currently lives under Expo's DangerZone namespace. You can import it like this:
import { DangerZone } from 'expo';
const { Payments } = DangerZone;

First, initialize the Payments module with your credentials:
payments.initialize({
  publishableKey: 'PUBLISHABLE_KEY' // Your Stripe publishable key
})
Next, you'll need to create a token object. After creating the token, you'll need to send it to some kind of backend (for example, a Node.js server) to handle processing the payment. It's important not to handle sensitive card details in the front-end Expo application.

A token object returned from submitting payment details (via paymentRequestWithApplePayAsync and createTokenWithCardAsync) 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.

{
  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',
  },
}

Remember: to use Apple Pay on a real device, you need to set up apple pay first.

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 returns true

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 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 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.

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. This closes Apple Pay. (resolves to undefined, you do not need to store the Promise)

Token's extra field

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.

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: 'T-Shirt',
  amount: '50.00',
}, {
  label: 'Expo, Inc',
  amount: '50.00',
}]

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

const options = {
  requiredBillingAddressFields: 'all',
  requiredShippingAddressFields: 'all',
  shippingMethods,
}

const token = await payments.paymentRequestWithApplePayAsync(items, options)

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

// You should complete the operation by calling
payments.completeApplePayRequestAsync()

// Or cancel if an error occurred
// payments.cancelApplePayRequestAsync()

This promise launches a Card Form dialog and resolves to a token upon successful completion of the card form, and an error otherwise.
options
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.
  • smsAutofillDisabled Bool - When entering their payment information, users who have a saved card with Stripe will be prompted to autofill it by entering an SMS code. Set this property to true to disable this feature.
  • 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.

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

const token = await Payments.paymentRequestWithCardFormAsync(options)

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

It's also possible to generate a token by simply passing the necessary details in a parameter.

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.createTokenWithCardAsync(params)

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

If you want to use Apple Pay for payments, you'll need to set up your merchant ID in XCode first. Note that you do not need to go through this process to use the Payments module - you can still process payments with Stripe without going through the steps in this section.
If you haven't already, set up an Apple Merchant ID via the Apple Developer Portal. Then, open the application in XCode and navigate to the capabilities tab. Enable Apple Pay and insert your merchant ID into the corresponding space.
applepay
Finally, you'll want to include your merchant ID in the JavaScript code before publishing your standalone application. Change the initialization of payments to mimic the following:
payments.initialize({
  publishableKey: 'PUBLISHABLE_KEY', // Your Stripe publishable key
  merchantId: 'MERCHANT_ID' // Your Apple Pay merchant ID
})
Note: Apple Pay can be used only for real world items (ex. appeal, car sharing, food) and not virtual goods. For more information about proper usage of Apple Pay, visit Apple's Apple Pay guidelines and Acceptable Use.

Expo previously included support for a native Payments API without ExpoKit. We learned that apple sometimes rejects apps which contain the Stripe SDK but don’t offer anything for sale. To help your App Review process go more smoothly, we’ve decided to remove the Stripe SDK and experimental Payments API from apps built with the Expo standalone builder. We’re still excited to give developers a way to let users pay for goods when they need to and we’ll announce ways to do so shortly.