diff --git a/src/css/page-account.css b/src/css/page-account.css
new file mode 100644
index 0000000..bd9b06a
--- /dev/null
+++ b/src/css/page-account.css
@@ -0,0 +1,159 @@
+/* Variables */
+* {
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+ font-size: 16px;
+ -webkit-font-smoothing: antialiased;
+ display: flex;
+ justify-content: center;
+ align-content: center;
+ height: 100vh;
+ width: 100vw;
+}
+
+form {
+ width: 30vw;
+ min-width: 500px;
+ align-self: center;
+ box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
+ 0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
+ border-radius: 7px;
+ padding: 40px;
+}
+
+.hidden {
+ display: none;
+}
+
+#card-element {
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+}
+
+.StripeElement {
+ display: block;
+ margin: 10px 0;
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ font-size: 16px;
+}
+
+
+
+#payment-message {
+ color: rgb(105, 115, 134);
+ font-size: 16px;
+ line-height: 20px;
+ padding-top: 12px;
+ text-align: center;
+}
+
+#payment-element {
+ margin-bottom: 24px;
+}
+
+/* Buttons and links */
+button {
+ background: #5469d4;
+ font-family: Arial, sans-serif;
+ color: #ffffff;
+ border-radius: 4px;
+ border: 0;
+ padding: 12px 16px;
+ font-size: 16px;
+ font-weight: 600;
+ cursor: pointer;
+ display: block;
+ transition: all 0.2s ease;
+ box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
+ width: 100%;
+}
+button:hover {
+ filter: contrast(115%);
+}
+button:disabled {
+ opacity: 0.5;
+ cursor: default;
+}
+
+/* spinner/processing state, errors */
+.spinner,
+.spinner:before,
+.spinner:after {
+ border-radius: 50%;
+}
+.spinner {
+ color: #ffffff;
+ font-size: 22px;
+ text-indent: -99999px;
+ margin: 0px auto;
+ position: relative;
+ width: 20px;
+ height: 20px;
+ box-shadow: inset 0 0 0 2px;
+ -webkit-transform: translateZ(0);
+ -ms-transform: translateZ(0);
+ transform: translateZ(0);
+}
+.spinner:before,
+.spinner:after {
+ position: absolute;
+ content: "";
+}
+.spinner:before {
+ width: 10.4px;
+ height: 20.4px;
+ background: #5469d4;
+ border-radius: 20.4px 0 0 20.4px;
+ top: -0.2px;
+ left: -0.2px;
+ -webkit-transform-origin: 10.4px 10.2px;
+ transform-origin: 10.4px 10.2px;
+ -webkit-animation: loading 2s infinite ease 1.5s;
+ animation: loading 2s infinite ease 1.5s;
+}
+.spinner:after {
+ width: 10.4px;
+ height: 10.2px;
+ background: #5469d4;
+ border-radius: 0 10.2px 10.2px 0;
+ top: -0.1px;
+ left: 10.2px;
+ -webkit-transform-origin: 0px 10.2px;
+ transform-origin: 0px 10.2px;
+ -webkit-animation: loading 2s infinite ease;
+ animation: loading 2s infinite ease;
+}
+
+@-webkit-keyframes loading {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+@keyframes loading {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+
+@media only screen and (max-width: 600px) {
+ form {
+ width: 80vw;
+ min-width: initial;
+ }
+}
diff --git a/src/pages/account.html b/src/pages/account.html
new file mode 100644
index 0000000..bdf8dc4
--- /dev/null
+++ b/src/pages/account.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/account.js b/src/pages/account.js
new file mode 100644
index 0000000..c9a2a33
--- /dev/null
+++ b/src/pages/account.js
@@ -0,0 +1,35 @@
+const sharedKeys = {
+ test: 'pk_test_51JpgUIFV3Il51eBDUO1s6JVOy9P3rFCkvX1Mbjvq4Qtkrj0ARg0CmXtYnpecsTyliVwvSJnEOOQXqUo0w48EKOP000oEdk14R2',
+ live: 'pk_live_51JpgUIFV3Il51eBDWQworOndEE0S5T2HUqjowum8lPhSfpaboVz5iJlS1PfsWicfNtdUhTZhPSYtpJpZgI9Jc40800MkE0liSP'
+}
+
+window.addEventListener('DOMContentLoaded', e => {
+ setTimeout(() => {
+ const key = !!globalThis.__args.env.DEV ? sharedKeys.test : sharedKeys.live
+ const stripe = Stripe(key)
+
+ const elements = stripe.elements()
+
+ const card = elements.create('card')
+
+ card.mount('#card-element')
+
+ const submitButton = document.getElementById('submit')
+
+ submitButton.addEventListener('click', async event => {
+ event.preventDefault()
+
+ const result = await stripe.createPaymentMethod({
+ type: 'card',
+ card: card
+ })
+
+ if (result.error) {
+ console.log(result.error.message)
+ return
+ }
+
+ console.log('TOKEN!', result.paymentMethod.id)
+ })
+ }, 2048)
+})