Paddle inline checkout
Per another thread that someone asked about this (found here) I tried this and it works pretty well. I'm only having small issue where Wave will not detect the final steps of the checkout process if I do not have @livewire('wave.settings.plans') in my checkout page. This is not necessary for the flow of my checkout, so worst-case-scenario I can probably just hide the div with css, but I wanted to know if there was something simple I could modify to allow the checkout to finish without these pricing divs pre-loaded?
It took a long time to figure this out, but I eventually did with random testing, and I've found that clicking the "select plan" pricing button that goes with the plan is not necessary, I'm using the window.onload waveCheckout(plan id here) bit of code you suggested, and so it seemed that there was no listen event tied to the actual click of the button other than to pass the plan id, which i'm doing elsewhere. Is there any other kind of event tied to those buttons on the page that I could extract out so that I do not have to load those for this inline checkout to work? Right now it gets to the very end with a spinning circle animation and the text "FINISHING UP YOUR ORDER" and it just hangs here forever.
thank you
Hi there Alex,
I will try to check this out later on today! It sounds like the redirect is not working for some reason.
In the meantime, do you see any errors in your web console or the network tab of your browser developer tools?
Thank you for checking that. I don't have any errors in console or network tab when testing this. Just hangs here:
Hey Alex,
Did you manage to get this working? I've missed your last reply for some reason... Sorry about this.
If you are still having issues with this I'll take a further look! Also I'll try to write a step by step tutorial for this as well!
Hey Bobby, I got it working with a hacky solution but I never took the time to figure out how to get it working properly. As I said above, I found that this error happens when I remove this from my the checkout blade
@livewire('wave.settings.plans')
I have not verified this but I think the checkout is getting the planID from the subscribe button in the plans block (and maybe even triggering a click of the button, it happens quickly, it's hard to tell), and so removing it is causing the error. I tried to remove it because I passed the planID with code you suggested above (I have 2 pricing plans and each one has it's own checkout page). But, I think in the Paddle checkout process, it is getting the planID for a second time from the button in the plans block, and so my guess is that I could pass the planID the second time from the same code that you suggested, and then I could safely remove the plans block.
Right now I just put the block back in and hid with CSS, which seems to work fine but obviously it's not ideal. Could be something nice to add if you wanted to do a tutorial for inline checkout, because that plans block will cause a lot of hassle for people.
Edit: you gave me the code for passing the planID on some other post, my mistake.
Just in case you need to reference this, this is the snippet you gave me to use, and I just drop this at the bottom of my blade for each plan's checkout and replace the 99999999 with the proper plan id for that checkout page (I know you are aware of this but I am just being detailed in case anyone can use this later)
<script type="text/javascript">
window.onload = function() {
waveCheckout(99999999);
};
</script>
Hey Alex,
Oh nice! Happy to hear that you've got it working that way! This seems like a totally valid implementation!