@rnw-community/react-native-payments
Advanced tools
Accept Payments with Apple Pay and Android Pay using the Payment Request API.
Implementation of W3C Payment Request API(version 08 September 2022) for React Native.
Currently not all the features described for the browsers are supported by this lib. Please feel free to open a PR. See TODO
This library represents a significant improvement over the fantastic react-native-payments library, with the following enhancements:
interfaces/enums/types.These enhancements ensure that the library is more efficient, maintainable, and future-proof, offering a seamless payment integration experience for your applications.
@rnw-community/react-native-payments using your package manager.AppDelegate.h:#import <RCTAppDelegate.h>
#import <UIKit/UIKit.h>
#import <PassKit/PassKit.h> // Add this import
@interface AppDelegate : RCTAppDelegate
Create Google developer account.
Follow this guide to setup Google Pay Api in your application.
Use should use 19.0.0+ version of Google play services in your application:
dependencies {
// The version of react-native is set by the React Native Gradle Plugin
implementation("com.facebook.react:react-android")
implementation 'com.google.android.gms:play-services-wallet:19.2.0'
To integrate with Expo custom builds, you need to add the payment plugin from the package into your app.config.js:
app.config.js configuration:export default {
expo: {
...
ios: {
...
infoPlist: {
merchant_id: [your_merchant_id],
},
entitlements: {
"com.apple.developer.in-app-payments": [your_merchant_id],
},
...
},
plugins: [
...
"@rnw-community/react-native-payments",
],
},
};
Detailed guide should be found at:
The PaymentRequest class is designed to facilitate the integration of payment processing into your React Native application. It leverages TypeScript for robust typing and ensures seamless payment experiences across both iOS and Android platforms. Below is a comprehensive guide on how to use the PaymentRequest class effectively:
import {PaymentRequest} from '@rnw-community/react-native-payments';
import { PaymentMethodNameEnum, SupportedNetworkEnum } from "@rnw-community/react-native-payments/src";
const methodData = [
// ApplePay example
{
supportedMethods: PaymentMethodNameEnum.ApplePay,
data: {
merchantIdentifier: 'merchant.com.your-app.namespace',
supportedNetworks: [SupportedNetworkEnum.Visa, SupportedNetworkEnum.Mastercard],
countryCode: 'US',
currencyCode: 'USD',
requestBillingAddress: true,
requestPayerEmail: true,
requestShipping: true
}
},
// AndroidPay
{
supportedMethods: PaymentMethodNameEnum.AndroidPay,
data: {
supportedNetworks: [SupportedNetworkEnum.Visa, SupportedNetworkEnum.Mastercard],
environment: EnvironmentEnum.Test,
countryCode: 'DE',
currencyCode: 'EUR',
requestBillingAddress: true,
requestPayerEmail: true,
requestShipping: true,
gatewayConfig: {
gateway: 'example',
gatewayMerchantId: 'exampleGatewayMerchantId',
},
}
}
];
const paymentDetails = {
// Provide payment details such as total amount, currency, and other relevant information
};
const paymentRequest = new PaymentRequest(methodData, paymentDetails);
Note: The
methodDataparameter is an array ofPaymentMethodDataobjects that represent the supported payment methods in your application. EachPaymentMethodDataobject should have asupportedMethodsproperty specifying the type of payment method (e.g.,PaymentMethodNameEnum.AndroidPayorPaymentMethodNameEnum.ApplePay) and a data property containing the corresponding platform-specific data.
Depending on the platform and payment method, you can provide additional data to the methodData.data property:
environment: This property represents the Android environment for the payment.requestPayerName: "An optional boolean field that, when present and set to true, indicates that the PaymentResponse will include the name of the payer.requestPayerPhone: "An optional boolean field that, when present and set to true, indicates that the PaymentResponse will include the phone of the payer.requestBillingAddress: An optional boolean field that, when present and set to true, indicates that the PaymentResponse will
include the billing address of the payer.requestPayerEmail: An optional boolean field that, when present and set to true, indicates that the PaymentResponse will
include the email address of the payer.requestShipping: An optional boolean field that, when present and set to true, indicates that the PaymentResponse will
include the shipping address of the payer.Before displaying the payment sheet to the user, you can check if the current device supports the payment methods specified:
const isPaymentPossible = await paymentRequest.canMakePayment();
This method returns a boolean value indicating whether the device supports the specified payment methods.
The
PaymentRequestclass automatically handles platform-specific payment data based on the provided methodData.
Once you have verified the device's capability, you can proceed to display the payment sheet for the user to complete the transaction:
try {
const paymentResponse = await paymentRequest.show();
// Handle the payment response here
} catch (error) {
// Handle errors or user cancellation
}
// or Promise style
const paymentResponse = paymentRequest.show().then(...).catch(...);
The paymentRequest.show() method returns a promise that resolves with a PaymentResponse object representing the user's
payment response.
To send all the relevant payment information to the backend (BE) for further processing and validation, you need to extract
the required data from the PaymentResponseDetailsInterface object.
The PaymentResponseDetailsInterface provides various properties that encompass essential details about the payment,
including the payment method used, the payer's information, and transaction-related information.
const paymentResponse = paymentRequest.show().then((paymentResponse) => {
// This field will have all Android payment token info AndroidPaymentMethodToken
paymentResponse.androidPayToken;
// This field will have all IOS payment token info IosPKToken
paymentResponse.applePayToken;
// Aditionally if was requested, shipping, billing and payer info would be available
paymentResponse.billingAddress;
paymentResponse.payerEmail;
paymentResponse.payerName;
paymentResponse.payerPhone;
paymentResponse.shippingAddress;
// Send data to your BE
// Close paymnet sheet
}).catch(...);
The PaymentResponseDetailsInterface includes the following additional properties:
billingAddress: This property represents user billing details PaymentResponseAddressInterface and available if was requested in the PaymentRequest.shippingAddress: This property represents user shipping details PaymentResponseAddressInterface and available if was requested in the PaymentRequest.payerEmail: This property represents user email and available if was requested in the PaymentRequest.payerPhone: This property represents user phone and available if was requested in the PaymentRequest.androidPayToken: This property represents PaymentToken information returned by AndroidPay, this should be sent to your payment provider.applePayToken: This property represents PaymentToken information returned by ApplePay, this should be sent to your payment provider.Once the payment process is successfully completed, it's essential to close the payment sheet by calling the
PaymentResponse.complete() method. This method takes a parameter from the PaymentComplete enum to indicate the outcome of
the
payment and hide the payment sheet accordingly.
paymentResponse.complete(PaymentComplete.Success) // OR PaymentComplete.Fail
This will have no affect in the Android platform due to AndroidPay implementation.
The PaymentRequset.abort() method in the Payment Request API allows developers to programmatically cancel an ongoing
payment request or dismiss
the payment sheet when it is in an interactive state. This method is used to handle scenarios where the user decides to
cancel the
payment process or when specific conditions require the payment request to be aborted.
This will have no affect in the Android platform due to AndroidPay implementation.
Due to new TurboModules architecture in React Native, you can encounter issues with Jest tests. To fix this, you can mock
the TurboModuleRegistry to disable the Payment module in Jest tests. Here is an example of how you can do this:
const turboModuleRegistry = jest.requireActual(
'react-native/Libraries/TurboModule/TurboModuleRegistry'
);
/** HINT: Mock TurboModuleRegistry to disable the `Payment` module in Jest tests */
export function setupJestTurboModuleMock(): void {
jest.mock('react-native/Libraries/TurboModule/TurboModuleRegistry', () => {
return {
...turboModuleRegistry,
getEnforcing: (name: string) => {
if (name === 'Payment') {
return null; // Return null to mock the Payment module
}
return turboModuleRegistry.getEnforcing(name);
},
};
});
}
You can find working example in the App component of
the react-native-payments-example package.
react-native-payments.shipping options.coupons support.AppDelegate.h with importing PassKit?PaymentResponse retry() methodPaymentResponse toJSON() methodutilsThis library is licensed under The MIT License.
FAQs
Accept Payments with Apple Pay and Android Pay using the Payment Request API.
The npm package @rnw-community/react-native-payments receives a total of 6,211 weekly downloads. As such, @rnw-community/react-native-payments popularity was classified as popular.
We found that @rnw-community/react-native-payments demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.
Application Security
/Research
/Security News
Socket detected multiple compromised CrowdStrike npm packages, continuing the "Shai-Hulud" supply chain attack that has now impacted nearly 500 packages.
Research
/Security News
Malicious update to @ctrl/tinycolor on npm is part of a supply-chain attack hitting 40+ packages across maintainers