A cardholder must be created before issuing virtual cards. The cardholder will have a verified billing address and will be eligible to receive virtual cards.
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 allows you to customize the card’s spending controls, including setting daily, monthly, or per-transaction limits. Find more information on spending controls in the Stripe docs.
create-card.ts
Copy
Ask AI
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 stepconst virtual_card = createCard(cardholderId);
This function returns all the details needed to complete an online purchase.
After creating a virtual card, you’ll need to retrieve its details (card number, expiration date, and CVC) to use it for transactions. The returned data can be used to automatically enter the card details when needed.
In this step, you will 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.
Copy
Ask AI
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 stepasync function main() { await stagehand.init(); const page = stagehand.page; 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 page.observe({ instruction: "Find the donation amounts, and click $75", returnAction: true, onlyVisible: false, }); // Click the first donation amount await page.act(donationAmount[0]) // Find the continue button and click it const continueButton = await page.observe({ instruction: "Find the continue button and click it", returnAction: true, onlyVisible: false, }); await page.act(continueButton[0]) // Find the credit card button and click it const creditCardButton = await page.observe({ instruction: "Find the credit card button and click it", returnAction: true, onlyVisible: false, }); await page.act(creditCardButton[0]) await page.act({action: "click the continue button"}) const formValues = await page.observe({ instruction: `Fill in the form with the following values: ${JSON.stringify(paymentInfo)}`, returnAction: true, onlyVisible: false, }); console.log("formValues", formValues); // Fill in the form with the values for (const value of formValues) { await page.act(value); } await page.waitForTimeout(10000); // Click the submit button await page.act({action: "click the donate button"}) await stagehand.close();}main().catch(console.error);
🎉 You made an online purchase with Stripe and Browserbase!