How to Record a Narrated Stripe Checkout Video for Your Docs

Define the checkout walkthrough

Record the key moments: landing on the pricing page, selecting a plan, filling the checkout form, seeing the success state.

import fs from 'fs';

const res = await fetch('https://pagebolt.dev/api/v1/video', {
  method: 'POST',
  headers: {
    'x-api-key': process.env.PAGEBOLT_API_KEY,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    steps: [
      { action: 'navigate', url: 'https://yourapp.com/pricing', note: 'Open pricing page' },
      { action: 'click', selector: '[data-plan="pro"] .cta-button', note: 'Select the Pro plan' },
      { action: 'wait_for', selector: '.checkout-form', note: 'Checkout form loads' },
      { action: 'fill', selector: '#card-name', value: 'Jane Smith', note: 'Enter cardholder name' },
      { action: 'scroll', direction: 'down', amount: 200, note: 'Scroll to complete purchase' },
      { action: 'click', selector: '#subscribe-button', note: 'Click Subscribe' },
      { action: 'wait_for', selector: '.success-screen', note: 'See the success screen' }
    ],
    audioGuide: {
      enabled: true,
      voice: 'nova',
      script: "Here's how to subscribe. {{1}} Choose a plan — we'll use Pro. {{2}} {{3}} The checkout form loads with Stripe. {{4}} Enter your card details. {{5}} {{6}} Hit Subscribe — {{7}} and you're in."
    },
    frame: { enabled: true, style: 'macos' },
    background: { enabled: true, type: 'gradient', gradient: 'ocean' },
    cursor: { style: 'highlight', persist: true },
    pace: 'slow'
  })
});

fs.writeFileSync('docs/checkout-walkthrough.mp4', Buffer.from(await res.arrayBuffer()));

Use Stripe test mode for the recording

For the card details step, Stripe's test card 4242 4242 4242 4242 with any future expiry and any CVC completes the checkout without a real charge. Your recorded walkthrough uses a real checkout flow on a real staging environment — just no live payment.

// In your steps, fill Stripe's test card
{ action: 'fill', selector: '#card-number', value: '4242 4242 4242 4242', note: 'Enter test card' },
{ action: 'fill', selector: '#card-expiry', value: '12/28', note: 'Expiry date' },
{ action: 'fill', selector: '#card-cvc', value: '123', note: 'CVC' }

Point url at your staging environment with test mode Stripe keys.

Regenerate when checkout changes

Add to your deployment pipeline for the pricing page:

- name: Regenerate checkout walkthrough
  if: contains(github.event.commits[0].modified, 'pricing') || contains(github.event.commits[0].modified, 'checkout')
  run: node scripts/record-checkout.js
  env:
    PAGEBOLT_API_KEY: ${{ secrets.PAGEBOLT_API_KEY }}
    STAGING_URL: ${{ secrets.STAGING_URL }}

Only re-records when pricing or checkout files change — not on every deploy.

Where to use it

• Embed on your pricing page above the CTA
• Link from the FAQ ("How does checkout work?")
• Include in onboarding emails for trial users considering upgrading
• Add to your support docs for billing questions

A 60-second narrated video answers the five most common pre-purchase questions in one watch.