Integration of Stripe Checkout Page in Webflow

By
 import os
import logging
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
import stripe
import uvicorn

# Constants
STRIPE_SECRET_KEY = os.environ['STRIPE_SECRET_KEY']
YOUR_DOMAIN = os.environ['YOUR_DOMAIN']
PRICE = os.environ['PRICE']

# Configure Stripe API key
stripe.api_key = STRIPE_SECRET_KEY

# FastAPI app initialization
app = FastAPI()

# CORS configuration
origins = ["*"]
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,

About this template

To integrate a custom Stripe checkout page in Webflow, you need both a backend and a frontend. This template enables you to quickly set up the backend service. It is compatible with any price point you have established through the Stripe API. After adding the API key and directing the backend service to the price ID, you can activate the backend service by clicking the test button. Then, by integrating the Stripe frontend code into a Webflow page, you instantly create a custom payment page in Webflow. This method can be used to set up various types of payment pages in Webflow, including one-time payments and subscriptions.

Introduction to the Stripe Checkout Session API Server Template

Welcome to the Stripe Checkout Session API Server template! This template is designed to help you integrate Stripe's payment processing capabilities into your Webflow project. With this template, you can create a custom payment flow that allows your customers to subscribe to your services or purchase your products with ease. Let's get started on setting up your Stripe Checkout Session API Server.

Getting Started

Click Start with this Template to begin using the Stripe Checkout Session API Server template on the Lazy platform. This will pre-populate the code in the Lazy Builder interface, so you won't need to copy or paste any code manually.

Initial Setup

Before you can test and use the app, you'll need to set up a few environment secrets within the Lazy Builder. These are crucial for the app to interact with Stripe and your Webflow site securely.

  • STRIPE_SECRET_KEY: Your Stripe secret key, which you can find in your Stripe dashboard.
  • YOUR_DOMAIN: The domain of your Webflow site where the payment page is hosted.
  • PRICE: The price ID for the product or service you are offering, which you can create in your Stripe dashboard.

To set these up, navigate to the Environment Secrets tab within the Lazy Builder and add the above keys with their respective values.

Test

Press the Test button to deploy the app. The Lazy CLI will handle the deployment, and you won't need to install any libraries or set up your environment.

Entering Input

If the code requires user input, the Lazy App's CLI interface will prompt you to provide the necessary information after you press the test button. Follow the prompts to enter any required input.

Using the App

Once the app is deployed, Lazy will provide you with a dedicated server link to use the API. If the code uses FastAPI, you will also receive a link to the API documentation, which you can use to understand and interact with the available endpoints.

Integrating the App

To integrate the Stripe Checkout Session API Server with your Webflow project, follow these steps:

  1. Add the provided Stripe script to your Webflow payment page just before the </body> tag.
  2. Replace "Publishable stripe API key" with your actual publishable API key from Stripe.
  3. Replace "URL TO ENPOINT YOUR PUBLISHED APP" with the endpoint URL of your published app provided by Lazy.

Here's the sample code you'll need to add to your Webflow site:


<script src="https://js.stripe.com/v3/"></script>
<script>
    const stripe = Stripe("Publishable stripe API key");

    initialize();

    function getUTMParameters() {
        const params = new URLSearchParams(window.location.search);
        return {
            utm_source: params.get('utm_source') || '',
            utm_medium: params.get('utm_medium') || '',
            utm_campaign: params.get('utm_campaign') || '',
            utm_term: params.get('utm_term') || '',
            utm_content: params.get('utm_content') || ''
        };
    }

    async function initialize() {
        const months = 1;
        const utmParams = getUTMParameters();

        const response = await fetch("URL TO ENPOINT YOUR PUBLISHED APP", {
            method: "POST",
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                months,
                ...utmParams
            })
        });

        const { clientSecret } = await response.json();

        const checkout = await stripe.initEmbeddedCheckout({
            clientSecret,
        });

        checkout.mount('#checkout');
    }
</script>

For more detailed instructions and advanced configurations, refer to the Stripe Custom Payment Flow documentation at Stripe Quickstart Guide.

Remember, it's crucial to ensure all keys and sensitive data are securely stored and your implementation complies with Stripe’s security standards.

Category
Technology
Last published
April 7, 2024

More templates like this

Stripe API Testing

This application utilizes Flask for the backend and JavaScript with Stripe API for the frontend. It allows users to test various Stripe functionalities such as adding a card to a customer, creating a charge, and retrieving customer details. The backend interacts with the Stripe API using the stripe library, while the frontend provides a simple form for users to input their Stripe API secret and an optional customer ID. Upon submitting the form, the frontend sends a POST request to the backend, which then executes the specified tests and returns the results to be displayed on the page. Made by BaranDev[https://github.com/BaranDev]

Flask
Stripe

Connect Payout with Stripe API

This app uses the Stripe API to create payouts for Connect Stripe Accouts and allows users to modify the payout schedule. It includes a Flask web service with an endpoint for this purpose. The backend makes API calls to create a transfer of funds and update the payout schedule using the Stripe API and the submitted form data.

Flask
Stripe
Python

Create Product using Stripe API

This app uses the Stripe API to create a product with it's price. It includes a Flask web service with an endpoint for this purpose. The backend makes API calls to create a product and its price object using the Stripe API and the submitted form data.

Flask
Stripe
Python
Home
/
Integration of Stripe Checkout Page in Webflow