Stripe Checkout Customer ID to Xano

[foliodc]

Getting started with the new stipe plugin! Thought I would share how I am setting up Subscriptions with user accounts in Xano because it took me a long time to figure out.

1. Install the plugin including test keys

2. Add a workflow to the element that initiates the checkout.

3. In order to connect the purchase to a user, I am creating a Stripe Customer first and adding that id to the correct user in Xano. Query all user records and filter by authorized user. If the stripe id does not exist, then use Stripe Customer API (https://api.stripe.com/v1/customers) to create one, and then add that customer id to your user’s account. I used the “Import Curl” button with the input on the Stripe documentation page, then customized for name and email. Return the user info.

4. Fill in the Weweb stripe checkout workflow, using the result from step 1. This button is for a single subscription, so I copied the Price ID from Stripe directly. I don’t have a fancy success page yet, just sending back to the profile. Will look into success popup using a query.

5. We need to send the subscription update to Xano to show that the account has been upgraded. Create a table called subscriptions, and Create a Post request in Xano that accepts JSON. I based this on the Xano Stripe webhook example/tutorial. Need to find the matching user record.

6. Create a Webhook in Stripe with the alerts below. Set the url to the new endpoint in Xano.

This is as far as I’ve gone, but I think I could check the user status in Weweb this way. I will also check out the weweb customer portal when I get the chance.

I was using Outseta before with Webflow. That was much easier and may be a good option for a plugin. This method is nice because I learned a lot about how the parts work together, which should come in handy when I add more features. Thanks for the new feature to play with!

[dorilama]

Very nice guide. Learning how to use the Stripe API directly is always more powerful than a readymade integration.Well done!

2 things you can add to improve the security of the webhook:

• accept requests only from the official Stripe IP addresses

• verify the signature to be sure that you can trust the data in the request. As an alternative you can also query the Stripe API to check the legitimacy of the data but in this way you don’t use the full potential of the webhook.

[noncodeur]

Thanks for the guide.

I’m already stuck at step #2

What is the Xano request at “Xano Add/Get Stripe Customer ID” action?

[CedricFR73]

[Post written in French and translated into English using an application.]
@foliodc

Thank you and well done for this tutorial!

However, there’s something I can’t quite understand…
At what point in your tutorial does the user enter their banking details? For example, their card numbers.

I can’t find any concise and precise tutorial that goes from A to Z, covering the steps on the WeWeb side, the Xano side, and the Stripe side.

So, I feel like the Stripe integration in WeWeb isn’t working, because no one provides a real process from scratch.

Does it work on your end?

[danlopes]

Hi @CedricFR73

The WeWeb Stripe plugin is working, but it’s only meant for super basic transactions; since the industry standard is to manage most of Stripe through a backend; not the frontend. New documentation on the Stripe plugin will be released soon, highlighting this fact. You don’t manage complex payments in the frontend; you just don’t; WeWeb is not meant for this. What I advise is getting to know the Stripe API as much as possible and how it integrates with the backend of your choice. Consider alternatives over the plugin, such as Stripe payment links and other solutions.