Accepting Payments in AI Studio

Payments in AI Studio lets you add functional checkout experiences to AI-generated projects. Whether you're selling a single product, offering subscriptions, or building an online storefront, you can connect products and pricing already configured in your Captivation Hub account.

AI Studio handles how products and checkout appear within your project, while Captivation Hub manages payment processing and order records. This lets you customize the shopping experience without rebuilding your existing payment setup.

Important: Shipping and pickup are not supported in the current release. Payments are also not supported for AI Studio calendar experiences.

Current Limitations

• Manual Payments: Manual payment methods including Cash on Delivery are not available.
• Calendar Payments: Payments are not supported for AI Studio calendar experiences.
• Product Personalization: Custom fields such as engraving text or printing instructions cannot be passed to orders.
• Product Editing: Product details, prices, and variations must be managed in the Captivation Hub product catalog.
• Project Type: Payments are currently available only for projects built on TanStack Start. Existing React projects need to be migrated using Project Settings > Migrate to SSR first.
• Shipping and Pickup: Customer-facing shipping and pickup options are not supported.

Step 1 — Enable Payments in AI Studio

Payments can be enabled while AI Studio is building your project or added manually from the project's Payments settings.

Automatic Payment Detection

When AI Studio detects that your request involves selling a product or accepting payments, it can prompt you to enable payments during project generation.

1. Describe the website or experience you want AI Studio to build.
2. If AI Studio detects selling intent, an Add payments to this app prompt will appear.
3. Click Enable Payments to include payments in the project.
4. Answer any follow-up questions AI Studio asks about the experience you want to create.

Enabling payments during the build lets AI Studio account for checkout and purchasing as it generates the project. Afterward, go to More > Payments to review and complete the configuration.

Manually Enable Payments

You can also enable or manage payments directly from the project at any time.

1. From within your AI Studio project, click More.
2. Select Payments.
3. Click Enable Payments.

The Payments area shows the project's payment status, Test and Live modes, payment method, and payment products. You can also disable payments from this page.

Step 2 — Configure Your Payment Provider

AI Studio uses Captivation Hub's existing payment infrastructure, so payment providers are managed through your Captivation Hub payment settings rather than a separate AI Studio integration.

In the Payment Method area:

• Click Connect if no payment provider is connected yet.
• Click Manage to review or update an existing integration.

If a provider is already connected in Captivation Hub, AI Studio will use that payment setup for the project.

When payments are first enabled, the project starts in Test mode. Use Test mode to verify the product, pricing, and checkout experience without processing real charges. When you're ready, switch to Live mode to start accepting real payments.

Important: Manual payment methods including Cash on Delivery are not supported in AI Studio Payments.

Step 3 — Add and Configure Products

AI Studio uses products from your existing Captivation Hub product catalog. The product, pricing, and any variations must be set up in Captivation Hub before you can add them to an AI Studio project.

1. Open More > Payments.
2. In Payment Products, click Add Products or Browse Catalog.
3. Search for a product by name or SKU.
4. Select the product(s) you want to add, then click Continue to Pricing.
5. Choose how the product should be offered:
   • Fixed Price: Select the specific price or variation customers will purchase.
   • Customer Chooses Variation: Let customers pick from the variations configured for that product.
6. Review the configuration, then click Add Product.

Note: AI Studio Payments supports both recurring products/subscriptions and post-purchase upsells.

Step 4 — Checkout Experience

The checkout in an AI Studio project is hosted and managed by Captivation Hub. Card details are entered and processed through Captivation Hub's hosted checkout and are never handled by your app's generated code.

Supported payment methods include card payments through the connected payment provider and PayPal Express Checkout. Checkout also supports fully discounted orders without requiring card details, and subscriptions including carts with multiple subscription products.

After checkout, you can present a post-purchase upsell. With supported saved-card providers (Stripe, Square, Authorize.net, NMI, Adyen, and Mercado Pago), customers can accept the upsell in one click without re-entering payment details. Other payment methods use the standard payment form.

An upsell can only be charged after the original order is successfully paid and can only be charged once per order.

Step 5 — View Orders and Post-Purchase Activity

Orders from AI Studio appear in Orders in Captivation Hub, just like orders from any other sales channel. Open an order to view the customer, purchased products, payment status, transaction details, and fulfillment information.

The Source section identifies orders that came from AI Studio and shows the related project details, including the project name, project ID, and domain.

You can also use Captivation Hub workflows after purchase to send confirmations, follow-up messages, internal notifications, or other post-purchase automations.