Has anyone used Paddle's Inline checkout on wave? It doesn't seem to work.

ernestan972 ・

Jan 17th, 2022 06:52 AM

Hey talents!

I built my saas app using wave, but for visual experience and conversion rate, I want to use Inline checkout, not Overlay checkout, but it doesn't seem to work? Has anyone used it before?

Thank you!

stevenayers63 ・

Jan 17th, 2022 07:06 AM

I'm interested in this as well.

Report
1
bobbyiliev ・

Jan 18th, 2022 12:29 AM

Hi there Jo and Steve πŸ‘‹,

After our chat on Discord yesterday I've decided to take a look into this and have managed to get it to work.

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!

ernestan972 ・

Jan 18th, 2022 12:47 AM

Thanks Bobby, I'll try it as soon as I can, thanks for the answer!

bobbyiliev ・

Jan 18th, 2022 01:00 AM

No problem at all! Hope that it works well for you!