React Native Library That Implements PayPal Checkout Flow using Purely Native Code

React Native Library That Implements PayPal Checkout Flow using Purely Native Code

react-native-paypal React Native library that implements PayPal Checkout flow using purely native code.

react-native-paypal

React Native library that implements PayPal Checkout flow using purely native code.

Demo

Getting started

$ npm install react-native-paypal --save or $ yarn add react-native-paypal

Mostly automatic installation

  1. $ react-native link react-native-paypal. Check the result, if iOS and/or Android project files are unchanged, do the steps described in Manual installation.

  2. [Android] Add implementation "com.braintreepayments.api:braintree:3.+" and implementation "com.braintreepayments.api:data-collector:3.+" in android/app/build.gradle.

  3. [iOS] Add pod 'Braintree', '~> 4' and pod 'Braintree/DataCollector' to your Podfile.

  4. [iOS] Run pod install

  5. [iOS] Register a URL scheme in Xcode (must always start with your Bundle Identifier and end in .payments - e.g. your.app.id.payments). See details here.

  6. [iOS] Edit your AppDelegate.m as follows:

    #import "RNPaypal.h"
    
    - (BOOL)application:(UIApplication *)application 
      didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
      [[RNPaypal sharedInstance] configure];
    }
    
    // if you support only iOS 9+, add the following method
    - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
      options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
    {
      return [[RNPaypal sharedInstance] application:application openURL:url options:options];
    }
    
    // otherwise, if you support iOS 8, add the following method
    - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
      sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
    {
      return [[RNPaypal sharedInstance] application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
    }
    

At this point you should be able to build both Android and iOS.

Manual installation

iOS
  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-paypal and add RNPaypal.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNPaypal.a to your project's Build PhasesLink Binary With Libraries
  4. In XCode, in the project navigator, select your project. Add $(SRCROOT)/../node_modules/react-native-paypal/ios to your project's Build SettingsHeader Search Paths
Android
  1. Open up android/app/src/main/java/[...]/MainApplication.java
  • Add import com.smarkets.paypal.RNPaypalPackage; to the imports at the top of the file
  • Add new RNPaypalPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:

    include ':react-native-paypal'
    project(':react-native-paypal').projectDir = new File(rootProject.projectDir,     '../node_modules/react-native-paypal/android')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:

      implementation project(':react-native-paypal')
    

Usage

First you need to get a valid token from your server. Refer to this.

Then you can execute the following code, for example reacting to a button press.

import { requestOneTimePayment, requestBillingAgreement } from 'react-native-paypal'; 

// For one time payments
const {
    nonce,
    payerId,
    email,
    firstName,
    lastName,
    phone
} = await requestOneTimePayment(
  token,
  {
    amount: '5', // required
    // any PayPal supported currency (see here: https://developer.paypal.com/docs/integration/direct/rest/currency-codes/#paypal-account-payments)
    currency: 'GBP',
    // any PayPal supported locale (see here: https://braintree.github.io/braintree_ios/Classes/BTPayPalRequest.html#/c:objc(cs)BTPayPalRequest(py)localeCode)
    localeCode: 'en_GB', 
    shippingAddressRequired: false,
    userAction: 'commit', // display 'Pay Now' on the PayPal review page
    // one of 'authorize', 'sale', 'order'. defaults to 'authorize'. see details here: https://developer.paypal.com/docs/api/payments/v1/#payment-create-request-body
    intent: 'authorize', 
  }
);

// For vaulting paypal account see: https://developers.braintreepayments.com/guides/paypal/vault
const {
    nonce,
    payerId,
    email,
    firstName,
    lastName,
    phone
} = await requestBillingAgreement(
  token,
  {
    billingAgreementDescription: 'Your agreement description', // required
    // any PayPal supported currency (see here: https://developer.paypal.com/docs/integration/direct/rest/currency-codes/#paypal-account-payments)
    currency: 'GBP',
    // any PayPal supported locale (see here: https://braintree.github.io/braintree_ios/Classes/BTPayPalRequest.html#/c:objc(cs)BTPayPalRequest(py)localeCode)
    localeCode: 'en_GB',
  }
);

// For device data collection see: https://developers.braintreepayments.com/guides/advanced-fraud-management-tools/device-data-collection/
const { deviceData } = await requestDeviceData(token);

Creating/Finding client token

Note that the client token should be served via a backend service but can be hardcoded:

  1. Go to https://www.braintreegateway.com or https://sandbox.braintreegateway.com/ and login or create an account
  2. Click the gear at the top and select to API
  3. You can find your token under Tokenization Keys. You will need to create one if none exists

Backend implementation

For an overview of the braintree payment flow see https://developers.braintreepayments.com/start/overview

This library covers the client setup here: https://developers.braintreepayments.com/start/hello-client

It does NOT however cover the server portion here: https://developers.braintreepayments.com/start/hello-server

You will need the server portion in order to complete your transactions. See a simple example of this server in /exampleServer. The example app is pointed to this on default

Troubleshooting

  • Check native code logs (in xCode for iOS or adb logcat *:E for Android). These may give additional information about issues
  • Try comparing your app implementation to the example app. It may help you find a step you missed. If you experience any issues with the example app or instructions missing from the Readme, please open an issue (or fix with a PR :))

Download Details:

Author: smarkets

Source Code: https://github.com/smarkets/react-native-paypal

react-native react mobile-apps

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

How React Native Is Shaping Mobile App Development

Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.

Which is the best React Native app development company in New York?

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.