Agentic credit card automation - Browserbase Documentation

Here are the steps:

Set up your environment
Create a Stripe Cardholder
Create a Virtual Card with spending controls
Retrieve Virtual Card Details
Make a Purchase

Build an agentic credit card automation

1. Set up your environment

Install the required dependencies and set up your API keys.

Node.js
Python

npm install stripe @browserbasehq/sdk playwright-core dotenv

yarn add stripe @browserbasehq/sdk playwright-core dotenv

pnpm add stripe @browserbasehq/sdk playwright-core dotenv

bun add stripe @browserbasehq/sdk playwright-core dotenv

pip install stripe browserbase playwright python-dotenv

poetry add stripe browserbase playwright python-dotenv

uv pip install stripe browserbase playwright python-dotenv

conda install -c conda-forge stripe browserbase playwright python-dotenv

Create a .env file with your API keys (securely store keys for Stripe, Browserbase, and optional AI models for Stagehand):

Stripe API key
Browserbase API key
(Optional) LLM API key for Stagehand

.env

STRIPE_API_KEY=your_stripe_api_key

BROWSERBASE_API_KEY=your_browserbase_api_key

ANTHROPIC_API_KEY=OPTIONAL_your_anthropic_api_key
OPENAI_API_KEY=OPTIONAL_your_openai_api_key

2. Create a Stripe cardholder

You must create a cardholder before issuing virtual cards. The cardholder will have a verified billing address and be eligible to receive virtual cards.

Node.js
Python

create-cardholder.ts

import Stripe from 'stripe';
import dotenv from 'dotenv';
dotenv.config();

const stripe = new Stripe(process.env.STRIPE_API_KEY!);

async function createCardholder() {
    const cardholder = await stripe.issuing.cardholders.create({
        name: "Browserbase User",
        email: "hello@browserbase.com",
        phone_number: "+15555555555",
        status: 'active',
        type: 'individual',
        billing: {
            address: {
            line1: '123 Main Street',
            city: 'San Francisco',
            state: 'CA',
            country: 'US',
            postal_code: '94111',
            }
        },
    });
    console.log("Cardholder created:", cardholder.id);
    return cardholder;
}

const cardholder = createCardholder();

create-cardholder.py

import stripe
import os
import dotenv
dotenv.load_dotenv()

stripe.api_key = os.getenv("STRIPE_API_KEY")

def create_cardholder():
    cardholder = stripe.issuing.Cardholder.create(
        name="Browserbase User",
        email="hello@browserbase.com",
        phone_number="+15555555555",
        status='active',
        type='individual',
        billing={
            "address": {
                "line1": "123 Main Street",
                "city": "San Francisco",
                "state": "CA",
                "country": "US",
                "postal_code": "94111",
            }
        },
    )
    print("Cardholder created:", cardholder.id)
    return cardholder

card_holder = create_cardholder()

Save the cardholder ID from the console output for the next step.

3. Create a virtual card

Once you have a cardholder, you can create a virtual card under their name. This step generates a virtual card with a predefined spending limit. Stripe lets you customize the card’s spending controls, including daily, monthly, or per-transaction limits. Find more information on spending controls in the Stripe docs.

Node.js
Python

create-card.ts

async function createCard(cardholderId: string) {
    const card = await stripe.issuing.cards.create({
        cardholder: cardholderId,
        currency: 'usd',
        type: 'virtual',
        spending_controls: {
            allowed_categories: ['charitable_and_social_service_organizations_fundraising'],
            // Choose to block certain categories instead of allowing them
            // blocked_categories: ['automated_cash_disburse'],
            spending_limits: [{
                amount: 7500, // $75.00 measured in cents
                interval: 'daily', // all_time, daily, weekly, monthly, yearly, per_authorization
            }],
        },
    });

    console.log('Card created:', card.id);
    return card;
}

const cardholderId = "ic_INPUT_CARDHOLDER_ID_HERE" // replace with your cardholder id from the previous step
const virtual_card = createCard(cardholderId);

create-card.py

def create_card(cardholder_id):
    card = stripe.issuing.Card.create(
        cardholder=cardholder_id,
        currency='usd',
        type='virtual',
        spending_controls={
            "allowed_categories": ['charitable_and_social_service_organizations_fundraising'],
            # Choose to block certain categories instead of allowing them
            # "blocked_categories": ['automated_cash_disburse'],
            "spending_limits": [
                {
                    "amount": 7500,  # measured in cents
                    "interval": "daily",  # all_time, daily, weekly, monthly, yearly, per_authorization
                }
            ]
        },
    )
    print("Card created:", card.id)
    return card

cardholder_id = "ic_INPUT_CARDHOLDER_ID_HERE" # replace with your card id from the previous step
virtual_card = create_card(cardholder_id)

This function returns all the details needed to complete an online purchase.

4. Retrieve virtual card details

After creating a virtual card, you’ll need to retrieve its details (card number, expiration date, and CVC) to use it for transactions. You can use the returned data to automatically enter the card details when needed.

Node.js
Python

get-card.ts

export async function getCard(cardId: string) {
    const card = await stripe.issuing.cards.retrieve(
        cardId, {expand: ['number', 'cvc']});

    const cardInfo = {
        cardholder_firstName: card.cardholder.name.split(' ')[0],
        cardholder_lastName: card.cardholder.name.split(' ')[1],
        cardholder_email: card.cardholder.email,
        cardholder_phone: card.cardholder.phone_number,
        cardholder_address: card.cardholder.billing.address,
        card_number: card.number,
        expiration_month: card.exp_month,
        expiration_year: card.exp_year.toString().slice(-2), // 2028 -> 28
        cvc: card.cvc,
        brand: card.brand,
        currency: card.currency,
    };
    console.log('Card info:', cardInfo);
    return cardInfo;
}

const cardId = "ic_INPUT_CARD_ID_HERE"; // replace with your card id from the previous step
getCard(cardId);

get-card.py

def getCard(card_id):
    card = stripe.issuing.Card.retrieve(card_id, expand=['number', 'cvc'])

    card_info = {
        'cardholder_firstName': card.cardholder.name.split(' ')[0],
        'cardholder_lastName': card.cardholder.name.split(' ')[1],
        'cardholder_email': card.cardholder.email,
        'cardholder_phone': card.cardholder.phone_number,
        'cardholder_address': card.cardholder.billing.address,
        'card_number': card.number,
        'expiration_month': card.exp_month,
        'expiration_year': str(card.exp_year)[-2:], # 2028 -> 28
        'cvc': card.cvc,
        'brand': card.brand,
        'currency': card.currency,
    }
    print('Card info:', card_info)
    return card_info

card_id = "ic_REPLACE_WITH_YOUR_CARD_ID_HERE" # replace with your card id from the previous step
card_info = getCard(card_id)

5. Make a purchase

In this step, you’ll automate filling in the credit card payment form. This example walks you through navigating to the Red Cross donation page, selecting a donation amount, and completing the payment process using the virtual card details retrieved earlier.

Node.js
Python

import { Stagehand } from "@browserbasehq/stagehand";
import dotenv from "dotenv";
import { getCard } from "./get-card.js";
dotenv.config();

const stagehand = new Stagehand({
    env: "BROWSERBASE",
});

const cardId = "ic_INPUT_CARD_ID_HERE"; // replace with your card id from the previous step

async function main() {
    await stagehand.init();
    const page = stagehand.context.pages()[0];

    console.log(`Watching session: https://www.browserbase.com/sessions/${stagehand.browserbaseSessionID}`);

    const paymentInfo = await getCard(cardId);

    // Navigate to Red Cross donation page
    await page.goto('https://www.redcross.org/donate/donation.html/')

    const donationAmount = await stagehand.observe(
        "Find the donation amounts, and click $75"
    );
    // Click the first donation amount
    await stagehand.act(donationAmount[0])

    // Find the continue button and click it
    const continueButton = await stagehand.observe(
        "Find the continue button and click it"
    );
    await stagehand.act(continueButton[0])

    // Find the credit card button and click it
    const creditCardButton = await stagehand.observe(
        "Find the credit card button and click it"
    );
    await stagehand.act(creditCardButton[0])

    await stagehand.act("click the continue button")

    const formValues = await stagehand.observe(
        `Fill in the form with the following values: ${JSON.stringify(paymentInfo)}`
    );
    console.log("formValues", formValues);

    // Fill in the form with the values
    for (const value of formValues) {
        await stagehand.act(value);
    }
    await page.waitForTimeout(10000);

    // Click the submit button
    await stagehand.act("click the donate button")

    await stagehand.close();
}
main().catch(console.error);

import dotenv from 'dotenv';
dotenv.config();
import { chromium } from "playwright-core";
import Browserbase from "@browserbasehq/sdk";
import { getCard } from './get-card.ts';

const BROWSERBASE_API_KEY = process.env.BROWSERBASE_API_KEY!;

const cardId = "ic_INPUT_CARD_ID_HERE"; // replace with your card id from the previous step

(async () => {
    const bb = new Browserbase({apiKey: BROWSERBASE_API_KEY});
    const session = await bb.sessions.create();
    const browser = await chromium.connectOverCDP(session.connectUrl);
    const defaultContext = browser.contexts()[0];
    const page = defaultContext.pages()[0];

    const paymentInfo = await getCard(cardId);

    // log session ID url
    console.log(`Session URL: https://www.browserbase.com/sessions/${session.id}`);

    // go to the donation page
    await page?.goto("https://www.redcross.org/donate/donation.html");

    // click the first donation amount
    await page?.click("#modf-handle-0-radio");

    // click the continue button
    await page?.click("text=Continue");

    // click the credit card button
    await page?.click("text=credit card");

    // Fill billing information
    await page?.fill("input[name='bill_to_forename']", paymentInfo.cardholder_firstName!);
    await page?.fill("input[name='bill_to_surname']", paymentInfo.cardholder_lastName!);
    await page?.fill("input[name='bill_to_email']", paymentInfo.cardholder_email!);
    await page?.fill("input[name='bill_to_phone']", paymentInfo.cardholder_phone!);

    // Fill in the address information
    await page?.fill("input[name='bill_to_address_line1']", paymentInfo.cardholder_address.line1!);
    await page?.fill("input[name='bill_to_address_city']", paymentInfo.cardholder_address.city!);
    await page?.fill("input[name='bill_to_address_postal_code']", paymentInfo.cardholder_address.postal_code!);
    await page?.selectOption("select#bill_to_address_state", paymentInfo.cardholder_address.state!);

    // Fill in the card information
    await page?.fill("input#cardnumber", paymentInfo.card_number!);
    await page?.fill("input#MM", paymentInfo.expiration_month!.toString());
    await page?.fill("input#YY", paymentInfo.expiration_year!.toString());
    await page?.fill("input#CVC", paymentInfo.cvc!.toString());

    // click donate button
    await page?.click("text=Donate");

    await page.close();
    await browser.close();
})().catch((error) => console.error(error.message));

Playwright

from playwright.sync_api import Playwright, sync_playwright
from browserbase import Browserbase
from get_card import getCard
import os
import dotenv
dotenv.load_dotenv()

bb = Browserbase(api_key=os.environ["BROWSERBASE_API_KEY"])

cardId = "ic_INPUT_CARD_ID_HERE" # replace with your card id from the previous step

def run(playwright: Playwright) -> None:
    session = bb.sessions.create()

    browser = playwright.chromium.connect_over_cdp(session.connect_url)
    context = browser.contexts[0]
    page = context.pages[0]

    payment_info = getCard(cardId)

    # Watch the session
    print(f"Session URL: https://browserbase.com/sessions/{session.id}")

    # Navigate to the donation page
    page.goto("https://www.redcross.org/donate/donation.html")

    # Perform actions on the donation page
    page.click("#modf-handle-0-radio")
    page.click("text=Continue")
    page.click("text=credit card")

    # Fill billing information
    page.fill("input[name='bill_to_forename']", payment_info["cardholder_firstName"])
    page.fill("input[name='bill_to_surname']", payment_info["cardholder_lastName"])
    page.fill("input[name='bill_to_email']", payment_info["cardholder_email"])
    page.fill("input[name='bill_to_phone']", payment_info["cardholder_phone"])

    # Fill in the address information
    page.fill("input[name='bill_to_address_line1']", payment_info["cardholder_address"]["line1"])
    page.fill("input[name='bill_to_address_city']", payment_info["cardholder_address"]["city"])
    page.fill("input[name='bill_to_address_postal_code']", payment_info["cardholder_address"]["postal_code"])
    page.select_option("select#bill_to_address_state", payment_info["cardholder_address"]["state"])

    # Fill in the card information
    page.fill("input#cardnumber", payment_info["card_number"])
    page.fill("input#MM", str(payment_info["expiration_month"]))
    page.fill("input#YY", str(payment_info["expiration_year"]))
    page.fill("input#CVC", str(payment_info["cvc"]))

    # Click donate button
    page.click("text=Donate")

    page.close()
    browser.close()

if __name__ == "__main__":
    with sync_playwright() as playwright:
        run(playwright)

🎉 You made an online purchase with Stripe and Browserbase!

Next steps

With this foundation, you can build more advanced payment automation:

Create multiple virtual cards for different departments or spending categories
Integrate with expense management systems
Set up automated subscription payments
Build checkout automation for testing payment flows

Best practices

Track your transactions: Monitor card usage through the Stripe Dashboard
Handle errors gracefully: Implement robust error handling for form fields and payment rejections
Add verification steps: Verify successful transactions by checking for confirmation elements
Secure your credentials: Never expose API keys in client-side code

​Build an agentic credit card automation

​1. Set up your environment

​2. Create a Stripe cardholder

​3. Create a virtual card

​4. Retrieve virtual card details

​5. Make a purchase

​Next steps

​Best practices

Build an agentic credit card automation

1. Set up your environment

2. Create a Stripe cardholder

3. Create a virtual card

4. Retrieve virtual card details

5. Make a purchase

Next steps

Best practices