Merchants may want to customize the PayPal button to match their design. The styling options the PayPal JS SDK provides may not be sufficient in such cases.
This is a proof of concept showcasing how to technically still use the JS SDK (instead of a redirect) in such cases.
This brings the advantage of the "in-context" experience (aka "mini-browser"), which means the buyer doesn't need to leave the checkout page but confirms the PayPal payment in a "pop-up" window.
The approach shown here is a hack.
Consider changing the shape, color, label, height, etc. in the styling options of the button before adopting this approach.
Since the PayPal button is protected in an iframe (and browsers do not even allow delegating clicks anymore), the only remaining option is to stack two buttons behind each other and visually hide the PayPal button on top.
So the steps performed here are:
- Ensure both buttons (custom and official) behave the same in all viewports with regards to size
- Stack them with the official button being on top.
- Apply oppacity to the official button.
Check out the lib folder.
paypal.js is the prototypical client-side JS SDK integration.
PayPalButtons.svelte contains a rough PayPal button integration in Svelte (without implemented callbacks or even server-side references).
CustomPayPalButton.svelte ultimately shows how to build your custom PayPal Button that (through a trick) still triggers the "in-context" flow.
Install the dependencies:
npm installExecute the app in dev mode:
npm run dev