Giter Club home page Giter Club logo

react-native-paypal's Introduction

react-native-paypal

npm version npm GitHub license

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

Demo

Getting started

$ npm install react-native-paypal --save or $ yarn install 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:2.17.0" in android/app/build.gradle.
  3. [iOS] Add pod 'Braintree' to your Podfile and run pod install. If you want, you can specify a version, e.g. pod 'Braintree', '~> 4.19.0'.
  4. [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.
  5. [iOS] Edit your AppDelegate.m as follows:
    #import "RNPaypal.h"
    
    - (BOOL)application:(UIApplication *)application 
      didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
      [[RNPaypal sharedInstance] configure];
    }
    
    - (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

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 } from 'react-native-paypal';

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', 
  }
);

react-native-paypal's People

Contributors

b4nn3r avatar erikpoort avatar riso avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.