Sitefire Logo
Sitefire
description Documentation
Sign In
Documentation chevron_right Stripe Payments & Checkouts

Stripe Payments & Checkouts

Learn how to sell products, subscriptions, and services on your Sitefire website with Stripe.

E-Commerce Powered by Stripe

Sitefire makes it simple to accept credit card payments, Apple Pay, Google Pay, and local payment methods directly on your website using official Stripe Buy Buttons and Payment Links.

verified_user
Zero Backend & Zero PCI Burden: Stripe hosts the checkout modal and handles all credit card compliance (PCI-DSS). You don't need a complex backend server, database, or shopping cart engine to start selling!

How Stripe Buy Buttons Work

Stripe Buy Buttons are official interactive web components provided by Stripe. When a customer clicks the button on your site, Stripe opens a secure checkout overlay or redirects to a Stripe-hosted payment page.

Under the hood, Sitefire embeds the lightweight Stripe script and web component:

code Embed Snippet 
<script async src="https://js.stripe.com/v1/buy-button.js"></script>
<stripe-buy-button
  buy-button-id="buy_btn_xxxxxx"
  publishable-key="pk_live_xxxxxx">
</stripe-buy-button>

Step-by-Step: Adding a Stripe Buy Button

1

Create a Product in Stripe

Log in to your Stripe Dashboard, go to Product catalog, and create your product with its price.

2

Generate a Buy Button

Under your product in Stripe, click Create buy button. Choose your styling, then click Save and copy code.

3

Ask Sitefire AI to Embed It

Open the floating AI Chat widget on your website preview and paste the snippet or prompt the AI to add it.

AI Prompt Examples for Stripe

Here are example prompts you can use with Sitefire AI:

shopping_bag Add Buy Button 
Add a Stripe Buy Button to the pricing section for our Ebook ($29). Use buy-button-id="buy_btn_123" and publishable-key="pk_live_456".
link Stripe Payment Link 
Turn the "Order Now" hero button into a direct checkout button linking to https://buy.stripe.com/example_checkout.
table_chart Stripe Pricing Table 
Embed our Stripe Pricing Table in the plans section: pricing-table-id="prctbl_123" and publishable-key="pk_live_456".

Testing Your Checkout (Test Mode vs Live Mode)

Before launching, you can test purchases using Stripe's Test Mode:

  • Use your test publishable key (starts with pk_test_...) and test buy button ID.
  • When testing, you can use Stripe test card numbers like 4242 4242 4242 4242 with any future date.
  • Once verified, ask Sitefire AI to update your publishable key to your live key (starts with pk_live_...) before publishing.
lightbulb
Customizing Button Styling: You can tell Sitefire AI to center the button, add padding, or adjust the surrounding card styles at any time in the chat.
west AI Chat Editing & Prompts Importing Existing Sites east