react-native-paypal-buttons

React native implementation of PayPal Buttons Expo snack Demo

Table of Contents

• Installation
  • Setup
• Usage
• Props
  • Common Props
  • PayPalButton Specific Props
  • PayPalPayLaterButton Specific Props
  • PayPalCreditButton Specific Props
• Contributing
• License

Installation

npm install react-native-paypal-buttons

Setup

This package uses PayPalOpen-Regular font for the button labels.

Bare React Native

1. Update react-native.config.js

   ...
     assets: [
       "./node_modules/react-native-paypal-buttons/src/assets/fonts"
     ]
   

2. Run command

   npx react-native-asset
   

Expo

1. Install the expo-font package:

   expo install expo-font

2. Update expo config

   {
     "expo": {
       "plugins": [
         [
           "expo-font",
           {
             "fonts": ["./node_modules/react-native-paypal-buttons/src/assets/fonts/PayPalOpen-Regular.otf"]
           }
         ]
       ]
     }
   }

Usage

import { 
  PayPalButton,
  PayPalCreditButton,
  PayPalPayLaterButton,
} from 'react-native-paypal-buttons';

const MyComponent = () => (
  <>
    <PayPalButton />
    <PayPalPayLaterButton />
    <PayPalCreditButton />
  </>
);

Props

Common Props

Any PressableProps and the following:

Prop	Values	Default Value
edges	PaymentButtonEdges.HARD_EDGES, PaymentButtonEdges.SOFT_EDGES, PaymentButtonEdges.ROUNDED, or a custom number	PaymentButtonEdges.SOFT_EDGES
size	PaymentButtonSize.MINI, PaymentButtonSize.COLLAPSED, PaymentButtonSize.EXPANDED, PaymentButtonSize.FULL	PaymentButtonSize.EXPANDED

PayPalButton Specific Props

Prop	Values	Default Value
color	PayPalButtonColor.GOLD, PayPalButtonColor.WHITE, PayPalButtonColor.BLACK, PayPalButtonColor.SILVER, PayPalButtonColor.BLUE	PayPalButtonColor.GOLD
label	PayPalButtonLabel.NONE, PayPalButtonLabel.CHECKOUT, PayPalButtonLabel.BUY_NOW, PayPalButtonLabel.PAY_WITH	PayPalButtonLabel.NONE

PayPalPayLaterButton Specific Props

Prop	Values	Default Value
color	PayLaterButtonColor.GOLD, PayLaterButtonColor.WHITE, PayLaterButtonColor.BLACK, PayLaterButtonColor.SILVER, PayLaterButtonColor.BLUE	PayLaterButtonColor.GOLD

PayPalCreditButton Specific Props

Prop	Values	Default Value
color	CreditButtonColor.WHITE, CreditButtonColor.BLACK, CreditButtonColor.DARK_BLUE	CreditButtonColor.WHITE

Contributing

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

License

MIT

---

Made with create-react-native-library