PayPal Commerce Platform for Business / Accept Payments / Checkout / Configure Payments / Standard Payments with Single Page Applications

Standard payments with single page applications

DocsCurrent


Use this guide if your website uses single page applications to accept payments.

Know before you code

  • Complete the steps in Get started to get your sandbox account information from the Developer Dashboard:

    • Client ID
    • Access token
    • Business account credentials

How it works

You'll add payment buttons to your single page app with this single line of code.

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

paypal.Buttons.driver("angular", window.angular);

paypal.Buttons.driver("angular2", ng.core);

paypal.Buttons.driver("vue", window.Vue);

1. Add the JavaScript SDK

The JavaScript SDK displays relevant payment methods on your checkout page. Place the following script tag, based on how you plan to render payment buttons, in your index.html page, so the paypal object is available when you need it in the checkout flow.

  • Render payment buttons immediately:

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

  • Render payment buttons after user action, navigation, or page change.

    Include the defer object in the JavaScript SDK script:

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

Add and modify the code

  1. Copy the sample JavaScript SDK code and paste it into the code of your checkout page. This sample code is optimized for JavaScript performance. To learn more about this and other optimization considerations, see JavaScript SDK performance optimization.
  2. In the SDK code, replace YOUR_CLIENT_ID with your client ID.
  3. Explicitly pass parameters to override the default values the PayPal JavaScript SDK uses. Review the JavaScript SDK script configuration reference to learn about these default values. Example: currency defaults to USD.

2. Add the code

Choose your JavaScript library or framework.

React

Component implementation and functional implementation.

Component implementation

import React from "react";
import ReactDOM from "react-dom"

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

class YourComponent extends React.Component {
  createOrder(data, actions) {
    return actions.order.create({
      purchase_units: [
        {
          amount: {
            value: "0.01",
          },
        },
      ],
    });
  }

  onApprove(data, actions) {
    return actions.order.capture();
  }

  render() {
    return (
      <PayPalButton
        createOrder={(data, actions) => this.createOrder(data, actions)}
        onApprove={(data, actions) => this.onApprove(data, actions)}
      />
    );
  }
}

Functional implementation

import React from "react";
import ReactDOM from "react-dom"

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

function YourComponent() {
  const createOrder = (data, actions) =>{
    return actions.order.create({
      purchase_units: [
        {
          amount: {
            value: "0.01",
          },
        },
      ],
    });
  };

  const onApprove = (data, actions) => {
    return actions.order.capture();
  };

  return (
    <PayPalButton
      createOrder={(data, actions) => createOrder(data, actions)}
      onApprove={(data, actions) => onApprove(data, actions)}
    />
  );
}

Angular

paypal.Buttons.driver("angular", window.angular);

angular
  .module("app", ["paypal-buttons"])
  .controller("appController", function ($scope) {
    $scope.opts = {
      createOrder: function (data, actions) {
        return actions.order.create({
          purchase_units: [
            {
              amount: {
                value: "0.01",
              },
            },
          ],
        });
      },

      onApprove: function (data, actions) {
        return actions.order.capture();
      },
    };
  });

<body ng-app="app" ng-controller="appController">
  <paypal-buttons props="opts"></paypal-buttons>
</body>

Angular 2

(function () {
  const PayPalButton = paypal.Buttons.driver("angular2", ng.core);

  const appComponent = ng.core
    .Component({
      selector: "my-app",
      template: `
          <div id="app">
            <paypal-buttons [props]="{
                createOrder: createOrder,
                onApprove: onApprove
            }"></paypal-buttons>
          </div>
      `,
    })
    .Class({
      constructor: function () {
        this.createOrder = (function(data, actions) {
          return actions.order.create({
            purchase_units: [{
                amount: {
                    value: '0.01'
                }
            }]
        }).bind(this);

        this.onApprove = (function(data, actions) {
          return actions.order.capture();
        }).bind(this);
      },
    });

  const appModule = ng.core
    .NgModule({
      imports: [ng.platformBrowser.BrowserModule, PayPalButton],
      declarations: [appComponent],
      bootstrap: [appComponent],
    })
    .Class({
      constructor: function () {},
    });

  document.addEventListener("DOMContentLoaded", function () {
    ng.platformBrowserDynamic
      .platformBrowserDynamic()
      .bootstrapModule(appModule);
  });
})();

Angular 2 using TypeScript

@ng.core.Component({
  selector: 'my-app',
  template:`
    <div id="app">
        <paypal-buttons [props]="{
            createOrder: createOrder,
            onApprove: onApprove
        }"></paypal-buttons>
    </div>
  `,
})
class AppComponent {
    private createOrder(data, actions) {
      return actions.order.create({
          purchase_units: [{
              amount: {
                  value: '0.01'
              }
          }]
      });
    }

    private onApprove(data, actions) {
      return actions.order.capture();
    }
}

@ng.core.NgModule({
    imports: [
        ng.platformBrowser.BrowserModule,
        paypal.Buttons.driver('angular2', ng.core)
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [
        AppComponent
    ]
})
class AppModule {}

ng.platformBrowserDynamic
    .platformBrowserDynamic()
    .bootstrapModule(AppModule);

Vue

<div id="container">
  <app></app>
</div>
<script>
  const PayPalButton = paypal.Buttons.driver("vue", window.Vue);

  Vue.component("app", {
    // The style prop for the PayPal button should be passed in as `style-object` or `styleObject` to avoid conflict with Vue's `style` reserved prop.
    template: `
      <paypal-buttons :on-approve="onApprove" :create-order="createOrder" :on-shipping-change="onShippingChange" :on-error="onError" :style-object="style" />
    `,
    components: {
      "paypal-buttons": PayPalButton,
    },

    computed: {
      createOrder: function () {
        return (data, actions) => {
          return actions.order.create({
            purchase_units: [
              {
                amount: {
                  value: "10",
                },
              },
            ],
          });
        }
      },
      onApprove: function () {
        return (data, actions) => {
          return actions.order.capture();
        }
      },
      onShippingChange: function () {
        return (data, actions) => {
          if (data.shipping_address.country_code !== 'US') {
            return actions.reject();
          }
          return actions.resolve();
        }
      },
      onError: function () {
        return (err) => {
          console.error(err);
          window.location.href = "/your-error-page-here";
        }
      },
      style: function () {
        return {
          shape: 'pill',
          color: 'gold',
          layout: 'horizontal',
          label: 'paypal',
          tagline: false
        }
      },
    },
  });

  const vm = new Vue({
    el: "#container",
  });
</script>

Next steps

Test and go live