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.

Embeddable pricing table for SaaS businesses

Setting up with the pricing table ( detailed instruction )

1. In the Dashboard, go to More > Product catalog > pricing tables.
2. Click +Create pricing table.

3. Add products relevant to your customers (up to four per pricing interval). Optionally, include a free trial.

4. Adjust the look and feel in Display settings. You can highlight a specific product and customize the language, colors, font, and button design.

5. 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.

6. Configure the customer portal by clicking Continue.
7. Click Copy code to copy the generated code and embed it into your website

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. 

On prompting, Databutton guides through the entire process.

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.

Make sure to use the name as STRIPE_SECRET_KEY and STRIPE_WEBHOOK_SECRET ove the secrets section

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)

While adding the endpoint url, the Correct API prefix and Router Name is important.

Note: The stripe webhook API / backend needs to be deployed ( just hit the one-click deploy button at the top right hand corner) after each change for Stripe to access the latest production. Also, ensure it's not behind authentication (if it is, disable the shield by clicking the three dots adjacent to the backend).

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"}

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 here .

You can start with our Stripe + Firestore template here.