Checkout: Embedded

⚙️ Integration

🧑‍💻 Code

<?php

if (isset($_GET['createCheckoutSession'])) {
  $stripeConfiguration = [
    'api_key' => 'sk_•••',
    'stripe_version' => '2023-10-16',
  ];
  
  $stripe = new \Stripe\StripeClient($stripeConfiguration);
  
  $checkoutSession = $stripe->checkout->sessions->create([
    'line_items' => [
      [
        'price_data' => [
          'product_data' => [
            'name' => 'Example Product',
            'description' => 'Example description.',
          ],
          'currency' => 'usd',
          'unit_amount' => 4200,
        ],
        'quantity' => 1,
      ],
    ],
    'mode' => 'payment',
    'ui_mode' => 'embedded',
    'return_url' => 'https://4242.io/test/checkout-embedded/?session={CHECKOUT_SESSION_ID}',
  ]);
  
  header('Content-Type: application/json');
  echo json_encode([
    'clientSecret' => $checkoutSession->client_secret,
  ]);
  exit;
}

<script src="https://js.stripe.com/v3/"></script>

<p id="checkout"></p>

<pre id="output"></pre>

#checkout {
  /* Provides a visual outline of the embedded Checkout container */
  border: solid 1px;
  /* Aesthetics */
  background-color: white; /* For dark mode */
  padding: 1rem;
  border-radius: .25rem;
}

async function embedCheckout() {
  const stripe = Stripe('pk_test_51O2hxMC4JnNRtz8VToJJbGHrFTPPr6TkP09h7ql3YJaqpNcxoSNxtk38glyzi9VrZKStns858YynOO2ZyGmU7VRi00CIUWuUdk');

  const result = await fetch('?createCheckoutSession');
  
  const response = await result.json();
  
  const checkout = await stripe.initEmbeddedCheckout({
    clientSecret: response.clientSecret,
  });
  
  checkout.mount('#checkout');
}

embedCheckout();

// If the URL contains a Checkout Session ID display it in the output element
const urlSearchParams = new URLSearchParams(window.location.search);

const checkoutSessionIdFromURL = urlSearchParams.get('session');

if (urlSearchParams.has('session')) {
  output.textContent = 'Checkout Session ID from URL: ' + urlSearchParams.get('session');
}