About this template
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:
- Add the provided Stripe script to your Webflow payment page just before the
</body>tag. - Replace
"Publishable stripe API key"with your actual publishable API key from Stripe. - 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.
