Bolt

Bolt is an AI-powered no-code builder. With the FloPay connector for Bolt, you can generate a product page, cart, embedded payment form, success page, and optional post-purchase offer from an AI prompt.

What you can do

• Build a complete checkout experience from a prompt, including product selection, cart, payment, and success states.
• Present cards and eligible wallets through your active FloPay gateway.
• Apply coupon codes that are already configured in FloPay.
• Add a one-click post-purchase offer for eligible returning buyers with a saved payment method.
• Ask Bolt to match your site's fonts, colors, and overall style.

Who this is for

• Merchants: Build and launch a checkout page without writing the integration code yourself.
• E-commerce operators: Add FloPay payment functionality to a Bolt project.
• Teams prototyping: Validate a checkout flow before committing to a custom implementation.

Prerequisites

Before you start, you need:

• A FloPay account.
• Your FloPay client ID, available from the FloPay Dashboard.
• Products configured in your FloPay product catalog, with their exact product codes.
• Any coupons you plan to offer configured in FloPay.
• An active FloPay gateway for the payment methods and currencies you want to present.
• A Bolt account.

Setup

1. Choose your FloPay environment and copy your client ID

Choose staging while testing or production for a live checkout (see Configuration for how to switch environments). Then sign in to the FloPay Dashboard and copy the client ID for that environment. The generated checkout must use the same environment as your client ID, catalog, and active gateway.

2. Confirm your product and coupon codes

Products and coupons must already exist in FloPay before the generated checkout can use them. Copy each product code exactly as it appears in your catalog. If you plan to accept a coupon, copy its configured code too.

3. Start a Bolt project

Open Bolt, create a project, and open its AI prompt input.

4. Customize the prompt

Copy the example prompt and replace its placeholders:

• Set YOUR_FLOPAY_CLIENT_ID to your public FloPay client ID.
• Set YOUR_FLOPAY_ENVIRONMENT to staging or production, matching the environment for your client ID, catalog, and active gateway.
• Set YOUR_CURRENCY to a currency supported by your catalog and gateway.
• Replace YOUR_PRODUCT_CODE with an exact code from your FloPay catalog.
• Keep BUYER_EMAIL dynamic so the generated checkout collects the buyer's email at runtime.
• Replace YOUR_DOMAIN with the deployed domain that owns the success and cancellation routes.
• Replace or remove YOUR_COUPON_CODE based on the coupons already configured in FloPay.
• Replace YOUR_THEME_REFERENCE with the site whose visual style Bolt should follow.

5. Review, test, and deploy

Review the generated React code and test it with your FloPay test environment. Confirm product resolution, coupon behavior, redirect routes, gateway methods, and the completed order state before deploying through Bolt.

Example prompt

Copy this prompt into Bolt and replace every YOUR_ placeholder for your project. Keep buyer information dynamic rather than adding real buyer details to the prompt.

Build a React checkout using the FloPay React SDK.

Use the current FloPay documentation:
- https://flopay.com/docs
- https://flopay.com/docs/connectors/react-sdk
- https://api.flopay.com/docs

Install @flopay/react and @flopay/shared with the generated project's package
manager. Use these imports:

import { FloPayCheckout } from '@flopay/react';
import { configureFlopay } from '@flopay/shared';

At application startup, before rendering the checkout, call this exactly once:

configureFlopay({ environment: 'YOUR_FLOPAY_ENVIRONMENT' });

Set YOUR_FLOPAY_ENVIRONMENT to staging while testing or production for a live
checkout. It must match the environment for the client ID, catalog, and active
gateway.

Create a product page, cart, embedded checkout, and success page. Use
FloPayCheckout with a createSession payload in this shape:

{
  clientId: 'YOUR_FLOPAY_CLIENT_ID',
  currency: 'YOUR_CURRENCY',
  products: [
    { code: 'YOUR_PRODUCT_CODE', quantity: 1 },
  ],
  account: {
    email: 'BUYER_EMAIL',
  },
  successUrl: 'https://YOUR_DOMAIN/success',
  cancelUrl: 'https://YOUR_DOMAIN/checkout',
  couponCodes: ['YOUR_COUPON_CODE'],
}

Collect the buyer email in the checkout and pass that value as account.email.
Treat every product code and coupon code as an existing FloPay resource. Do not
create product prices or coupon rules in the browser. If coupons are not part of
this checkout, remove couponCodes and the coupon input.

Render the payment methods FloPay returns for the checkout session. Let the SDK
handle payment errors, declines, redirects, and authentication. Show a helpful
success page that summarizes the completed order.

Optionally add a post-purchase offer with FloPayAutomaticPaymentButton. Only show
it for a returning buyer when the application has their FloPay account.userId and
FloPay has a saved payment method that can be used for the offer.

Match the fonts, colors, and overall style of https://YOUR_THEME_REFERENCE.
Keep the checkout accessible and responsive.

Live demo

See the prompt in action at flopay-react-sdk-che-5prr.bolt.host.

The demo uses FloPay's Stripe test setup and example products. Use it to explore the checkout, success page, and saved-payment upsell flow. Do not enter real payment details or customer data.

Supported features

Known limits

• Bolt can generate a valid interface even when a product or coupon code does not exist in FloPay. Resource errors surface when the checkout creates or updates its session.
• Wallet visibility depends on the active gateway, registered domain, checkout session, buyer, device, and browser.
• Server-side session creation or custom server-side pricing and entitlement logic requires a developer to extend the generated project.
• A coupon object defined only in the prompt has no effect. Configure the coupon in FloPay and pass its code through couponCodes.
• The post-purchase button is a saved-payment flow. It requires an identified returning buyer and an eligible payment method already saved by FloPay.
• Review generated code, accessibility, data handling, and deployment settings before publishing it.

Related resources

• FloPay React SDK connector for the generated integration contract.
• FloPay SDK configuration for environment selection and billing API behavior.
• Accept a Payment guide for checkout session and redirect behavior.
• Automatic Payment Button for the saved-payment upsell surface.
• Bolt documentation for Bolt project and deployment guidance.
• FloPay Playground to explore a test checkout without configuring Bolt.