JS: PayPal checkout

less than 1 minute read

PayPal Developer setup:

Step 1: we need apply a PayPal business account;
Step 2: go to https://developer.paypal.com/
Step 3: find “dashboard”!
Step 4: Create App
Step 5: find Live, and get Client ID

PayPal, React Code demo:

import React, { useState, useRef, useEffect} from "react";

function Payment(){
    const [paidFor, setPaidFor] = useState(false);
    const [loaded, setLoaded] = useState(false);

    let paypalRef = useRef();

    const product = {
        price: 1.77,
        descrition: "fancy chair, like new",
        img: "../images/candle.jpg"
    };

    useEffect(()=>{
        //load PayPal script
        const script = document.createElement("script");
        script.src = "https://www.paypal.com/sdk/js?client-id= [ Client ID]";
        script.addEventListener("load", ()=>setLoaded(true));
        document.body.appendChild(script);

        if(loaded){
            setTimeout( ()=>{
                window.paypal.Buttons({
                    createOrder:(data, actions) => {
                        return actions.order.create({
                            purchase_units: [
                                {
                                    descrition: product.descrition,
                                    amount: {
                                        currency_code: "USD",
                                        value: product.price
                                    }
                                }
                            ]
                        });
                    },
                    onApprove: async (data, actions)=>{
                        const order = await actions.order.capture();
                        setPaidFor(true);
                        console.log(order);
                    },
                }).render(paypalRef);
            });
        }


    });
    return(
        <div>
            {paidFor ? (
                <div>
                    <h1>You had bought it</h1>
                </div>
            ):(
                <div>
                    <h2 className= "payment-h2">
                        {product.descrition} for ${product.price}
                    </h2>
                    <div ref={v=>(paypalRef = v)}/>
                </div>
            )}

        </div>
    )

}

export default Payment;

Reference

Updated: