Standard payments with JavaScript frameworks

DocsCurrentLast updated: May 27th 2022, @ 10:15:49 am


Use this guide if your website uses a library or framework, like React, Vue, or Angular.

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
  • Use Postman to explore and test PayPal APIs.

How it works

You'll add payment buttons to your library or framework with this single line of code.

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

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

1import React from "react";
2import ReactDOM from "react-dom"
3const PayPalButton = paypal.Buttons.driver("react", { React, ReactDOM });
4class YourComponent extends React.Component {
5 createOrder(data, actions) {
6 return actions.order.create({
7 purchase_units: [
8 {
9 amount: {
10 value: "0.01",
11 },
12 },
13 ],
14 });
15 }
16 onApprove(data, actions) {
17 return actions.order.capture();
18 }
19 render() {
20 return (
21 <PayPalButton
22 createOrder={(data, actions) => this.createOrder(data, actions)}
23 onApprove={(data, actions) => this.onApprove(data, actions)}
24 />
25 );
26 }
27}

Functional implementation

1import React from "react";
2import ReactDOM from "react-dom"
3const PayPalButton = paypal.Buttons.driver("react", { React, ReactDOM });
4function YourComponent() {
5 const createOrder = (data, actions) => {
6 return actions.order.create({
7 purchase_units: [
8 {
9 amount: {
10 value: "0.01",
11 },
12 },
13 ],
14 });
15 };
16 const onApprove = (data, actions) => {
17 return actions.order.capture();
18 };
19 return (
20 <PayPalButton
21 createOrder={(data, actions) => createOrder(data, actions)}
22 onApprove={(data, actions) => onApprove(data, actions)}
23 />
24 );
25}

Angular

1paypal.Buttons.driver("angular", window.angular);
2angular
3 .module("app", ["paypal-buttons"])
4 .controller("appController", function ($scope) {
5 $scope.opts = {
6 createOrder: function (data, actions) {
7 return actions.order.create({
8 purchase_units: [
9 {
10 amount: {
11 value: "0.01",
12 },
13 },
14 ],
15 });
16 },
17 onApprove: function (data, actions) {
18 return actions.order.capture();
19 },
20 };
21 });
1<body ng-app="app" ng-controller="appController">
2 <paypal-buttons props="opts"></paypal-buttons>
3</body>

Angular 2

1(function () {
2 const PayPalButton = paypal.Buttons.driver("angular2", ng.core);
3 const appComponent = ng.core
4 .Component({
5 selector: "my-app",
6 template:
7 <div id="app">
8 <paypal-buttons [props]="{
9 createOrder: createOrder,
10 onApprove: onApprove
11 }"></paypal-buttons>
12 </div>
13 ,
14 })
15 .Class({
16 constructor: function () {
17 this.createOrder = (function(data, actions) {
18 return actions.order.create({
19 purchase_units: [{
20 amount: {
21 value: '0.01'
22 }
23 }]
24 }).bind(this);
25 this.onApprove = (function(data, actions) {
26 return actions.order.capture();
27 }).bind(this);
28 });
29 }});
30 const appModule = ng.core
31 .NgModule({
32 imports: [ng.platformBrowser.BrowserModule, PayPalButton],
33 declarations: [appComponent],
34 bootstrap: [appComponent],
35 })
36 .Class({
37 constructor: function () {},
38 });
39 document.addEventListener("DOMContentLoaded", function () {
40 ng.platformBrowserDynamic
41 .platformBrowserDynamic()
42 .bootstrapModule(appModule);
43 });
44})();
1(function () {
2 const PayPalButton = paypal.Buttons.driver("angular2", ng.core);
3 const appComponent = ng.core
4 .Component({
5 selector: "my-app",
6 template:
7 <div id="app">
8 <paypal-buttons [props]="{
9 createOrder: createOrder,
10 onApprove: onApprove
11 }"></paypal-buttons>
12 </div>
13 ,
14 })
15 .Class({
16 constructor: function () {
17 this.createOrder = (function(data, actions) {
18 return actions.order.create({
19 purchase_units: [{
20 amount: {
21 value: '0.01'
22 }
23 }]
24 }).bind(this);
25 this.onApprove = (function(data, actions) {
26 return actions.order.capture();
27 }).bind(this);
28 });
29 }});
30 const appModule = ng.core
31 .NgModule({
32 imports: [ng.platformBrowser.BrowserModule, PayPalButton],
33 declarations: [appComponent],
34 bootstrap: [appComponent],
35 })
36 .Class({
37 constructor: function () {},
38 });
39 document.addEventListener("DOMContentLoaded", function () {
40 ng.platformBrowserDynamic
41 .platformBrowserDynamic()
42 .bootstrapModule(appModule);
43 });
44})();

Angular 2 using TypeScript

1@ng.core.Component({
2 selector: 'my-app',
3 template:
4 <div id="app">
5 <paypal-buttons [props]="{
6 createOrder: createOrder,
7 onApprove: onApprove
8 }"></paypal-buttons>
9 </div>
10 ,
11})
12class AppComponent {
13 createOrder(data, actions) {
14 return actions.order.create({
15 purchase_units: [{
16 amount: {
17 value: '0.01'
18 }
19 }]
20 });
21 }
22 onApprove(data, actions) {
23 return actions.order.capture();
24 }
25}
26@ng.core.NgModule({
27 imports: [
28 ng.platformBrowser.BrowserModule,
29 paypal.Buttons.driver('angular2', ng.core)
30 ],
31 declarations: [
32 AppComponent
33 ],
34 bootstrap: [
35 AppComponent
36 ]
37})
38class AppModule {}
39ng.platformBrowserDynamic
40 .platformBrowserDynamic()
41 .bootstrapModule(AppModule);

Vue

1@ng.core.Component({
2 selector: 'my-app',
3 template:
4 <div id="app">
5 <paypal-buttons [props]="{
6 createOrder: createOrder,
7 onApprove: onApprove
8 }"></paypal-buttons>
9 </div>
10 ,
11})
12class AppComponent {
13 createOrder(data, actions) {
14 return actions.order.create({
15 purchase_units: [{
16 amount: {
17 value: '0.01'
18 }
19 }]
20 });
21 }
22 onApprove(data, actions) {
23 return actions.order.capture();
24 }
25}
26@ng.core.NgModule({
27 imports: [
28 ng.platformBrowser.BrowserModule,
29 paypal.Buttons.driver('angular2', ng.core)
30 ],
31 declarations: [
32 AppComponent
33 ],
34 bootstrap: [
35 AppComponent
36 ]
37})
38class AppModule {}
39ng.platformBrowserDynamic
40 .platformBrowserDynamic()
41 .bootstrapModule(AppModule);
<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 in PayPal sandbox, then go live in PayPal's production environment.