<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Accept a payment</title>
    <meta name="description" content="A demo of a payment on Stripe" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="/css/checkout.css" />
    <script src="https://js.stripe.com/v3/"></script>
    <script src="/js/checkout.js" defer></script>
    <link 
        href="https://stripe-samples.github.io/developer-office-hours/demo.css"
        rel="stylesheet"
        type="text/css"
    />
  </head>
  <body>
    <!-- Display a payment form -->
    <form id="payment-form" method="post" action="/create-payment-intent">
      <div id="payment-element">
        <!--Stripe.js injects the Payment Element-->
      </div>
      <button id="submit">
        <div class="spinner hidden" id="spinner"></div>
        <span id="button-text">Pay now</span>
      </button>
      <div id="payment-message" class="hidden"></div>
    </form>
  </body>
</html>