#Kartikre-paymentintents
solemn bramble
@nocturne pine hi! could you share some of the code you wrote? And maybe the ID of the PaymentIntent pi_xxx you're testing with?
nocturne pine
yeah sure $paymentIntent = \Stripe\PaymentIntent::create([
'amount' => calculateOrderAmount(),
'currency' => 'usd',
'automatic_payment_methods' => [
'enabled' => true,
],
]);
with this I am generating a new payment intent on the reload of the page and then using the client secret on the front end
solemn bramble
ok and what does the frontend do? And where is your code for accessing $paymentIntent->client_secret and passing it to the frontend?
nocturne pine
async function initialize() {
const { clientSecret } = await fetch("/create.php", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ items }),
}).then((r) => r.json());
console.log(r.json);
elements = stripe.elements({ clientSecret });
const paymentElement = elements.create("payment");
paymentElement.mount("#payment-element");
}
This is the same code from the stripe docs help
solemn bramble
can you show me what that console.log(r.json) printed? and add a console.log(clientSecret) and show me what that prints? And share the ID of the PaymentIntent pi_xxx you're testing with?
nocturne pine
payment intent id pi_3KH
This is the exact error
(index):1 Unhandled payment Element loaderror
code: "payment_intent_invalid_parameter"
doc_url: "https://stripe.com/docs/error-codes/payment-intent-invalid-parameter"
message: "The client_secret provided does not match the client_secret associated with the PaymentIntent."
param: "client_secret"
type: "invalid_request_error"
and console.log prints the client sec perfectly
solemn bramble
payment intent id pi_3KH
pi_3KH that's not the full ID? The ID should be much longer than that.
solemn bramble
and console.log prints the client sec perfectly
can you show me exactly what it prints
nocturne pine
pi_3KHnMPSCQUUW60YM0UJzvIlH
pi_3KHnRMSCQUUW60YM0MDFhDv2_secret_6kjNgwhoqMC81jXCYVFYdYrWw
solemn bramble
cool so those are indeed differnt
you can see that directly — the secret for pi_3KHnMPSCQUUW60YM0UJzvIlH should look like pi_3KHnMPSCQUUW60YM0UJzvIlH_secret_<something>
nocturne pine
Sorry about the id I sent the wrong one this is the latest Id
solemn bramble
ok
can you share the full frontend code?
I'm curious about how you create the Stripe() object especially
nocturne pine
I diretcly copied it from the Stripe page
const items = [{ id: "xl-tshirt" }];
let elements;
initialize();
checkStatus();
document
.querySelector("#payment-form")
.addEventListener("submit", handleSubmit);
// Fetches a payment intent and captures the client secret
async function initialize() {
const { clientSecret } = await fetch("/create.php", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ items }),
}).then((r) => r.json());
console.log(clientSecret);
elements = stripe.elements({ clientSecret });
const paymentElement = elements.create("payment");
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: "http://localhost:3000/thankyou.html",
},
});
// redirected to the return_url.
if (error.type === "card_error" || error.type === "validation_error") {
showMessage(error.message);
} else {
showMessage("An unexpected error occured.");
}
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");
}
}
can you show me how you create the stripe variable?
somewhere you have stripe = Stripe( and I need to see that part.
nocturne pine
const stripe = Stripe("pk_test_XXX") with my stripe key
at the top
sorry for the late message
solemn bramble
what is the value of the key?
also I assume you are hosting this all locally so there's no link I can visit to see your site in action?
nocturne pine
Yeah I am hosting this locally you want the public key right?
pk_test_51BTUDGJAJfZb9HEBwDg86TN1KNprHjkfipXmEDMb0gSCassK5T3ZfxsAbcgKVmAIXF7oZ6ItlZZbXO6idTHE67IM007EwQ4uN3
@solemn bramble I checked every thing the client secret at the backend is perfectly generated and the frontend does get the client secret but when it comes to load the payment element it throws the error. Is it a issue on stripe or in my code?
Here is the console error
solemn bramble
you're using the wrong API key
that pk_test_xxx is not your key, it's the key from our demo accounts(you copied the code but didn't change it)
please replace it with your own account's key from https://dashboard.stripe.com/test/apikeys