react-native-payengine v2

React Native SDK Version 2

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 = "<username>"
        password = "<password>"
      }
    }
  }
}

Please contact PayEngine support for username and password

Install Package

yarn add react-native-payengine@2

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:<version>'

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:

<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- ... -->
</style>

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

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

Usage

Wrap the Config in a Provider

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

const App = () => {
  return (
    <PEProvider config={PE_CONFIG}>
      <NavigationContainer>
        <CreditCardForm />
        <BankAccountForm />
        <ApplePayScreen />
      </NavigationContainer>
    </PEProvider>
  );
};

Credit Card Form

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(MERCHANT_ID, {});
      console.log({ result });
    } catch (err) {
      console.log({ err });
    }
  };

  return (
    <View>
      <PECreditCardView ref={formRef} additionalFields={additionalFields} />
      <Button onPress={createCard} title="Create Card" />
    </View>
  );
};

Bank Account Form

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(MERCHANT_ID, {});
      console.log({ result });
    } catch (err) {
      console.log({ err });
    }
  };

  return (
    <View>
      <PEBankAccountView ref={formRef} />
      <Button onPress={createBankAccount} title="Create Bank Account" />
    </View>
  );
};

Apple Pay

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 [canMakePayment, setCanMakePayment] = React.useState(false);
  const [paymentResult, setPaymentResult] = React.useState(null);

  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 to make a purchase
    // ...
  };

  return (
    <View style={styles.container}>
      <Text>Apple Pay Demo</Text>
      {canMakePayment && (
        <>
          <PEApplePayButton
            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 }}
          />
          <ScrollView
            scrollEnabled
            style={{
              flex: 1,
              width: '100%',
              backgroundColor: 'lightyellow',
              padding: 10,
              marginVertical: 20,
            }}
          >
            <Text>{JSON.stringify(paymentResult, null, 4)}</Text>
          </ScrollView>
        </>
      )}
    </View>
  );
};

Google Pay

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

const GooglePayScreen = () => {
  const [canMakePayment, setCanMakePayment] = React.useState(false);
  const [paymentResult, setPaymentResult] = React.useState(null);

  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('Apple 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 to make a purchase
    // ...
  };

  return (
    <View style={styles.container}>
      <Text>Google Pay Demo</Text>
      {canMakePayment && (
        <>
          <PEGooglePayButton
            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 }}
          />
          <ScrollView
            scrollEnabled
            style={{
              flex: 1,
              width: '100%',
              backgroundColor: 'lightyellow',
              padding: 10,
              marginVertical: 20,
            }}
          >
            <Text>{JSON.stringify(paymentResult, null, 4)}</Text>
          </ScrollView>
        </>
      )}
    </View>
  );
};