How to use Paddle inline checkout with Wave?
Hi there 👋,
The two things that you need to do are:
Change the waveCheckout function in the `wave/resources/views/checkout.blade.php`` file to:
function waveCheckout(plan_id) {
if(vendor_id){
let product = parseInt(plan_id);
Paddle.Checkout.open({
method: 'inline',
product: product, // Replace with your Product or Plan ID
email: '@if(!auth()->guest()){{ auth()->user()->email }}@endif',
successCallback: "checkoutComplete",
allowQuantity: false,
disableLogout: true,
frameTarget: 'checkout-container', // The className of your checkout <div>
frameInitialHeight: 416,
frameStyle: 'width:100%; min-width:312px; background-color: transparent; border: none;' // Please ensure the minimum width is kept at or above 286px with checkout padding disabled, or 312px with checkout padding enabled. See "General" section under "Branded Inline Checkout" below for more information on checkout padding.
});
} else {
alert('Paddle Vendor ID is not set, please see the docs and learn how to setup billing.');
}
}
After that in the plans blade view, add the inline Paddle div which would show the inline checkout where you want it to be displied:
<div class="checkout-container"></div>
For the TALL Stack Theme, adding this in the resources/views/themes/tallstack/livewire/settings/plans.blade.php file should work fine.
And for the TailwindCSS theme, you could add it directly on top of the resources/views/themes/tailwind/partials/plans.blade.php file.
Let me know how it goes!
1
Hey Bobby, would it be simple to modify this so that it executes this function on page load? So I will have a page for choosing the subscription plan, and then each plan will go to a different page where the checkout will load automatically?
Like this
If you can think of any other tips that I can do to make this smooth for the user, I would appreciate it.
Thank you!
Hi there,
I believe that you should be able to just call the function right after its definition in order to call it, eg:
window.onload = function() {
waveCheckout(plan_id);
};
That way it will be called directly after the page has been loaded and the user will not have to take any action.
Hope that this helps!