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

Issue

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.

Solution

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 their 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 available solution.

Based on the UI shown, what you might op 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"
            },

            // Set up the transaction
            createOrder: function(data, actions) {

                return actions.order.create({
                    purchase_units: [{
                        amount: {
                            value: '88.44'
                        }
                    }]
                });
            },

            // Finalize the transaction
            onApprove: function(data, actions) {
                return actions.order.capture().then(function(orderData) {
                    // Successful capture! For demo purposes:
                    console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
                    var transaction = orderData.purchase_units[0].payments.captures[0];
                    alert('Transaction '+ transaction.status + ': ' + transaction.id + '\n\nSee console for all available details');

                    // Replace the above to show a success message within this page, e.g.
                    // const element = document.getElementById('paypal-button-container');
                    // element.innerHTML = '';
                    // element.innerHTML = '<h3>Thank you for your payment!</h3>';
                    // Or go to another URL:  actions.redirect('thank_you.html');
                });
            }


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

Answered By - Preston PHX

Answer Checked By - Cary Denson (PHPFixing Admin)