CODEWITHSUNDEEP
node.jsreactjspaypalpaypal-sandbox
Rittesh P.V
Rittesh P.V

Reputation: 423

Paypal Integration with reactjs -node.js -Guidance on implementation

Usage of smart payment buttons by PayPal:

how to use the smart payment button in Paypal ? when I am rendering the button I am getting errors , this is the script which I want to use here :

https://developer.paypal.com/demo/checkout/#/pattern/client

I am using the useEffect to load the script :

useEffect(() => {
    const script = document.createElement('script');

    script.src = "https://www.paypal.com/sdk/js?client-id=AZOEGr_kwtZWZ2_Hy46cHBs1pYR_Ly68zMWymBQX88AlUM70HifIuAbwaUW_92BXhCxAozxqFDBLU5wj&currency=USD";
    script.async = true;

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    }
  }, []);

after that , I am rendering the summary of the registration in card where I want to render this Paypal smart button

<Card className={classes.card}>
        <CardContent style={{textAlign:"center"}}>
            .....
            //registration details
            .....
        </CardContent>
        <CardActions style={{justifyContent:"center"}} >
            {renderPaypal}
         // renderPaypal invokes the function to render the button
        </CardActions>

    </Card>

Here this is the function where I render the button :

   const renderPaypal=()=>{
    return (
        <script>
    // Render the PayPal button into #paypal-button-container
    paypal.Buttons({

        // Set up the transaction
        createOrder: function(data, actions) {
            return fetch('/demo/checkout/api/paypal/order/create/', {
                method: 'post'
            }).then(function(res) {
                return res.json();
            }).then(function(data) {
                return data.orderID;
            });
        },

        // Finalize the transaction
        onApprove: function(data, actions) {
            return fetch('/demo/checkout/api/paypal/order/' + data.orderID + '/capture/', {
                method: 'post'
            }).then(function(res) {
                return res.json();
            }).then(function(details) {
                // Show a success message to the buyer
                alert('Transaction completed by ' + details.payer.name.given_name + '!');
            });
        }


    }).render('#paypal-button-container');
</script>

)
}

Upvotes: 0

Views: 2650

Answers (1)

Preston PHX
Preston PHX

Reputation: 30369

There is a guide here: https://developer.paypal.com/docs/checkout/reference/server-integration/#

But if you want to use the code in the samples directory, there is this one for the capture intent: https://github.com/paypal/Checkout-NodeJS-SDK/tree/develop/samples/CaptureIntentExamples

For your front-end web code, this is best: https://developer.paypal.com/demo/checkout/#/pattern/server

For refunding the payment, in the capture intent examples there is an example invocation of the refund method using a captureId : https://github.com/paypal/Checkout-NodeJS-SDK/blob/2476cd9c0ed7fdda5402bc7a2094522e6d719f5d/samples/CaptureIntentExamples/runAll.js

So that looks to be enough to figure it out how to use it

Upvotes: 2

Related Questions