To get started, ensure you have a and access the 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.
Setting up with the pricing table ( detailed instruction )
Click +Create pricing table.
Add products relevant to your customers (up to four per pricing interval). Optionally, include a free trial.
Adjust the look and feel in Display settings. You can highlight a specific product and customize the language, colors, font, and button design.
Configure payment settings by clicking Continue. Customize what customers see on the payments page and whether to display a confirmation page or redirect customers back to your site after a successful purchase.
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.
Template code for Embedding Pricing Table
import { useEffect } from "react";
// Declare the custom element
declare global {
namespace JSX {
interface IntrinsicElements {
"stripe-pricing-table": any;
}
}
}
export default function App() {
useEffect(() => {
const script = document.createElement("script");
script.src = "https://js.stripe.com/v3/pricing-table.js";
script.async = true;
document.head.appendChild(script);
}, []);
const clientReferenceId = "your_client_reference_id"; // Replace with actual client reference ID
return (
<div>
<stripe-pricing-table
pricing-table-id="prctbl_XXXX"
publishable-key="pk_test_XXXX"
client-reference-id={clientReferenceId}
></stripe-pricing-table>
</div>
);
}
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
To 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 ↓
This step requires : STRIPE_SECRET_KEY key and STRIPE_WEBHOOK_SECRET key and add it to Databutton secrets. For adding over to Databutton secrets hover to Config (⚙️). Instruction given below on how to obtain the secret keys.
How to get the Stripe API Key and add over Databutton:
Go to the Stripe Dashboard.
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.
Click "Add endpoint"
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
While selecting events to send, you can choose specific events, such as those related to the customer (e.g., checkout.session.completed)
While adding the endpoint url, the Correct API prefix and Router Name is important.
Template code for Webhook Implementation
API (stripe_webhook)
from fastapi import APIRouter, Request, HTTPException
import stripe
import databutton as db
router = APIRouter()
# Initialize Stripe with the secret key
stripe.api_key = db.secrets.get("STRIPE_SECRET_KEY")
# Webhook endpoint to handle Stripe events
@router.post("/webhook")
async def stripe_webhook(request: Request):
print("Received stripe-webhook")
payload = await request.body()
sig_header = request.headers.get("Stripe-Signature")
webhook_secret = db.secrets.get("STRIPE_WEBHOOK_SECRET")
try:
event = stripe.Webhook.construct_event(payload, sig_header, webhook_secret)
# Check for the specific event type
if event["type"] == "checkout.session.completed":
session = event["data"]["object"]
session_id = session.get("id")
customer_email = session["customer_details"]["email"]
customer_id = session.get("customer")
client_reference_id = session.get("client_reference_id")
subscription_id = session.get("subscription")
payment_intent_id = session.get("payment_intent")
invoice_id = session.get("invoice")
payment_status = session.get("payment_status")
currency = session.get("currency")
amount_subtotal = session.get("amount_subtotal")
total_details = session.get("total_details")
product_details = []
# Retrieve the full Checkout Session details including line items
checkout_session = stripe.checkout.Session.retrieve(session_id, expand=["line_items"])
line_items = checkout_session["line_items"]["data"]
for item in line_items:
product_details.append(
{
"product_id": item["price"]["product"],
"price_id": item["price"]["id"],
"quantity": item["quantity"],
"amount_total": item["amount_total"],
}
)
# Store specific details from the event
event_details = {
"id": event["id"],
"type": event["type"],
"created": event["created"],
"client_reference_id": client_reference_id,
"customer_email": customer_email,
"customer_id": customer_id,
"subscription_id": subscription_id,
"payment_intent_id": payment_intent_id,
"invoice_id": invoice_id,
"payment_status": payment_status,
"currency": currency,
"amount_subtotal": amount_subtotal,
"total_details": total_details,
"product_details": product_details,
}
db.storage.json.put(f"stripe-webhook-event-details-{event['id']}", event_details)
except ValueError:
# Invalid payload
raise HTTPException(status_code=400, detail="Invalid payload")
except stripe.error.SignatureVerificationError:
# Invalid signature
raise HTTPException(status_code=400, detail="Invalid signature")
return {"status": "success"}
In the Dashboard, go to More > Product catalog > .
Configure the by clicking Continue.
Click Copy code to copy the generated code and e
Navigate to .
Click on .
Navigate to .
Click on the .
Note: In the above example code, we use Databutton's in-built storage to monitor the event details with db.storage.json.put("stripe-webhook-event", event), which can be useful for verifying that the webhook integration is working correctly. Usually this step can be expanded and later added with any production level storage such as Firebase or Supabase. For integrating with Firebase datastore check the relevant section .
On prompting, Databutton guides through the entire process.
Make sure to use the name as STRIPE_SECRET_KEY and STRIPE_WEBHOOK_SECRET ove the secrets section
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.
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.
