Overview

The new version of the PayEngine React Native SDK is designed to provide developers with a more flexible and customizable payment experience. Its primary goal is to integrate with PayEngine native SDKs for both iOS and Android. By leveraging native SDKs (xcframework for iOS and AAR for Android), the SDK ensures a more seamless user experience without requiring codebase changes from multiple repositories.

Prerequisites

Add PayEngine Registry to your project

``
allprojects {
repositories {
...your repositories

maven { url 'https://www.jitpack.io' }
maven {
name = "pe-maven"
url = uri("https://maven.payengine.co/payengine")
credentials {
username = ""
password = ""
}
}
}
}
`
Please contact PayEngine support for username and password

Install Package

`bash
yarn add react-native-payengine@2
`

Important Configuration When Developing on Android

To use secure fields components, you need to install and configure the Material Components theme in your app.

1. Add the following dependency to your app/build.gradle file with the specified version:

`
implementation 'com.google.android.material:material:'
`

2. Enable Jetifier in your app's gradle.properties if you encounter duplicate class issues like:

`
android.useAndroidX=true
android.enableJetifier=true
`

Example error:

`
FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:checkDebugDuplicateClasses'.
> A failure occurred while executing com.android.build.gradle.internal.tasks.CheckDuplicatesRunnable
> Duplicate class android.support.v4.app.INotificationSideChannel found in modules core-1.9.0.aar -> core-1.9.0-runtime
`

3. Set the appropriate style in your styles.xml file:

`xml

`

4. To use the Fraud Monitoring feature, change your main application class to extend PEApplication as shown:

`java
public class MainApplication extends RNPEFraudAnalyticsApplication implements ReactApplication {
// ...
}
`

Wrap the Config in a Provider

`jsx
import { PEProvider } from 'react-native-payengine';

const App = () => {
return (







);
};
`

Set the Fetch Access Token Callback

This is a required callback that you need to set in the SDK for the other functionalities to work properly.

Please check the documentation for setFetchAccessTokenCallback to understand the implementation details.

Examples

The following examples demonstrate how to integrate and use the components provided by the PayEngine SDK within your application. Some features require additional configuration or platform-specific setup; these examples will also outline any prerequisites to ensure a smooth implementation.

Credit Card Form

`jsx
import React from 'react';
import { PECreditCardView, PEKeyboardType } from 'react-native-payengine';
import { Button, View } from 'react-native';

const additionalFields = [
{
name: 'address_zip',
type: 'text',
placeholder: 'Zip code',
keyboardType: PEKeyboardType.alphabet,
isRequired: true,
pattern:
'^(?:\\d{5}(?:-\\d{4})?|[ABCEGHJKLMNPRSTVXY]\\d[A-Z] ?\\d[A-Z]\\d)$',
},
];

const CreditCardForm = () => {
const formRef = React.createRef();

const createCard = async () => {
try {
const result = await formRef.current?.submit({
merchantId: '', // optional
additionalData: {
// additional data
}
});
console.log({ result });
} catch (err) {
console.log({ err });
}
};

return (




);
};
`

Bank Account Form

`jsx
import React from 'react';
import { PEBankAccountView } from 'react-native-payengine';
import { Button, View } from 'react-native';

const BankAccountForm = () => {
const formRef = React.createRef();

const createBankAccount = async () => {
try {
const result = await formRef.current?.submit({
merchantId: '', // optional
additionalData: {
// additional data
}
});
console.log({ result });
} catch (err) {
console.log({ err });
}
};

return (






);
};
`

Google Pay

Google Pay is available on Android devices that support Google’s payment platform. After enabling Google Pay on your account, you can use the PEGooglePayButton component to initiate the Google Pay in-app payment flow.

Before implementing Google Pay through the PayEngine SDK, you must ensure that Google Pay is enabled for your PayEngine account. To do this, contact your PayEngine support representative to activate it.

For step-by-step instructions and additional details, refer to the official PayEngine documentation:
👉 https://docs.payengine.co/developer-docs/processing-payments/google-pay-tm

Once Google Pay is enabled for your account, you can proceed with the implementation example shown below.




$3

`jsx
import React from 'react';
import { View, Text, ScrollView } from 'react-native';
import {
PEGooglePayButton,
PEPaymentRequest,
PayEngineNative,
PayProvider
} from 'react-native-payengine';

const GooglePayScreen = () => {
const MERCHANT_ID = 'Your merchant\'s id in the PayEngine system'
const [canMakePayment, setCanMakePayment] = React.useState(false);
const [paymentResult, setPaymentResult] = React.useState(null);

// Checking if the device supports Google Pay
React.useEffect(() => {
const checkSupport = async () => {
try {
const isSupported = await PayEngineNative.userCanPay(PayProvider.googlePay,
MERCHANT_ID
);
console.log('isSupported', isSupported);
setCanMakePayment(isSupported);
} catch (e) {
console.error('Google Pay not supported', e);
}
};
checkSupport();
}, []);

const paymentRequest = {
paymentAmount: amount,
merchantId: MERCHANT_ID,
platformOptions: {
billingAddressRequired: true,
billingAddressParameters: {
format: 'FULL'
},
shippingAddressRequired: false
}
};

const purchaseWithToken = async (token) => {
// Send the token to your server.
// Your server then forwards the token PayEngine APIs to perform a transaction.
};

return (

Google Pay Demo
{canMakePayment && (
<>
paymentRequest={paymentRequest}
onTokenDidReturn={(token) => {
console.log('google Pay token', token);
// Send token to server
purchaseWithToken(token);
}}
onPaymentSheetDismissed={() => {
console.log('Payment sheet dismissed');
}}
onPaymentFailed={(error) => {
console.log('Payment failed', error);
}}
style={{ height: 40, margin: 20 }}
/>
scrollEnabled
style={{
flex: 1,
width: '100%',
backgroundColor: 'lightyellow',
padding: 10,
marginVertical: 20,
}}
>
{JSON.stringify(paymentResult, null, 4)}


)}

);
};
`




Apple Pay

Apple Pay is available only on iOS devices, in accordance with Apple’s platform requirements. After completing the required configuration and confirming support, you can use the PEApplePayButton component to launch the Apple Pay payment sheet.

Before implementing Apple Pay through the PayEngine SDK, you must complete the necessary native iOS setup. This includes configuring merchant identifier, enabling Apple Pay capability in XCode, creating and uploading the required certificate.

For step-by-step instructions, refer to the official PayEngine documentation:
👉 https://docs.payengine.co/developer-docs/processing-payments/apple-pay/apple-pay-in-your-native-app

When the guide refers to “Integrate with Xcode”, it means opening the iOS project located in your React Native application’s ./ios directory. Once opened in Xcode, follow the steps outlined in the documentation to enable Apple Pay support for your app.

After completing the native setup, you can proceed with the implementation example shown below.

$3

`jsx
import React from 'react';
import { View, Text, ScrollView } from 'react-native';
import {
PEApplePayButton,
PEPaymentRequest,
PayEngineNative,
PayEngineUtils,
RNPEContactField,
PayProvider
} from 'react-native-payengine';
import axios from 'axios';

const ApplePayScreen = () => {
const MERCHANT_ID = 'Your merchant\'s id in the PayEngine system'
const [canMakePayment, setCanMakePayment] = React.useState(false);
const [paymentResult, setPaymentResult] = React.useState(null);

// Checking if the device supports Apple Pay
React.useEffect(() => {
const checkSupport = async () => {
try {
const isSupported = await PayEngineNative.userCanPay(PayProvider.applePay,
MERCHANT_ID
);
console.log('isSupported', isSupported);
setCanMakePayment(isSupported);
} catch (e) {
console.error('Apple Pay not supported', e);
}
};
checkSupport();
}, []);

const paymentRequest: PEPaymentRequest = {
merchantId: MERCHANT_ID,
paymentAmount: 10.15,
currencyCode: 'USD',
paymentItems: [
{
amount: 10.15,
label: 'Total Amount',
},
],
platformOptions: {
requiredBillingContactFields: [RNPEContactField.postalAddress],
requiredShippingContactFields: []
}
}

const purchaseWithToken = async (token) => {
// Send the token to your server.
// Your server then forwards the token PayEngine APIs to perform a transaction.
};

return (

Apple Pay Demo
{canMakePayment && (
<>
paymentRequest={paymentRequest}
onTokenDidReturn={(token) => {
console.log('Apple Pay token', token);
// Send token to server
purchaseWithToken(token);
}}
onPaymentSheetDismissed={() => {
console.log('Payment sheet dismissed');
}}
onPaymentFailed={(error) => {
console.log('Payment failed', error);
}}
style={{ height: 40, margin: 20 }}
/>
scrollEnabled
style={{
flex: 1,
width: '100%',
backgroundColor: 'lightyellow',
padding: 10,
marginVertical: 20,
}}
>
{JSON.stringify(paymentResult, null, 4)}


)}

);
};
`

Dynamic Pricing

Note: Android doesn't support Dynamic pricing yet although it's supported on Web. Track the issue here https://issuetracker.google.com/issues/331369810?pli=1

iOS

Pass the platformOptions to the payment request:

`javascript
const paymentRequest = {
...requestParameters,
platformOptions: {
requiredBillingContactFields: [RNPEContactField.postalAddress],
requiredShippingContactFields: [RNPEContactField.name, RNPEContactField.postalAddress],
shippingMethods: [
{
identifier: 'shipping-001',
label: 'Free shipping',
amount: 0.00
},
{
identifier: 'shipping-002',
label: 'Standard shipping',
amount: 1.99
},
{
identifier: 'shipping-003',
label: 'Express shipping',
amount: 2.99
}
]
}
}
`

`jsx
paymentRequest={paymentRequest}
ref={buttonRef}
onPaymentMethodSelected={(event) => {
console.log('onPaymentMethodSelected', event.nativeEvent)

const hasCreditDiscount = event.nativeEvent.paymentMethod.type === PEApplePayPaymentMethodType.credit
buttonRef?.current?.updatePaymentSheet([
{
label: 'Product price',
amount: paymentRequest.paymentAmount
},
...hasCreditDiscount ? [{
label: 'Credit discount',
amount: 10
}] : [],
{
label: 'Total',
amount: paymentRequest.paymentAmount - (hasCreditDiscount ? 1.00 : 0.00)
}
], [], [])
}}
onShippingContactSelected={(event) => {
console.log('onShippingContactSelected', event.nativeEvent)

if (!event.nativeEvent.contact.postalCode) {
// invalid postalCode, update with error
buttonRef?.current?.updatePaymentSheet([], [], [{
errorType: PEApplePaySheetErrorType.InvalidShippingAddress,
field: PEApplePayInvalidShippingField.PostalCode,
message: 'Please update postal code to continue'
}])
} else if (event.nativeEvent.contact.postalCode === '90715') {
// update shipping methods
buttonRef?.current?.updatePaymentSheet([], [
{
identifier: 'new-shipping1',
label: 'Updated shipping 1',
amount: 3.99
},
{
identifier: 'new-shipping2',
label: 'Updated shipping 2',
amount: 5.99
}
], [])
} else {
// no update
buttonRef?.current?.updatePaymentSheet([], [], [])
}
}}
onShippingMethodSelected={(event) => {
console.log('onShippingMethodSelected', event.nativeEvent)
buttonRef?.current?.updatePaymentSheet([
{
label: 'Product price',
amount: paymentRequest.paymentAmount
},
...event.nativeEvent.shippingMethod.amount > 0 ? [{
label: 'Shipping Fee',
amount: event.nativeEvent.shippingMethod.amount
}] : [],
{
label: 'Total',
amount: paymentRequest.paymentAmount + event.nativeEvent.shippingMethod.amount
}
], [], [])
}}
/>

`


Important:

If either of onPaymentMethodSelected, onShippingContactSelected or onShippingMethodSelected callbacks are registered, you must update the Apple Pay sheet in your callback using buttonRef.current?.updatePaymentSheet(...)` function, otherwise the Apple Pay shset will hang and the payment flow will automatically cancel.