Is it possible and allowed to use custom (own) PayPal button with Express Checkout and REST API?
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:
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.
Use basic checkout, that requires a redirect back and forth. Old school tech still working.
Try to workaround the limited checkout.js and find the secret API behind it to create your customized button.
I went for option 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 :^)
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