React Native Payments Bringing the Payment Request API to React Native

Kadhom argues that payments matter because apps and companies depend on revenue from transactions or advertising. He traces online checkout from early web purchases, such as a Sting CD sold in 1994, to the payment forms still common today. On mobile, he says shoppers are twice as likely to abandon checkout.

Kadhom describes autofill, Apple Pay, and Android Pay as steps toward reducing repeated entry of card details. The Payment Request API offers a standard way to present a one-touch payment dialog, and was available in several browsers including Chrome for Android, Edge, and Samsung Browser. It returns payment data but does not process the payment.

React Native Payments provides a polyfill for the Payment Request API and bridges requests to native platforms. Developers define line items, a total, and supported payment methods such as Apple Pay, Android Pay, or a basic card. The API selects the first method available on the current platform, allowing shared payment code across web, iOS, and Android.

The payment response varies by method: it may contain card details, an Apple Pay or Android Pay token, or a processor token. Kadhom says the app sends that data to its server, then completes or fails the request based on the server response. The library supports Stripe and Braintree and has a pluggable interface for other processors.

Kadhom demonstrates installing the package, linking its native dependencies, and enabling Apple Pay with a merchant ID in Xcode. Android setup requires enabling the Wallet API in the manifest. In JavaScript, the example builds a payment request with a movie ticket priced at $15 and calls show() from a button handler; each attempt needs a new request.