@humblejs/paypal-button

Paypal Button

Paypal button that takes payment via PayPal gateway

Demo

Install

yarn add @humblejs/paypal-button

Props

Name	Type / Description	Is Required?	Default
env	string (sandbox, production)	NO	production
client	shape(sandbox, production) Client key for relevant environment	YES
amount	number Amount to be charged for the payment	YES
currency	string (AUD, USD, CAD, EUR, NZD, GBP)	NO	AUD
commit	bool	NO	true
onSuccess	func Callback when payment was successful	YES
onError	func Callback when payment errored	YES
onCancel	func Callback when payment was cancelled	YES
shape	string (pill, rect) Shape of button	NO	pill
label	string ('pay', 'checkout', 'buynow', 'paypal') Label of button	NO	paypal
size	string (medium, large, responsive) Size of button	NO	medium
layout	string (horizontal, vertical) Layout of button	NO	vertical
color	string (gold, blue, silver, white, black) Color of button	NO	gold

See styles @ https://developer.paypal.com/docs/archive/checkout/how-to/customize-button/#button-styles

How to use

1. Create new paypal app in the dashboard and obtain Client ID and secret.
2. Pass the client ID to this component and select the correct environment (sandbox or production)
3. Store secret key on the server side securely
4. Implement onSuccess for the component and verify payment on the server side
5. Mark payment as successful only after server verification

This component has been fully tested with sandbox account.

Server-side Verification

You will need PayPal Node.js SDK on the server

yarn add @paypal/checkout-server-sdk

// paypal-client.js
const checkoutSDK = require('@paypal/checkout-server-sdk');

function environment() {
   const clientId = process.env.PAYPAL_CLIENT_ID;
   const clientSecret = process.env.PAYPAL_CLIENT_SECRET;
   return new checkoutSDK.core.SandboxEnvironment(clientId, clientSecret);
}
function client() {
  return new checkoutSDK.core.PayPalHttpClient(environment());
}

And use this client

const checkoutSDK = require('@paypal/checkout-server-sdk');
const payPalClient = require('./client');

const orderID = ''; // payment ID or order ID

const request = new checkoutSDK.orders.OrdersGetRequest(orderID);

payPalClient.client().execute(request).then((order) => {
  console.log('Payment successful. Amount:', order.result.purchase_units[0].amount.value, JSON.stringify(f));
}).catch((err) => {
  console.error('error', err);
});

Now you may also save the order by order ID

The response look like following

{
	"statusCode": 200,
	"headers": {
		...
	},
	"result": {
		"id": "PAYID-LTH25ZY54J279526F323870C",
		"intent": "CAPTURE",
		"purchase_units": [{
			"amount": {
				"currency_code": "AUD",
				"value": "0.03",
				"breakdown": {
					"item_total": {
						"currency_code": "AUD",
						"value": "0.03"
					},
					"shipping": {
						"currency_code": "AUD",
						"value": "0.00"
					},
					"handling": {
						"currency_code": "AUD",
						"value": "0.00"
					},
					"insurance": {
						"currency_code": "AUD",
						"value": "0.00"
					},
					"shipping_discount": {
						"currency_code": "AUD",
						"value": "0.00"
					},
					"discount": {
						"currency_code": "AUD",
						"value": "0.00"
					}
				}
			},
			"payee": {
				"email_address": "[e-mail]",
				"merchant_id": "46T8JZE4VNF4A"
			},
			"description": "",
			"shipping": {
				"name": {
					"full_name": "test buyer"
				},
				"address": {
					"address_line_1": "1 Cheeseman Ave Brighton East",
					"admin_area_2": "Melbourne",
					"admin_area_1": "Victoria",
					"postal_code": "3001",
					"country_code": "AU"
				}
			},
			"payments": {
				"captures": [{
					"id": "0LM87903F7245960E",
					"status": "COMPLETED",
					"amount": {
						"currency_code": "AUD",
						"value": "0.03"
					},
					"final_capture": true,
					"seller_protection": {
						"status": "ELIGIBLE",
						"dispute_categories": ["ITEM_NOT_RECEIVED", "UNAUTHORIZED_TRANSACTION"]
					},
					"seller_receivable_breakdown": {
						"gross_amount": {
							"currency_code": "AUD",
							"value": "0.03"
						},
						"paypal_fee": {
							"currency_code": "AUD",
							"value": "0.03"
						},
						"net_amount": {
							"currency_code": "AUD",
							"value": "0.00"
						}
					},
					"links": [{
						"href": "https://api.sandbox.paypal.com/v2/payments/captures/0LM87903F7245960E",
						"rel": "self",
						"method": "GET"
					}, {
						"href": "https://api.sandbox.paypal.com/v2/payments/captures/0LM87903F7245960E/refund",
						"rel": "refund",
						"method": "POST"
					}, {
						"href": "https://api.sandbox.paypal.com/v2/checkout/orders/7F536828UP127432R",
						"rel": "up",
						"method": "GET"
					}],
					"create_time": "2019-05-06T03:50:21Z",
					"update_time": "2019-05-06T03:50:21Z"
				}]
			}
		}],
		"payer": {
			"name": {
				"given_name": "test",
				"surname": "buyer"
			},
			"email_address": "[e-mail]",
			"payer_id": "4DDJQTGYTCLS2",
			"phone": {
				"phone_number": {
					"national_number": "0368558274"
				}
			},
			"address": {
				"country_code": "AU"
			}
		},
		"update_time": "2019-05-06T03:50:21Z",
		"links": [{
			"href": "https://api.sandbox.paypal.com/v2/checkout/orders/PAYID-LTH25ZY54J365924F323870C",
			"rel": "self",
			"method": "GET"
		}],
		"status": "COMPLETED"
	}
}