PayPal Checkout with single-page applications

DOCSCURRENTStandard

Last updated: May 6th, 9:27pm

Use this guide if your integration uses a single-page application to accept payments, built on a library or framework such as React, Vue, or Angular.

Know before you code

Required
PayPal Checkout

This feature modifies an existing PayPal Checkout integration and uses the following:

JavaScript SDK: Adds PayPal-supported payment methods.

Orders REST API: Create, update, retrieve, authorize, and capture orders.

Required
You need a developer account to get sandbox credentials

PayPal uses the following REST API credentials, which you can get from the developer dashboard:

Client ID: Authenticates your account with PayPal and identifies an app in your sandbox.

Client secret: Authorizes an app in your sandbox. Keep this secret safe and don't share it.

Optional
Explore PayPal APIs with Postman

You can use Postman to explore and test PayPal APIs. Learn more in our Postman guide.

Add JavaScript SDK

The JavaScript SDK shows your payer's available payment methods on your checkout page.

Set up the PayPal checkout for your application by using the JavaScript SDK and handling the payer's interactions with the PayPal checkout button. Place the following script tag in your index.html page based on how you plan to render payment buttons, so the paypal object is available when you need it in the checkout flow. You can render the payment buttons either immediately, or after user action, navigation, or other page change:

Sample request for Immediate

1<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID">
2</script>

Sample request for On change

1<script defer src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID">
2</script>

Note: This sample code is optimized for JavaScript performance. To learn more about how to optimize the JavaScript SDK, see JavaScript SDK performance optimization.

Modify the code

Copy the sample request and modify it as follows:

Copy the sample JavaScript SDK code and paste it into your checkout page.

In the SDK code, replace YOUR_CLIENT_ID with your client ID.

Pass parameters to replace default values, such as USD for currency. To learn more about the default values, see the JavaScript SDK script configuration.

Add payment buttons driver

Add payment buttons to your single-page application's library or framework:

React sample request
Angular sample request
Angular 2 sample request
Vue

1const PayPalButton = paypal.Buttons.driver("react", {
2    React,
3    ReactDOM
4});

Add payment buttons to app

Choose your JavaScript library or framework:

React.

Angular

Angular 2

Angular 2 using TypeScript

React

The React samples are separated into a component implementation and a functional implementation.

Component implementation
Functional implementation
Angular
Angular 2
Angular 2 using TypeScript
Vue

1import React from "react";
2import ReactDOM from "react-dom"
3const PayPalButton = paypal.Buttons.driver("react", {
4    React,
5    ReactDOM
6});
7class YourComponent extends React.Component {
8    createOrder(data) {
9        // Order is created on the server and the order id is returned
10        return fetch("/my-server/create-paypal-order", {
11                method: "POST",
12                headers: {
13                    "Content-Type": "application/json",
14                    "PayPal-Partner-Attribution-Id": "BN-CODE",
15                    "Authorization": "Bearer ACCESS-TOKEN",
16                    "PayPal-Auth-Assertion": "PAYPAL-AUTH-ASSERTION",
17                },
18                // use the "body" param to optionally pass additional order information
19                // like product skus and quantities
20                body: JSON.stringify({
21                    cart: [{
22                        sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
23                        quantity: "YOUR_PRODUCT_QUANTITY",
24                    }, ],
25                }),
26            })
27            .then((response) => response.json())
28            .then((order) => order.id);
29    }
30    onApprove(data) {
31        // Order is captured on the server
32        return fetch("/my-server/capture-paypal-order", {
33                method: "POST",
34                headers: {
35                    "Content-Type": "application/json",
36                },
37                body: JSON.stringify({
38                    orderID: data.orderID
39                })
40            })
41            .then((response) => response.json());
42    }
43    render() {
44        return ( <
45            PayPalButton createOrder = {
46                (data, actions) => this.createOrder(data)
47            }
48            onApprove = {
49                (data, actions) => this.onApprove(data)
50            }
51            />
52        );
53    }
54}