Standard payments with single-page applications

DocsCurrentStandardDirect merchant

Last updated: Apr 19th, 11:39pm

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
Standard Checkout

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

Standard 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 },
      15 // use the "body" param to optionally pass additional order information
      16 // like product skus and quantities
      17 body: JSON.stringify({
      18 cart: [{
      19 sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
      20 quantity: "YOUR_PRODUCT_QUANTITY",
      21 }, ],
      22 }),
      23 })
      24 .then((response) => response.json())
      25 .then((order) => order.id);
      26 }
      27 onApprove(data) {
      28 // Order is captured on the server
      29 return fetch("/my-server/capture-paypal-order", {
      30 method: "POST",
      31 headers: {
      32 "Content-Type": "application/json",
      33 },
      34 body: JSON.stringify({
      35 orderID: data.orderID
      36 })
      37 })
      38 .then((response) => response.json());
      39 }
      40 render() {
      41 return ( <
      42 PayPalButton createOrder = {
      43 (data, actions) => this.createOrder(data)
      44 }
      45 onApprove = {
      46 (data, actions) => this.onApprove(data)
      47 }
      48 />
      49 );
      50 }
      51}

      We use cookies to improve your experience on our site. May we use marketing cookies to show you personalized ads? Manage all cookies