Stripe Integration
Handling Stripe payments and webhooks.
Adding Stripe Payment
To get started, ensure you have a Stripe account and access the Developers section in the Stripe Dashboard.
1. Setting up Payment Integration with the Stripe Embeddable Pricing Table
Pricing Table is a no code solution from stripe and is specifically designed for first-time purchases. It simplifies the process by allowing you to integrate an iframe directly into your webpage. This iframe will display various pricing options available to your new customers.

2. Embedding Pricing Table over the UI
Add the embed pricing table code snippet over the task related to Stripe integration and ask Databutton to use it for the UI. Example prompt :
Embed this stripe table and create a PricingTable UI component :
<paste the pricing table embed code that we copied earlier>
Alternatively, copy the template code given below and paste over a page/UI components. Make sure to replace with your actual pricing-table-id
and publishable-key
.
3. API for handling webhook
The stripe_webhook
endpoint gets triggered when Stripe sends a POST request to your webhook URL. This happens when specific events occur in your Stripe account, such as a successful payment through Stripe Checkout.
Generating stripe_webhook
API via task execution
stripe_webhook
API via task executionTo provide additional details to Databutton , you need to add the following prompt in your active task :
- I would like to create a stripe webhook on sucessfull payment checkout.
- Use the Stripe Python package to integrate this webhook.
- Guide me on how to perform each steps in details
- Let me know when you need the STRIPE_SECRET_KEY and STRIPE_WEBHOOK_SECRET
[OPTIONAL PROMPT]
- I would like to start small. So store the event details as json over databutton storage.

Adding stripe_webhook API manually ↓

How to get the Stripe API Key and add over Databutton:
Go to the Stripe Dashboard.
Navigate to Developers.
Click on API keys.
Copy the secret key and paste it into Databutton/config/secrets.
How to configure the Webhook Endpoint and fetch the Webhook:
Go to the Stripe Dashboard.
Navigate to Developers.
Click on the Webhooks tab.
Click "Add endpoint"
On clicking the "Webhooks" tab -> At the lower left hand side, click the "Add an endpoint" button to create a new Endpoint. The Endpoint URL needs to be added there. Follow the steps below to enter the correct endpoint url. In order to enter the endpoint URL, we need two things (a) API Prefix and (b) Router name of the wehbhook API.
API Prefix can be found here : Settings→ Production → API Prefix ( API Prefix will only appear when your app is deployed )
router_name : In the template code given below, the router name used is
webhook
. Here's the ref line@router.post("/webhook")
. You can find the entire code for the API below.Copy the webhook secret ("whsec_xxxxxx") and paste it into Databutton/config/secrets
The Webhook Secret Key can be obtained once the Endpoint is created by clicking on the "Reveal" option. Make sure to copy the secret and store over Databutton Config. While selecting events to send, you can choose specific events, such as those related to the customer (e.g.,
checkout.session.completed
)
You can start with our Stripe + Firestore template here.
Last updated
Was this helpful?