Paypal React Native SDK

RN library using Paypal Checkout SDK

Installation

yarn add @keplr/paypal-react-native
or
npm install @keplr/paypal-react-native

Requirements

General

1. Install react-native-config

yarn add `react-native-config`

2. Create an .env file to your react-native project root

Fill it with :

ENV=local|production|development
PAYPAL_CLIENT_ID=Your Client ID
PAYPAL_RETURN_URL=Your return URL

Using Expo? jump to Expo

Android

1. Add the required repository to the android/build.gradle (cf : https://developer.paypal.com/sdk/in-app/android/#link-addthesdktoyourapp).

allprojects {
  repositories {
    mavenCentral()
    ...
    // This private repository is required to resolve the Cardinal SDK transitive dependency.
    maven {
      url "https://cardinalcommerceprod.jfrog.io/artifactory/android"
      credentials {
        // Be sure to add these non-sensitive credentials in order to retrieve dependencies from
        // the private repository.
        username "paypal_sgerritz"
        password "AKCp8jQ8tAahqpT5JjZ4FRP2mW7GMoFZ674kGqHmupTesKeAY2G8NcmPKLuTxTGkKjDLRzDUQ"
      }
    }
  }
}

2. Set allowBackup to true in your android/app/src/main/AndroidManifest.xml file. Paypal Checkout SDK requires the allowBackup to be true. (cf : https://developer.android.com/guide/topics/manifest/application-element#allowbackup)

<application android:allowBackup="true">
    ...
</application>

3. Android Paypal Initialisation repository

Add at the end of the method onCreate() in MainApplication.java the following code

RNPaypalModule.Companion.setup(this, BuildConfig.PAYPAL_CLIENT_ID, BuildConfig.PAYPAL_RETURN_URL, BuildConfig.ENV;

IOS

• Go in the ios/ folder and install the pod dependencies :

pod install
or
arch -x86_64 pod install (for M1)

Expo

• Add @keplr/paypal-react-native to your expo plugins (in app.config or app.json) :

export default ({ config }: ConfigContext): ExpoConfig => ({
  //...
  plugins: [
    //...
    [
      "@keplr/paypal-react-native",
      {
        "paypalClientId": PAYPAL_CLIENT_ID,
        "paypalReturnUrl": PAYPAL_RETURN_URL,
        "env": ENV
      }
    ]
  ],
  extra: {
    paypalClientId: PAYPAL_CLIENT_ID,
    paypalReturnUrl: PAYPAL_RETURN_URL,
    env: ENV,
  }
});

• After running expo prebuild, android native files should be properly updated. For example, at the end of the method onCreate() in MainApplication.java :

RNPaypalModule.Companion.setup(this, BuildConfig.PAYPAL_CLIENT_ID, BuildConfig.PAYPAL_RETURN_URL, BuildConfig.ENV;

Paypal initialisation -- Only for IOS

• Add in your App.tsx the call to initPaypal :

import { initPaypal } from '@keplr/paypal-react-native';

initPaypal({
  clientId: 'client_id_paypal',
  returnUrl: 'paypal_return_url',
  live: false, // true for production environment

});

Usage

import {
  PaypalButton,
  PaypalButtonOrder,
  PaypalButtonShipping,
  PaypalButtonVariant,
} from '@keplr/paypal-react-native';


const PaypalButton = () => {
  const paypalVariant: PaypalButtonVariant = {
    color: 'blue',
    label: 'payWith',
    size: 'full',
    shape: 'rounded',
  };
  const paypalOrder: PaypalButtonOrder = {
    referenceId: 'referenceId',
    invoiceId: 'invoiceId',
    amount: '10',
    currency: 'EUR',
  };
  const addressToPaypal: PaypalButtonShipping = {
    address: '10 rue du test',
    city: 'Paris',
    postalCode: '75000',
    countryCode: 'FR',
  };

  const handleApprove = ({ nativeEvent }: { nativeEvent: { orderId: string } }) => {
    // logic when the payment is approved by paypal
  };

  const handleError = () => {
    // logic when paypal is returning an error
  };

  return (
    <SafeAreaView>
      <View>
          <PaypalButton
            style={{ height: 52, width: 250 }}
            variant={paypalVariant}
            order={paypalOrder}
            shipping={addressToPaypal}
            onApprove={handleApprove}
            onError={handleError}
          />
      </View>
    </SafeAreaView>
  );
}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT