Using bookingjs widget to collect payments before booking

[Pheels]

Is it possible to integrate payment into the widget itself without making significant code changes?

I understand that this is possible using the API but I am curious to see if it has been attempted using the widget. Is this something that has been brought up before?

Am I perhaps oversimplifying in assuming it would involve importing stripe payments (for example) and firing off a payment on the submitBookingForm function?

[laander]

Hi @Pheels !

You're on the right track indeed. Take a look at this tutorial here: https://help.timekit.io/working-with-the-api/recipes/integrating-payments

It describes the payment flow using Stripe checkout.js. It is not booking.js specific, but I think you should be able to figure it out using the approach you descibed above with the submitBookingForm or createBookingSuccessful callback (essentially, you'll create a booking in a tentative state and when payment is verified, you update the booking server-side to a paid state).

Let me know if you run into trouble 👌

[Pheels]

Interesting, I have one question that I have been struggling to work out however, perhaps you can help.

I think the best approach is attempting to overwrite the submit button on the form so that it displays a stripe/paypal button instead, which consequently calls the submit booking function once payment is taken.

I have tried to do something along the lines of finding the button on the page and overwriting the innerhtml, however to no avail. Any advice you have on the matter would really be appreciated, thanks!

[Pheels]

for anyone interested, I didn't need to overwrite the DOM, I just spawned a stripe checkout widget before submitting the booking.

you can find the code here https://github.com/Pheels/bookingjs-timekit-checkout.

thanks for the assistance.

[laander]

@Pheels Creative hack!

May i suggest an alternative approach:

Using the instant_payment graph (like in the article i linked to), you can actually create the booking first which will place it into a tentative state. Then, using the createBookingSuccessful callback, you will show Stripe checkout widget and customer will either make the payment or cancel the flow.

If the customer choses to cancel, the Timekit booking engine will automatically place the booking into the unpaid after ~5 minutes. On the other hand, if the customer pays, you should call the Timekit API from your webtask server function to place the booking into the paid state using the PUT /bookings/:id/pay endpoint (note that the booking ID will be returned in the createBookingSuccessful callback)

👆This approach is more native to Timekit and how it was designed the first way around. Don't you think that this might work?

[Pheels]

yes, I read the article and agreed that it would indeed be a more sophisticated approach.

despite this, my hack satisfies my current requirement and due to time constraints I will settle with that. If I get the time I will definitley go back and write a better solution. Or I will wait for native support 😃

[karltaylor]

@laander the only problem I'm having with this is that the user thinks the booking is complete (Receives email confirmation). But a stripe wall appears, but they can still cancel.

I want to try and integrate a flow where it looks compulsory but I don't think this is possible using booking.js

[laander]

@karltaylor You are right, the emails should probably be sent after the payment was received, not before. This would however be a breaking change to our existing graph, so it's a bit tricky to change now.

You can however disable our built-in emails and register a webhook instead to send out your own. In our admin panel, you can setup a webhook to listen to the booking paid state. Would that work fro you?

[karltaylor]

@laander Thanks for the reply! - Yeah potentially, I thought about showing the stripe pay wall using createBookingStarted. But that would mean that the user would pay for the booking before it's confirmed. And not sure what kind of trouble that could cause?

[ishanka25]

@laander can't we define a custom time which it will change to the paid state? In my case if the customer needed more than 5mins to do the transaction, it won't allow me to change the status from unpaid to paid

[laander]

@ishanka25 I think you can customize the timeout time yourself by passing booking creation a payload like this:

"timeout": {
  "time:": 5,   # integer
  "unit": "min",   # hour, min, sec
}