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

Question

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.

Again, I'm not sure why you wouldn't just conditionally render the PayPal component rather than trying to hack it up. Is there some reason that wouldn't work? — isherwood
– isherwood, Commented Feb 25, 2022 at 14:03
The PayPal component is a button that when you click it opens it, I don't want this, I want to have it opened from my own handler — nick
– nick, Commented Feb 25, 2022 at 14:05
Perhaps you can hide the button, and then trigger a click event on it via script? (I don't know how exactly these buttons render, if they hide in shadow DOM or are in an iframe loaded from paypal, then this of course won't work.) — C3roe
– C3roe, Commented Feb 25, 2022 at 14:13
@CBroe yeah this is what I wanted to avoid but I think it's the only option, either that or open a modal with the paypal button when I click on Pay, but now it's another click for the user :/ — nick
– nick, Commented Feb 25, 2022 at 14:14
Right, so use your own button and use your own handler. When you detect click on your button, trigger click on the PayPal component's button (assuming there's no API option to have it shown initially). — isherwood
– isherwood, Commented Feb 25, 2022 at 14:17

Preston PHX · Accepted Answer · 2024-03-13 12:50:13Z

5

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): 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>

edited Mar 13, 2024 at 12:50

answered Feb 25, 2022 at 22:26

Preston PHX

30.8k5 gold badges27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nick Over a year ago

Hi thanks for your response, we will use the redirect method for the moment being, but I'll mark your answer as correct so maybe it can help someone!

Preston PHX Over a year ago

In that case the return to your site needs to display a final order review page, with an action that will trigger a capture of the payment and display success/failure. Alternatively, you can set user_action in the create API call so that the final button on PayPal says "Pay Now", and instead of showing a review page on return, immediately do the capture and show the result. Again, though, the JS SDK is a better experience because payment approval is "in context", keeping your site loaded in the background and not redirecting a way from it. Modern websites should prefer this...

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related