Is it possible and allowed to use custom (own) PayPal button with Express Checkout and REST API?

Question

I have implemented PayPal rest integration, and now I can create payments. So I have to enable payments approval now. I used this documentation:

https://developer.paypal.com/docs/integration/web/accept-paypal-payment/

As I can see, usage of approval_url i a legacy method (it opens approval page in a separate tab). But a modern one, described here:

https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/advanced-integration/#set-up-your-client

does require to render PayPal button using checkout.js library script. I want to use my own button, but don't know what to call to perform payment approval. And I don's know if it is allowed at all. Can not find the good answer anywhere. Please help.

Earthy

Hi, One requirement of using this script is using the button provided. We actually render the button into an iframe, so it can be upgraded in future and customized for customers, to improve their experience and conversion. We also have brand requirements that only a certain set of PayPal buttons should be used. Can I ask if there's a use-case you have that the existing buttons don't work for? It's good to have examples so we can figure out how to improve the range of buttons we have. – Jarad

Answer 1

No, not easily it isn't The customization link provided above is a poor imitation of customization. Customization to most dev's is likely to mean the ability to choose any button you want and to interact using the API programmatically. The poor API provided by paypal currently only allows choosing the color/size of their buttons. It also forces you to use their checkout.js on load so that they can track your users. I would avoid it if possible.

Basically your choices now are:

1. Use express checkout with the checkout.js they provide and submit to paypals tracking/limited customization. In paypal marketing speak, engage in the optimized loading button with fully cohesive paypal branding.

2. Use basic checkout, that requires a redirect back and forth. Old school tech still working.

3. Try to workaround the limited checkout.js and find the secret API behind it to create your customized button.

I went for option 2.

Matthaus

Hi Ryan, I am also want to opt for option #2. But how to go about it? I am happy with the old school tech :) – Rhino

Answer 2

I've discovered I was able to get this working...

I'm using https://www.paypalobjects.com/api/checkout.js then setting up my form like so:

paypal.checkout.setup('{{ $paypalMerchantID }}', {
   environment: '{{ $paypalEnvironment }}',
   container: 'paypal-payment-form',
      buttons: [{
         container: 'paypal-payment-form',
            type: 'checkout',
               color: 'gold',
               size: 'responsive',
               shape: 'pill'
      }]
});

This will create the button in the container...but you can also have a button exist in the container before hand like so:

<button data-paypal-button="true">Pay via Paypal</button>

After some testing, the only property you need is data-paypal-button="true".

Proceed to hide the ugly button:

.paypal-button-widget { display: none; }

Hacky yes but why is it so hard to use your own button Paypal :^)

Maes

Does this still work? I'm trying to use this logic in my React app but it doesn't seem to work :( – Mirisola

This doesn't work anymore. Any alternative ideas? – Famous

Answer 3

More or less you can customise buttons

for example if you want a single button without "visa" and other stuff, try this

                <script
                    src="https://www.paypal.com/sdk/js?client-id={{ config('services.paypal.id') }}">
                </script>
                <div id="paypal-button-container"></div>
                <script>
                  paypal.Buttons({
                        style: {
                            layout: 'horizontal',
                            size: 'small',
                            color:  'blue',
                            shape:  'pill',
                            label:  'pay',
                            height: 40,
                            tagline: 'false'
                        },
                        createOrder: function(data, actions) {
                          return actions.order.create({
                            purchase_units: [{
                              amount: {
                                value: '0.01'
                              }
                            }]
                          });
                        }
                    }).render(
                        '#paypal-button-container'
                    );
                </script>

documentation

Fairlie

Answer 4

Like shown in the docs by paypal:

https://developer.paypal.com/docs/classic/express-checkout/in-context/javascript_advanced_settings/?mark=checkout.setup#

And in the example following the link, when you check "Pay With PayPal" and click confirm, it triggers the payment functionality. You can remove the checkbox conditional and checkboxes and redesign confirm button as you like:

https://plnkr.co/edit/XS7EvmrCY1UlkF1nHe8x?p=preview

Houchens

+1 for showing how to do it. But this method is deprecated as per 2017. Any idea how to do it on the latest checkout? – Rhino

Answer 5

We can cover the whole Paypal button's iFrame by the custom button and use "pointer-events: none" to let user click through it. See my solution here https://nguyenphongthien.medium.com/customize-paypal-button-with-html-and-css-b08a98ee3eb0

Cheers

Lefebvre