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.

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.

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