How to record a narrated Stripe checkout video for your docs

#video #stripe #payments #devtools

How to Record a Narrated Stripe Checkout Video for Your Docs

Support tickets about checkout drop dramatically when users can watch a 60-second narrated walkthrough before they hit the payment page. The problem: recording that video manually means re-recording every time you update your pricing page, add a new plan, or change the checkout flow.

Here's how to generate it instead.

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://api.pagebolt.dev/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.

Try it free — 100 requests/month, no credit card. → pagebolt.dev

DEV Community