Standard payments with single-page applications

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

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}