Thiết kế website giá rẻ

Question

I’m fairly new to stripe payment integration that’s why I’m struggling with why this is not working. below is my payment integration into spring. I have the correct libraries in spring, but when I run, I get a screen with just the pay now button instead of the payment form. I have the correct secret and publishable keys. I have tried front end debugging and I noticed that compared to other pages, mine does not generate this file elements-inner-payment-request-a571ca6357c4e23ae8beeb8995bd9684.js nor this ui-shared-c58ee44d70fd01369162f07be35afdcf.js. I don’t know if that would be helpful. I’d appreciate any help!!

const stripe = Stripe("");

const items = [{
  id: "Columbarial",
  price: 200
}];
let elements;

initialize();
checkStatus();

document
  .querySelector("#payment-form")
  .addEventListener("submit", handleSubmit);

async function initialize() {
  try {
    const response = await fetch("/create-payment-intent", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        items
      }),
    });

    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

    const {
      clientSecret
    } = await response.json();
    const appearance = {
      theme: 'stripe'
    };
    elements = stripe.elements({
      appearance,
      clientSecret
    });

    const paymentElementOptions = {
      layout: "tabs"
    };
    const paymentElement = elements.create("payment", paymentElementOptions);
    paymentElement.mount("#payment-element");
  } catch (error) {
    console.error("Error initializing payment elements:", error);
  }
}

async function handleSubmit(e) {
  e.preventDefault();
  setLoading(true);

  const {
    error
  } = await stripe.confirmPayment({
    elements,
    confirmParams: {
      return_url: "http://localhost:8443",
    },
  });

  if (error) {
    showMessage(error.message || "An unexpected error occurred.");
  }

  setLoading(false);
}

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;
  }
}

function showMessage(messageText) {
  const messageContainer = document.querySelector("#payment-message");
  messageContainer.classList.remove("hidden");
  messageContainer.textContent = messageText;

  setTimeout(() => {
    messageContainer.classList.add("hidden");
    messageContainer.textContent = "";
  }, 4000);
}

function setLoading(isLoading) {
  if (isLoading) {
    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");
  }
}

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  height: 100vh;
  background-color: #f4f4f4;
}

.container {
  display: flex;
  background-color: #1a2b48;
  width: 100%;
  height: 100%;
}


/* Add this to your existing CSS */

.payment-buttons {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.payment-button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
}


/* Style for individual buttons (optional) */

.left {
  padding: 20px;
  color: white;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.left h2 {
  margin-bottom: 10px;
}

.left p {
  margin: 5px 0;
  font-size: 1.2em;
}

.left ul {
  list-style: none;
  padding: 0;
  text-align: left;
}

.left ul li {
  margin: 5px 0;
  display: flex;
  align-items: center;
}

.left ul li:before {
  content: "•";
  margin-right: 10px;
  color: #007bff;
  font-size: 1.2em;
}

.right {
  padding: 30px;
  background-color: white;
  flex: 1;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.right h3 {
  margin-bottom: 20px;
  text-align: center;
}

.right form {
  display: flex;
  flex-direction: column;
}

.right label {
  margin-bottom: 5px;
  font-weight: bold;
}

#payment-element {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

#payment-result {
  margin-top: 10px;
  color: red;
}

.right button {
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.right button:hover {
  background-color: #0056b3;
}

<!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" />
  <script async th:src="@{https://js.stripe.com/v3/}"></script>
  <link rel="stylesheet" type="text/css" th:href="@{/css/checkout.css}" />
  <script type="application/javascript" th:src="@{/scripts/checkout.js}" defer></script>
</head>

<body>
  <!-- Display a payment form -->
  <form id="payment-form">
    <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>



import java.nio.file.Paths;

import static spark.Spark.get;
import static spark.Spark.post;
import static spark.Spark.staticFiles;
import static spark.Spark.port;

import com.google.gson.Gson;
import com.google.gson.annotations.SerializedName;
import com.stripe.Stripe;
import com.stripe.model.PaymentIntent;
import com.stripe.param.PaymentIntentCreateParams;


public class Server {
    private static Gson gson = new Gson();

    static class CreatePaymentItem {
        @SerializedName("id")
        String id;

        public String getId() {
            return id;
        }
    }

    static class CreatePayment {
        @SerializedName("items")
        CreatePaymentItem[] items;

        public CreatePaymentItem[] getItems() {
            return items;
        }
    }

    static class CreatePaymentResponse {
        private String clientSecret;
        public CreatePaymentResponse(String clientSecret) {
            this.clientSecret = clientSecret;
        }
    }

    static int calculateOrderAmount(CreatePaymentItem[] items) {
        // Replace this with actual calculation logic
        return 200;
    }

    public static void main(String[] args) {
        port(8443);
        staticFiles.externalLocation(Paths.get("public").toAbsolutePath().toString());

        // This is your test secret API key.
        Stripe.apiKey = "";

        post("/create-payment-intent", (request, response) -> {
            response.type("application/json");
            CreatePayment postBody = gson.fromJson(request.body(), CreatePayment.class);

            PaymentIntentCreateParams params = PaymentIntentCreateParams.builder()
                    .setAmount(Long.valueOf(calculateOrderAmount(postBody.getItems())))
                    .setCurrency("usd")
                    .setAutomaticPaymentMethods(PaymentIntentCreateParams.AutomaticPaymentMethods.builder()
                            .setEnabled(true)
                            .build())
                    .build();

            PaymentIntent paymentIntent = PaymentIntent.create(params);

            CreatePaymentResponse paymentResponse = new CreatePaymentResponse(paymentIntent.getClientSecret());
            return gson.toJson(paymentResponse);
        });
    }
}

Thiết kế website giá rẻ

Danh mục

Stripe integration in spring