podhmo/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>card登録用のtokenを取得</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://js.stripe.com/v3/"></script>
  </head>
  <body>
    <main>
      <h1>form</h1>
      <ul>
        <li><a href="https://docs.stripe.com/testing#cards">テストカード | Stripe のドキュメント</a></li>
        <li><a href="https://www.memberstack.com/blog/stripe-test-cards">テストカード一覧を載せてるblog</a></li>
      </ul>
      <pre>
ブランド	番号	セキュリティコード	日付
--------------------------------------------------------------------------------
Visa	4242424242424242 任意の 3桁の数字	任意の将来の日付
      </pre>
      <form id="payment-form">
        <div id="card-element">
          <!-- Elements will create form elements here -->
        </div>
        <button id="submit">submit</button>
        <div id="error-message">
          <!-- Display error message to your customers here -->
        </div>
      </form>

      <div id="messages" role="alert" style="display: none;"></div>
    </main>
  </body>
  <script>
    // see: https://dashboard.stripe.com/test/apikeys
    const publishableKey = "<token>" // stripeのダッシュボードから取得したpublishable key
    const stripe = Stripe(publishableKey, {apiVersion: "2020-03-02"});
    const elements = stripe.elements();

    // https://docs.stripe.com/js/elements_object/create_element?type=card#elements_create-options
    const card = elements.create("card", {hidePostalCode: true, style: {base: {fontSize: "20px"}}})
    card.mount('#card-element');

    document.getElementById("submit").addEventListener("click", async (e) => {
      e.preventDefault();
      const {token, error} = await stripe.createToken(card);
      if (error) {
        document.getElementById("error-message").textContent = error.message;
      } else {
        document.getElementById("error-message").textContent = "";
        document.getElementById("messages").textContent = `token: ${token.id}`;
        document.getElementById("messages").style.display = "block";
      }
    });
  </script>
</html>

## style.css
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

:root {
  --light-grey: #F6F9FC;
  --dark-terminal-color: #0A2540;
  --accent-color: #635BFF;
  --radius: 3px;
}

body {
  padding: 20px;
  font-family: 'Raleway';
  display: flex;
  justify-content: center;
  font-size: 1.2em;
  color: var(--dark-terminal-color);
}

main {
  width: 480px;
}

form > * {
  margin: 10px 0;
}

button {
  background-color: var(--accent-color);
}

button {
  background: var(--accent-color);
  border-radius: var(--radius);
  color: white;
  border: 0;
  padding: 12px 16px;
  margin-top: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: block;
}
button:hover {
  filter: contrast(115%);
}
button:active {
  transform: translateY(0px) scale(0.98);
  filter: brightness(0.9);
}
button:disabled {
  opacity: 0.5;
  cursor: none;
}

input, select {
  display: block;
  font-size: 1.1em;
  width: 100%;
  margin-bottom: 10px;
}

label {
  display: block;
}

a {
  color: var(--accent-color);
  font-weight: 900;
}

small {
  font-size: .6em;
}

fieldset, input, select {
  border: 1px solid #efefef;
}

#payment-form {
  border: #F6F9FC solid 1px;
  border-radius: var(--radius);
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 30px 50px -20px rgb(50 50 93 / 25%), 0 30px 60px -30px rgb(0 0 0 / 30%);
}

#messages {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New';
  display: none; /* hide initially, then show once the first message arrives */
  background-color: #0A253C;
  color: #00D924;
  padding: 20px;
  margin: 20px 0;
  border-radius: var(--radius);
  font-size:0.7em;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<title>card登録用のtokenを取得</title>
	<link rel="stylesheet" href="style.css" />
	<script src="https://js.stripe.com/v3/"></script>
	</head>
	<body>
	<main>
	<h1>form</h1>
	<ul>
	<li><a href="https://docs.stripe.com/testing#cards">テストカード \| Stripe のドキュメント</a></li>
	<li><a href="https://www.memberstack.com/blog/stripe-test-cards">テストカード一覧を載せてるblog</a></li>
	</ul>
	<pre>
	ブランド番号セキュリティコード日付
	--------------------------------------------------------------------------------
	Visa 4242424242424242 任意の 3桁の数字任意の将来の日付
	</pre>
	<form id="payment-form">
	<div id="card-element">
	<!-- Elements will create form elements here -->
	</div>
	<button id="submit">submit</button>
	<div id="error-message">
	<!-- Display error message to your customers here -->
	</div>
	</form>

	<div id="messages" role="alert" style="display: none;"></div>
	</main>
	</body>
	<script>
	// see: https://dashboard.stripe.com/test/apikeys
	const publishableKey = "<token>" // stripeのダッシュボードから取得したpublishable key
	const stripe = Stripe(publishableKey, {apiVersion: "2020-03-02"});
	const elements = stripe.elements();

	// https://docs.stripe.com/js/elements_object/create_element?type=card#elements_create-options
	const card = elements.create("card", {hidePostalCode: true, style: {base: {fontSize: "20px"}}})
	card.mount('#card-element');

	document.getElementById("submit").addEventListener("click", async (e) => {
	e.preventDefault();
	const {token, error} = await stripe.createToken(card);
	if (error) {
	document.getElementById("error-message").textContent = error.message;
	} else {
	document.getElementById("error-message").textContent = "";
	document.getElementById("messages").textContent = `token: ${token.id}`;
	document.getElementById("messages").style.display = "block";
	}
	});
	</script>
	</html>
	@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

	:root {
	--light-grey: #F6F9FC;
	--dark-terminal-color: #0A2540;
	--accent-color: #635BFF;
	--radius: 3px;
	}

	body {
	padding: 20px;
	font-family: 'Raleway';
	display: flex;
	justify-content: center;
	font-size: 1.2em;
	color: var(--dark-terminal-color);
	}

	main {
	width: 480px;
	}

	form > * {
	margin: 10px 0;
	}

	button {
	background-color: var(--accent-color);
	}

	button {
	background: var(--accent-color);
	border-radius: var(--radius);
	color: white;
	border: 0;
	padding: 12px 16px;
	margin-top: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	display: block;
	}
	button:hover {
	filter: contrast(115%);
	}
	button:active {
	transform: translateY(0px) scale(0.98);
	filter: brightness(0.9);
	}
	button:disabled {
	opacity: 0.5;
	cursor: none;
	}

	input, select {
	display: block;
	font-size: 1.1em;
	width: 100%;
	margin-bottom: 10px;
	}

	label {
	display: block;
	}

	a {
	color: var(--accent-color);
	font-weight: 900;
	}

	small {
	font-size: .6em;
	}

	fieldset, input, select {
	border: 1px solid #efefef;
	}

	#payment-form {
	border: #F6F9FC solid 1px;
	border-radius: var(--radius);
	padding: 20px;
	margin: 20px 0;
	box-shadow: 0 30px 50px -20px rgb(50 50 93 / 25%), 0 30px 60px -30px rgb(0 0 0 / 30%);
	}

	#messages {
	font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New';
	display: none; /* hide initially, then show once the first message arrives */
	background-color: #0A253C;
	color: #00D924;
	padding: 20px;
	margin: 20px 0;
	border-radius: var(--radius);
	font-size:0.7em;
	}