WhoBuilt

Stripe React Native: A simple set of solutions to a complex set of problems

Sep 26, 2022· 19 min· 728 views·Watch on YouTube

Speaker

Charlie Cruzan, a software engineer at Stripe, explains how Stripe React Native handles in-app payments and describes React Native’s role in Stripe’s mobile products at React Native EU 2022, hosted by Callstack.

Why app payments are hard

Payment flows involve asynchronous steps, errors, retries, validation, fraud, and disputes, making them difficult to build and test. Handling payment data also brings security and PCI requirements. Businesses serving customers globally need to support local payment methods, such as bank transfers in Malaysia and OXXO vouchers in Mexico.

Build a custom checkout with CardField

Cruzan demonstrates a custom checkout using StripeProvider and CardField, which validates card details and lets developers style the input. The app’s server creates a PaymentIntent and returns its client secret; the React Native SDK then confirms the payment without the app directly handling card data. The example requires little code, but supports only cards unless developers build and maintain additional flows.

Use PaymentSheet for a hosted checkout

PaymentSheet provides a ready-made checkout presented in a bottom sheet, so the app can launch it from a Buy button. The server supplies a PaymentIntent client secret, customer ID, and ephemeral key, while the app initializes and presents the sheet. Developers can configure Apple Pay and Google Pay, customize its appearance, or use customFlow to separate payment method selection from confirmation.

Expand payment methods and Stripe’s React Native support

Cruzan says adding supported payment methods to PaymentSheet can be done through server configuration, without client-side changes or an app update. He describes React Native as a core part of Stripe’s mobile offering, with feature parity goals alongside its iOS and Android SDKs. He also points to Stripe React Native support for wallet provisioning, identity checks, and in-person payments through Stripe Terminal.

Takeaways

  • Choose CardField when you need control over a custom checkout and are prepared to build each payment method flow.
  • Use PaymentSheet to reduce checkout UI work and make supported payment methods available through server configuration.
  • Create PaymentIntents on the server and pass the client secret to the app for confirmation.
  • Plan payment support around customers’ local preferences; card-only checkout can exclude buyers in some markets.
  • Treat React Native support as part of payment product planning, since Stripe describes it as a core mobile platform.

Mentioned in this talk

Search inside this talk

What was claimed 12

Show all 12 facts

Related talks