One-time payment - button with Stripe modal

Hey guys,

My use-case is as follows.

I have users from a mobile device who are with customers, in person. They have a customer record in a table - the table is customers they’re assigned. When with the customer, they’re going to collect a payment.

  1. The user clicks the link/button
  2. A payment modal, such as Credit Card or ACH, is presented
  3. The user enters the payment information (one-time payment)
  4. The payment collected is for a single master Stripe account

I’ll admit I haven’t tried yet but currently talking to a prospect where this is a need. And since there are some smart folks here, it’s worth asking; feasible without 3rd party tools? (other than Stripe).

Jotform is a really good option right now. You can set it up with integromat or Zapier to feed purchase info back into Tadabase.

Hey Tim,

Thanks for chiming in. One of your posts did mention how you’ve incorporated Jotform. Ideally I’d like to eliminate to use of additional tool, as I’m sure anyone else would as well. Perhaps I can figure it out!

Ideally:

  1. Payment button displayed
  2. Modal opens when button pressed
  3. Payment collected, passed to Stripe and, upon success, updates a field in the Database for the record

I’ll update here if I can get it working to some degree.

Definitely! Please do post if you make progress. I battled with the Stripe API call for creating a charge. Never got it working.

Did you take a look at Stripe Checkout?

Briefly, yes.

If I remember correctly, it requires html+JavaScript in an html component which is currently not possible. Couldn’t get it working by separating the JavaScript, although my JavaScript is weak.

Did you happen to try using the Stripe “Pipe”? Just noticed it’s an option so I might go that route.

Reading through some documentation on Stripe options, as you indicated, they may not be possible due to how it requires interaction but I could be wrong.

Yup, with the Stripe pipe.

The call you need to make is “Create a Charge” - https://stripe.com/docs/api/charges

The confusing bit that I couldn’t get to work was creating a source.

https://stripe.com/docs/api/sources/create

A source has to be created before you can charge that source an amount. In the documentation here, it says TYPE is required. I couldn’t get any value to pass correctly. I tried CARD but it wouldn’t take it.

I honestly didn’t spend a ton of time on it because JotForm was so much easier for my purpose.

Do the customers login to the application or is your employee the one logging in?

We rebuilt our Subscription components and it might be possible you can get this to work with the latest component. It would require your customers to login though. I believe this update is still in Staging, but it should be published very soon.

You can see this article: https://docs.tadabase.io/categories/manual/article/adding-stripe-subscriptions

Man, the new subscriptions component looks really good!

https://beta.tadabase.io if you wanna take a look at it.

Does it work with existing apps? I don’t see any options for subscriptions.

It should work.

Did you enable Stripe? You must first enable Stripe, add your API Keys and save.

Let me kno

Great question, Moe.

If I said “both”, would you be surprised?

Technically I have both use-cases, but the more immediate use-case is where the User/Employee is logged in to collect a Payment on a customer record. With that said it would be incredible if the Employee could trigger an email/SMS which then gives the customer an option to pay on their own with a unique link to a public page. I have the public page concept working in one of my apps for a slightly different purpose, too.

Whoooaaaa, this is straight :fire::fire::fire::fire:

1 Like

You can get this to work, but it would take a bit of configuration. Here’s how I would go about it.

  1. Create a Checkout Session with the Stripe Pipe.
  2. Save the Checkout Session ID to the Order Record
  3. Send the User an email with a link that brings them back to Tadabase, then using Javascript and the Stripe API direct them to Stripe to make payment.

The other option is via creating an invoice in Stripe Pipe and setting the option to Send it. You simply pass all the details including email addres and Stripe sends the invoice.

Later today I’ll give this a go and maybe I’ll make a video of this whole process and post it here. Might be too complex to write it out. But 100% confident this is possible.

Made a video for you to see the full process.

Let me know if you have any questions.

Outstanding explanation Moe. Can you share the Javascript you had added?

The only other scenario here would be when there aren’t predefined products from Stripe, rather that you’re with a customer creating ‘items’ in an Order on the fly (like a free-form Invoice), setting a price per item, and then have a total amount.

Imagine that you’re pulling from a list of Products with a standard price. You (user) can use the standard price or update the price for the particular order. A more fitting example would be for landscaping where a Pro is with a customer picking a bunch of services from their database and setting the final price of each. Perhaps something like this:

  1. Raking $100
  2. Mulching $250
  3. Mowing $70

Those are the three that exist in the list. But for John, the customer, the Invoice is going to be:

  1. Raking $400
  2. Mulching $250
  3. Mowing $70

(they have a ton of leaves and will take a lot more work)

The total being $720 here, the user would be able to create a charge for that amount instead of the pre-defined amount.

I believe this would still be using a ‘Create Charge’ call.

I might be missing a bunch of information here but you could still have those price_id’s in Tadabase and use a field for quantity, like Moe did, as a modifier.

Raking base rate of $100 x 3

A couple challenges are:

  • The product cost might not be a multiple, maybe it’s $72 instead of a standard $45.
  • If a product doesn’t already exist as a selection option then the user wouldn’t be able to move forward
  • Adding products from Stripe requires the manual setup process where adding additional products would need to be done ahead of time

There are cases where a standard set of Products should be made available. Reporting via Stripe is much easier when this is the case, such as knowing which Products have been used, breakdown of financials, and taxes if it comes in to play.

For the other cases where a user needs to add a completely unique price of their own, and perhaps a product that doesn’t exist, it’s a barrier. Imagine being a Landscaper while quoting a customer who asks you to plant a specific type of plant that you don’t have in your list. You’ll still want to add it to the quote but you’ll need to add the item ad-hoc.