CODEWITHSUNDEEP
javascriptreactjspaypal
nick
nick

Reputation: 3239

How to have a custom handler instead of a PayPal button in React?

I have a website with multiple payment forms. I can switch between them and then I have a button with "Continue to checkout" label that when you click, it does something depending on the payment method chosen. The handler function looks something like this:

const handlePayment = (method) => {
   if(method === paymentMethods.STRIPE){
       // do something
   }

   if(method === paymentMethods.PAYPAL){
       // do something else
   }
}

The problem is I looked at the docs and it's always about showing a PayPal button, I don't want a PayPal button, I want to open the PayPal form directly from my button, when a method is selected.

So want I mean is, I want to do it programmatically. Is there any way to do this? I don't want to do a hacky solution hiding the button or triggering the click or some weird thing...

The React PayPal component is just a wrapper for the JS SDK.

My UI looks something like this: I'd like to open the PayPal payment form when I click on Pay, only if PayPal is selected.

enter image description here

Upvotes: 3

Views: 2360

Answers (1)

Preston PHX
Preston PHX

Reputation: 30377

If you use the PayPal JS SDK to open the checkout, you have to use its button, and the user has to click it themselves. PayPal does this intentionally so that the button shown uses its consistent branding.

If you want an alternative, you can integrate without the JS SDK (REST API only) and have your own button which redirects to the PayPal page for approval, which will then return to your site. This is an old integration pattern, for old websites, and not recommended.

Despite your misgivings and desire not to use it, the JS SDK and its button in a container sized to your requirements is in fact the best solution and user experience, mainly since it keeps your site loaded without redirecting away.

Based on the UI shown, what you might opt to do is hide your "Pay" button and replace it with one that says "Pay With PayPal" when that method is selected, which could look like this (sized to fit your container): enter image description here Here's sample HTML/JS for that, you can do the same from react-paypal-js :

    <script src="https://www.paypal.com/sdk/js?client-id=test&currency=USD"></script>

    <div id="paypal-button-container"></div>

    <script>
        paypal.Buttons({
            fundingSource: paypal.FUNDING.PAYPAL,
            style: {
                color: "blue",
                label: "pay"
            },

            createOrder: function(data, actions) {
                //...

            onApprove: function(data, actions) {
                //...
            }


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

Upvotes: 4

Related Questions