Standard payments with single page applications
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
deferobject 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
- 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.
- In the SDK code, replace
YOUR_CLIENT_IDwith your client ID. - 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:
currencydefaults toUSD.
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", {
template: `
<paypal-buttons [props]="{
createOrder: createOrder,
onApprove: onApprove
}"></paypal-buttons>
`,
components: {
"paypal-buttons": PayPalButton,
},
computed: {
createOrder: function (data, actions) {
return actions.order.create({
purchase_units: [
{
amount: {
value: "0.01",
},
},
],
});
},
onAuthorize: function (data, actions) {
return actions.order.capture();
},
},
});
var vm = new Vue({
el: "#container",
});
</script>
