Online/
Online/
Checkout/
PayPal/
Customize/
PayPal Checkout with Single-Page Applications

PayPal payments with single-page applications

DOCSCURRENTStandardDirect merchant

Last updated: May 9th, 11:19am

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:

PayPal Checkout

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.
DashboardRead the guide

Optional
Explore PayPal APIs with Postman

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

1

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>

      Modify the code

      Copy the sample request and modify it as follows:

      1. Copy the sample JavaScript SDK code and paste it into your checkout page.
      2. In the SDK code, replace YOUR_CLIENT_ID with your client ID.
      3. Pass parameters to replace default values, such as USD for currency. To learn more about the default values, see the JavaScript SDK script configuration.
      2

      Add payment buttons driver

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

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

      Add payment buttons to app

      Choose your JavaScript library or framework:

      • React.
      • Angular
      • Angular 2
      • Angular 2 using TypeScript
      • Vue


      React

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

      1. Component implementation
      2. Functional implementation
      3. Angular
      4. Angular 2
      5. Angular 2 using TypeScript
      6. 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}
      ReferencePayPal.comPrivacyCookiesSupportLegalContact

      If you accept cookies, we’ll use them to improve and customize your experience and enable our partners to show you personalized PayPal ads when you visit other sites. Manage cookies and learn more