I’m trying to use a Java script for payment but something is wrong and I get the following errors in the browser console:
checkout.js:26
POST http://localhost:8080/create-payment-intent 405 (Method Not Allowed)
initialize @ checkout.js:26
(anonymous) @ checkout.js:13
checkout.js:59 Uncaught (in promise) IntegrationError: In order to create a linkAuthentication element, you must pass a clientSecret or mode when creating the Elements group.
e.g. stripe.elements({clientSecret: "{{CLIENT_SECRET}}"})
at $t (v3/:1:279900)
at Vn (v3/:1:327665)
at new t (v3/:1:332993)
at t.<anonymous> (v3/:1:346309)
at t.create (v3/:1:101574)
at initialize (checkout.js:41:48)
The code in HTML and js is not mine, I found it on You Tube, but when I downloaded the project everything worked fine
but now, unfortunately, I’m getting these errors. Spring security may be a problem?
Here is the link to the author’s project https://github.com/davidmbochi/stripe-spring-boot
Here is my gitHub project https://github.com/DawidZelezniak420/Courses-App
How process works in my app :
1.My html form sends data to checkout-form.html
package com.zelezniak.project.controller;
import com.zelezniak.project.dto.PaymentInfo;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
@Controller
@Slf4j
public class CheckoutController {
@Value("${stripe.api.publicKey}")
private String publicKey;
@PostMapping({"/checkout"})
public String showCard(@ModelAttribute PaymentInfo paymentInfo, Model model) {
model.addAttribute("publicKey", this.publicKey);
model.addAttribute("amount", paymentInfo.getAmount());
model.addAttribute("email", paymentInfo.getEmail());
model.addAttribute("productName", paymentInfo.getProductName());
return "checkout-form";
}
}
2.checkout-form.html retrieves the data
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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" />
<link rel="stylesheet" href="/checkout.css" />
<script src="https://js.stripe.com/v3/"></script>
<script th:inline="javascript">
/*<![CDATA[*/
var publicKey = /*[[${publicKey}]]*/ null;
var amount = /*[[${amount}]]*/ null;
var email = /*[[${email}]]*/ null;
var productName = /*[[${productName}]]*/ null;
/*]]>*/
</script>
<script src="/checkout.js" defer></script>
</head>
<body>
<!-- Display a payment form -->
<form id="payment-form">
<span>You are about to make a payment of: </span>
<span th:text="*{amount}"></span>
<span>USD</span>
<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>
</body>
</html>
3.The data are sended to checkout.js and in this file i have the problem I mentioned earlier
// This is your test publishable API key.
const stripe = Stripe(publicKey);
// The items the customer wants to buy
const request = {
amount: amount,
email: email,
productName: productName
}
let elements;
initialize();
checkStatus();
document
.querySelector("#payment-form")
.addEventListener("submit", handleSubmit);
let emailAddress = '';
// Fetches a payment intent and captures the client secret
let paymentIntentID = '';
async function initialize() {
const response = await fetch("/create-payment-intent", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(request),
});
const { intentID, clientSecret } = await response.json();
paymentIntentID = intentID;
const appearance = {
theme: 'stripe',
};
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",
defaultValues: {
billingDetails:{
email: request.email
}
}
};
const paymentElement = elements.create("payment", paymentElementOptions);
paymentElement.mount("#payment-element");
}
console.log(paymentIntentID);
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://dashboard.stripe.com/test/payments/"+paymentIntentID,
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");
messageContainer.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");
}
}
4.checkout.js tries to call this method but idk why it doesn’t work
package com.zelezniak.project.controller;
import com.stripe.exception.StripeException;
import com.stripe.model.PaymentIntent;
import com.stripe.param.PaymentIntentCreateParams;
import com.stripe.param.PaymentIntentCreateParams.AutomaticPaymentMethods;
import com.zelezniak.project.dto.PaymentInfo;
import com.zelezniak.project.dto.Response;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
@RestController
@Slf4j
public class PaymentIntentController {
@PostMapping("/create-payment-intent")
public Response createPaymentIntent(@RequestBody PaymentInfo paymentInfo)
throws StripeException {
PaymentIntentCreateParams params =
PaymentIntentCreateParams.builder()
.setAmount((long) (paymentInfo.getAmount() * 100L))
.putMetadata("productName",
paymentInfo.getProductName())
.setCurrency("usd")
.setAutomaticPaymentMethods(
PaymentIntentCreateParams
.AutomaticPaymentMethods
.builder()
.setEnabled(true)
.build()
)
.build();
PaymentIntent intent =
PaymentIntent.create(params);
return new Response(intent.getId(),
intent.getClientSecret());
}
}
I tried to find some solution, but nothing works 🙁
