gatsby-plugin-paypal

Add a PayPal Smart Payment Buttons to your Gatsby website easily.

Install

npm install --save gatsby-plugin-paypal

How to use Paypal plugin

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-paypal`,
      options: {
        clientId: `YOUR_CLIENT_ID`,
        currency: `EUR`, // Optional
        vault: true // Optional
      }
    }
  ]
};

Options

`clientId`

Your PayPal Client ID. You will find it on: https://developer.paypal.com/developer/applications/

`currency`

The currency of the transaction.

`vault`

The vault status of the transaction. If set to true:

Shows only funding sources that you can add to the vault
Set up a billing agreement, reference transaction, or subscription.

How to Use Paypal component

This is what a component using gatsby-plugin-paypal might look like:

import React from "react"
import Paypal from "gatsby-plugin-paypal"

const PaypalButton = () => (
    <Paypal 
      style={{
        shape: 'rect',
        color: 'blue',
        layout: 'horizontal',
        label: 'paypal',
      }}
      amount={10.1}
      currency="EUR"
    />
)

export default PaypalButton

Additional props of Paypal component

Name	Type	Description	Default
`amount`	`string`	The amount value of the transaction.
`currency`	`string`	The currency of the transaction. The three-character ISO-4217 currency code. PayPal does not support all currencies. Warning: Uses the same value as declared in the plugin options	`USD`
`createOrder`	`(data, actions) => any`	See createOrder
`onApprove`	`(data, actions) => any`	See onApprove
`onError`	`(error) => any`	See onError
`onCancel`	`(data) => any`	See onCancel
`onInit`	`(data, actions) => any`	See onInit
`onClick`	`() => any`	See onClick
`shippingPreference`	`string`	The shipping preferences. The possible values are: -`NO_SHIPPING`: Redact shipping address fields from the PayPal pages. Recommended for digital goods. - `GET_FROM_FILE` : Use the buyer-selected shipping address. - `SET_PROVIDED_ADDRESS` : Use the merchant-provided address. Buyer cannot change the address on the PayPal pages. If the merchant does not pass an address, the buyer can choose the address on PayPal pages.	`GET_FROM_FILE`
`createSubscription`	`(data, actions) => any`	See createSubscription
`style`	`object`	See Customize the PayPal Buttons	`{}`

Contribution

Pull requests