How to use Paddle inline checkout with Wave?

Solved
bitmap

Sep 19th, 2022 04:13 AM

I want to use the Paddle inline checkout instead of the default one. Has anyone tried it?

bobbyiliev

Sep 19th, 2022 04:15 AM

Best Answer

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!

Report
1