#thomasnevink
mossy trail
Sure
When trying to make a payment I'm getting this payment_intent_unexpected_state Also, card details have not been entered
pi_1NzDOmJAJfZb9HEB6m72U3KK
It happens when I call stripe.confirmPayment method in front-end
This is the issue I'm getting "You cannot confirm this PaymentIntent because it's missing a payment method. You can either update the PaymentIntent with a payment method and then confirm it again, or confirm it again directly with a payment method"
async handleSubmit(event: any) {
console.log(event.target.value);
if (event.target.id === 'payment-form') {
// Prevent the default form submission behavior
event.preventDefault();
this.setLoading(true);
this.checkStatus();
const stripe = await loadStripe('pk_test_51BTUDGJAJfZb9HEBwDg86TN1KNprHjkfipXmEDMb0gSCassK5T3ZfxsAbcgKVmAIXF7oZ6ItlZZbXO6idTHE67IM007EwQ4uN3');
const { error } = await stripe.confirmPayment(
{
elements: this.elements,
clientSecret: this.secretCodeStrip,
confirmParams: {
// Return URL where the customer should be redirected after the PaymentIntent is confirmed.
return_url: 'https://example.com',
}
}
);
if (error.type === "card_error" || error.type === "validation_error") {
alert()
this.showMessage(error.message);
} else {
this.showMessage("An unexpected error occurred.");
}
this.setLoading(false);
}
}
opal hull
Do you have a link where I could reproduce the issue?
mossy trail
Let me check
tough pilotBOT
mossy trail
{
"code": "payment_intent_unexpected_state",
"doc_url": "https://stripe.com/docs/error-codes/payment-intent-unexpected-state",
"message": "You cannot confirm this PaymentIntent because it's missing a payment method. You can either update the PaymentIntent with a payment method and then confirm it again, or confirm it again directly with a payment method.",
"payment_intent": {
"id": "pi_1NzGl4JAJfZb9HEBC0hSmU0b",
"object": "payment_intent",
"amount": 20,
"amount_details": {
"tip": {}
},
"automatic_payment_methods": {
"allow_redirects": "always",
"enabled": true
},
"canceled_at": null,
"cancellation_reason": null,
"capture_method": "automatic",
"client_secret": "pi_1NzGl4JAJfZb9HEBC0hSmU0b_secret_OqQTMCdC0Quio9ZQPeHHBDnqf",
"confirmation_method": "automatic",
"created": 1696847538,
"currency": "usd",
"description": null,
"last_payment_error": null,
"livemode": false,
"next_action": null,
"payment_method": null,
"payment_method_configuration_details": {
"id": "pmc_1Jx72lJAJfZb9HEB7TuwJN1f",
"parent": null
},
"payment_method_types": [
"card"
],
"processing": null,
"receipt_email": null,
"setup_future_usage": null,
"shipping": null,
"source": null,
"status": "requires_payment_method"
},
"request_log_url": "https://dashboard.stripe.com/test/logs/req_qsiJzY6XYR75Aw?t=1696847551",
"type": "invalid_request_error"
}
modern gale
just share the frontend code snippet here
mossy trail
ok
<form class="mt-2" id="payment-form" (submit)="handleSubmit($event)">
<div id="payment-element" #paymentElement>
<!-- Stripe.js will inject the card element here -->
</div>
<div> </div>
<!-- Add a checkbox for saving payment method -->
<div class="form-group">
<input type="checkbox" id="save-payment-method" />
<label for="save-payment-method">Save this card for future purchases</label>
</div>
<!--
<button id="submit" class="visible-button" >
<div class="spinner hidden" id="spinner"></div>
<span id="button-text">Pay now</span>
</button> -->
<button id="submit" [disabled]="isLoading">
<div [hidden]="!isLoading" id="spinner" class="spinner"></div>
<span [hidden]="isLoading" id="button-text">Pay now</span>
</button>
<!-- <div id="error-message">
</div> -->
<!-- <div #messageContainer id="error-message" [hidden]="!messageText">
{{ messageText }}
</div> -->
<!-- <div id="payment-message" class="hidden">
</div> -->
<div #paymentContainer id="payment-message" [hidden]="!messageText">
{{ messageText }}
</div>
</form>
modern gale
the javascript code
mossy trail
ok
async handleSubmit(event: any) {
console.log(event.target.value);
if (event.target.id === 'payment-form') {
// Prevent the default form submission behavior
event.preventDefault();
this.setLoading(true);
this.checkStatus();
const stripe = await loadStripe('pk_test_51BTUDGJAJfZb9HEBwDg86TN1KNprHjkfipXmEDMb0gSCassK5T3ZfxsAbcgKVmAIXF7oZ6ItlZZbXO6idTHE67IM007EwQ4uN3');
const { error } = await stripe.confirmPayment(
{
elements: this.elements,
clientSecret: this.secretCodeStrip,
confirmParams: {
// Return URL where the customer should be redirected after the PaymentIntent is confirmed.
return_url: 'https://example.com',
}
}
);
if (error.type === "card_error" || error.type === "validation_error") {
alert()
this.showMessage(error.message);
} else {
this.showMessage("An unexpected error occurred.");
}
this.setLoading(false);
}
}
This is pay btn click code
element loading code
async initializeStripe() {
let emailAddress = '';
const stripe = await loadStripe('pk_test_51BTUDGJAJfZb9HEBwDg86TN1KNprHjkfipXmEDMb0gSCassK5T3ZfxsAbcgKVmAIXF7oZ6ItlZZbXO6idTHE67IM007EwQ4uN3');
let elements;
elements = stripe.elements({ clientSecret: this.secretCodeStrip, appearance: { theme: 'stripe', } });
const paymentElementOptions = {
layout: "tabs",
};a
const paymentElement = elements.create("payment", paymentElementOptions, { paymentMethodOrder: ['card'] });
paymentElement.mount("#payment-element");
}
coral flare