TESOL Advanced enrollment — form code

Stripe can hand your agent the tools and instructions to build this checkout — skills, hooks and an MCP server that update automatically. Install them, or copy Stripe's prompt for your agent, from the Checkout settings in your Stripe dashboard.

The checkout is a Stripe session created on the server, then mounted on the page as an embedded form. This is the configuration the dashboard produced for it.

POST

/v1/checkout/sessions

Stripe-Version

2026-10-28.endive

mode

payment

ui_mode

form

line_items[0][price]

{{PRICE_ID}}

line_items[0][quantity]

1

billing_address_collection

auto

submit_type

auto

integration_identifier

custom_embedded_web_0001

// Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
// Find your keys at https://dashboard.stripe.com/apikeys.
$stripe = new \Stripe\StripeClient('{{TEST_SECRET_KEY}}');

$session = $stripe->checkout->sessions->create([
  'mode' => 'payment',
  'ui_mode' => 'form',
  'line_items' => [
    [
      'price' => '{{PRICE_ID}}',
      'quantity' => 1,
    ],
  ],
  'billing_address_collection' => 'auto',
  'submit_type' => 'auto',
  'integration_identifier' => 'custom_embedded_web_0001',
  'return_url' => 'https://americantesol.com/study.html?session_id={CHECKOUT_SESSION_ID}',
]);

echo json_encode(['client_secret' => $session->client_secret]);

<html>
  <head>
    <title>Checkout</title>
    <script src="https://js.stripe.com/dahlia/stripe.js"></script>
  </head>
  <body>
    <div id="checkout-form">
      <!-- Embedded form will be inserted here -->
    </div>
  </body>
</html>

// create an instance of Stripe on your Checkout Page
const stripe = Stripe('{{PUBLISHABLE_KEY}}');

// fetch the client secret from your server and initialize the Checkout instance:
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);

const appearance = {
  "theme": "stripe",
  "inputs": "spaced",
  "labels": "auto",
  "variables": {
    "borderRadius": "4px",
    "colorBackground": "#ffffff",
    "colorDanger": "#df1b41",
    "colorPrimary": "#0570de",
    "colorSuccess": "#00c853",
    "colorText": "#30313d",
    "fontFamily": "default",
    "fontSizeBase": "16px",
    "spacingUnit": "4px"
  }
};

// create the Checkout instance:
const checkout = stripe.initCheckoutFormSdk({
  clientSecret,
  appearance
});

// Create and mount the Embedded form
const checkoutForm = checkout.createForm({ layout: 'expanded' });
checkoutForm.mount('#checkout-form');

const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  checkoutForm.on('confirm', (event) => {
    loadActionsResult.actions.confirm({formConfirmEvent: event});
  });
}

Add these events to an event destination so payment confirmations reach the integration. ATI records enrollments from its own webhook endpoint.