init commit over here

2025-05-12 16:57:19 -07:00
parent 8e02c028a7
commit 838b3ab450
87 changed files with 6068 additions and 0 deletions
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Stripe-Payments</title>
+        <script src="https://js.stripe.com/v3/"></script>
+        <style>
+
+            #submit {
+                width: 200px;
+                height: 40px;
+                margin-left: calc(50% - 100px);
+                margin-top: 30px;
+                color: #fff;
+                background-color: #393;
+                font-size: 16px;
+                text-decoration: none;
+                text-transform: uppercase;
+                overflow: hidden;
+                transition: .5s;
+                letter-spacing: 4px;
+                border: 1px solid #8F7CEC;
+            }
+
+                #submit:hover {
+                    background: #353;
+                    color: #fff;
+                    border-radius: 5px;
+                    border-color: #353;
+
+                }
+        </style>
+    </head>
+    <body>
+
+        <form id="payment-form">
+            <div id="link-authentication-element">
+                <!--Stripe.js injects the Link Authentication Element-->
+            </div>
+            <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>
+
+        <script>
+            // This is your test publishable API key.
+            const stripe = Stripe('pk_live_51LBODxCozZzTNCNhFdVbzm93F1N3Kk5sEiOyUYeU8GlqxF8AkS6h1JOkIqmFJ1hBmkBCEEa8cfBCY7RotHlweS7g00UzyxkUnO');
+
+            let elements;
+
+            initialize();
+            checkStatus();
+
+            document.querySelector("#payment-form").addEventListener("submit", handleSubmit);
+
+            let emailAddress = '';
+
+            // Fetches a payment intent and captures the client secret
+            async function initialize() {
+
+                const response = await fetch("/api/getCheckoutToken?userID=" + new URL(window.location.href).searchParams.get("userID"), {
+                    method: "POST",
+                    headers: { "Content-Type": "text/plain" },
+                    body: ""
+                });
+
+                const clientSecret = await response.text();
+
+                const appearance = {
+                    theme: 'night',
+                };
+                elements = stripe.elements({ appearance, clientSecret });
+
+                const linkAuthenticationElement = elements.create("linkAuthentication");
+                linkAuthenticationElement.mount("#link-authentication-element");
+
+                linkAuthenticationElement.on('change', (event) => {
+                    emailAddress = event.value.email;
+                });
+
+                const paymentElementOptions = {
+                    layout: "tabs",
+                };
+
+                const paymentElement = elements.create("payment", paymentElementOptions);
+                paymentElement.mount("#payment-element");
+            }
+
+            async function handleSubmit(e) {
+                e.preventDefault();
+                setLoading(true);
+
+                const { error } = await stripe.confirmPayment({
+                    elements,
+                    confirmParams: {
+                        // Make sure to change this to your payment completion page
+                        return_url: "https://mistox.net/store/payment/success",
+                        receipt_email: emailAddress,
+                    },
+                });
+
+                // This point will only be reached if there is an immediate error when
+                // confirming the payment. Otherwise, your customer will be redirected to
+                // your `return_url`. For some payment methods like iDEAL, your customer will
+                // be redirected to an intermediate site first to authorize the payment, then
+                // redirected to the `return_url`.
+                if (error.type === "card_error" || error.type === "validation_error") {
+                    showMessage(error.message);
+                } else {
+                    showMessage("An unexpected error occurred.");
+                }
+
+                setLoading(false);
+            }
+
+            // Fetches the payment intent status after payment submission
+            async function checkStatus() {
+                const clientSecret = new URLSearchParams(window.location.search).get(
+                    "payment_intent_client_secret"
+                );
+
+                if (!clientSecret) {
+                    return;
+                }
+
+                const { paymentIntent } = await stripe.retrievePaymentIntent(clientSecret);
+
+                switch (paymentIntent.status) {
+                    case "succeeded":
+                        showMessage("Payment succeeded!");
+                        break;
+                    case "processing":
+                        showMessage("Your payment is processing.");
+                        break;
+                    case "requires_payment_method":
+                        showMessage("Your payment was not successful, please try again.");
+                        break;
+                    default:
+                        showMessage("Something went wrong.");
+                        break;
+                }
+            }
+
+            // ------- UI helpers -------
+
+            function showMessage(messageText) {
+                const messageContainer = document.querySelector("#payment-message");
+
+                messageContainer.classList.remove("hidden");
+                messageContainer.textContent = messageText;
+
+                setTimeout(function () {
+                    messageContainer.classList.add("hidden");
+                    messageText.textContent = "";
+                }, 4000);
+            }
+
+            // Show a spinner on payment submission
+            function setLoading(isLoading) {
+                if (isLoading) {
+                    // Disable the button and show a spinner
+                    document.querySelector("#submit").disabled = true;
+                    document.querySelector("#spinner").classList.remove("hidden");
+                    document.querySelector("#button-text").classList.add("hidden");
+                } else {
+                    document.querySelector("#submit").disabled = false;
+                    document.querySelector("#spinner").classList.add("hidden");
+                    document.querySelector("#button-text").classList.remove("hidden");
+                }
+            }
+
+        </script>
+    </body>
+</html>