Initial Commit

sharmawaiaman · Apr 19, 2024 · d81cd77 · d81cd77
commit d81cd77
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 0 deletions.
diff --git a/checkout.html b/checkout.html
@@ -0,0 +1,21 @@
+<head>
+  <title>Checkout</title>
+  <script src="https://js.stripe.com/v3/"></script>
+
+</head>
+
+<form id="payment-form">
+  <div id="payment-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>
+
+<script src="./checkout.js"></script>
+<!-- <script src="./status.js"></script> -->
diff --git a/checkout.js b/checkout.js
@@ -0,0 +1,43 @@
+// Set your publishable key: remember to change this to your live publishable key in production
+// See your keys here: https://dashboard.stripe.com/apikeys
+const stripe = Stripe('pk_test_51OY9qdSBsBROTHWGSGXJTBcYu35dRhJsFFGj2iI7e7CS4WID4vUsZxCenCK8lmVaOGIVL6V334bPUj8pdkK38Flr00U6rRYMOd');
+
+
+const options = {
+  clientSecret: 'pi_3P7CDRSBsBROTHWG09B1BmKK_secret_6c5arXq9n0QZ1b00PMc6t4IgT'
+};
+
+// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous step
+const elements = stripe.elements(options);
+
+// Create and mount the Payment Element
+const paymentElement = elements.create('payment');
+paymentElement.mount('#payment-element');
+
+
+
+const form = document.getElementById('payment-form');
+
+form.addEventListener('submit', async (event) => {
+  event.preventDefault();
+
+  const {error} = await stripe.confirmPayment({
+    //`Elements` instance that was used to create the Payment Element
+    elements,
+    confirmParams: {
+      return_url: 'http://localhost:3000/status',
+    },
+  });
+
+  if (error) {
+    // This point will only be reached if there is an immediate error when
+    // confirming the payment. Show error to your customer (for example, payment
+    // details incomplete)
+    const messageContainer = document.querySelector('#error-message');
+    messageContainer.textContent = error.message;
+  } else {
+    // 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`.
+  }
+});
diff --git a/status.html b/status.html
@@ -0,0 +1,11 @@
+<head>
+  <title>Checkout</title>
+  <script src="https://js.stripe.com/v3/"></script>
+</head>
+
+<div id="message">
+  <!-- Display error message to your customers here -->
+</div>
+
+<script src="./status.js"></script>
+<!-- <script src="./status.js"></script> -->
diff --git a/status.js b/status.js
@@ -0,0 +1,43 @@
+// Initialize Stripe.js using your publishable key
+const stripe = Stripe(
+  "pk_test_51OY9qdSBsBROTHWGSGXJTBcYu35dRhJsFFGj2iI7e7CS4WID4vUsZxCenCK8lmVaOGIVL6V334bPUj8pdkK38Flr00U6rRYMOd"
+);
+
+// Retrieve the "payment_intent_client_secret" query parameter appended to
+// your return_url by Stripe.js
+const clientSecret = new URLSearchParams(window.location.search).get(
+  "payment_intent_client_secret"
+);
+
+// Retrieve the PaymentIntent
+stripe.retrievePaymentIntent(clientSecret).then(({ paymentIntent }) => {
+  const message = document.querySelector("#message");
+
+  // Inspect the PaymentIntent `status` to indicate the status of the payment
+  // to your customer.
+  //
+  // Some payment methods will [immediately succeed or fail][0] upon
+  // confirmation, while others will first enter a `processing` state.
+  //
+  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
+  switch (paymentIntent.status) {
+    case "succeeded":
+      message.innerText = "Success! Payment received.";
+      break;
+
+    case "processing":
+      message.innerText =
+        "Payment processing. We'll update you when payment is received.";
+      break;
+
+    case "requires_payment_method":
+      message.innerText = "Payment failed. Please try another payment method.";
+      // Redirect your user back to your payment page to attempt collecting
+      // payment again
+      break;
+
+    default:
+      message.innerText = "Something went wrong.";
+      break;
+  }
+});