CODEWITHSUNDEEP
javascriptreactjspaypal
Quentin
Quentin

Reputation: 371

ReactJS - How to send data to the PayPal Button?

It's probably very simple, but how do you send information to the PayPal button component? For example, the name of the products, the total value ?

Here is what I did, I tested my code and I get a "transaction success" :

// In panierPage, where the user can click on the PayPal button
import PayPal from '../services/PayPal/paypal'

    return (
                <Grid style={{marginLeft: '2%'}}>
                    <PayPal/>
                </Grid>
        );

// PayPal Button component with "default value " for testing
import React, { useEffect, useRef } from 'react';

export default function Paypal() {

    const paypal = useRef()

    useEffect(() => {
        window.paypal.Buttons({
            style: {
                color: 'gold',
            },
            createOrder: (data, actions) => {
                return actions.order.create({
                    intent: 'CAPTURE',
                    purchase_units: [
                        {
                            description: 'Une table',
                            amount: {
                                currency_code: 'EUR',
                                value: '10.00'
                            }
                        }]
                })
            },
            onApprove: (data, actions) => {
                console.log("Transaction Réussite")
                return actions.order.capture();
            },
            onCancel: (data, actions) => {
                
            }
        }).render(paypal.current)
    }, [])

    return (
        <div>
            <div ref={paypal}></div>
        </div>
    );
}

Because right now, it's hard coded price and description.

Thanks for the time and the help !

Upvotes: 0

Views: 379

Answers (1)

Preston PHX
Preston PHX

Reputation: 30377

You replace the hard coded values with dynamically set ones. Use variables, call a function like document.getElementById, or your own custom function that generates an item list array, or whatever you wish to do to obtain the necessary values values; it's JavaScript.

The result just needs to evaluate at runtime to a valid v2 Orders request object. The full syntax of the object is documented here: https://developer.paypal.com/docs/api/orders/v2/#orders-create-request-body

Upvotes: 1

Related Questions