How to save card after payment in stripe? - asp.net-core

Question

I want to save a card for next payments in my app, but always get the same exception : "Stripe.StripeException: 'The provided PaymentMethod was previously used with a PaymentIntent without Customer attachment, shared with a connected account without Customer attachment, or was detached from a Customer. It may not be used again. To use a PaymentMethod multiple times, you must attach it to a Customer first.'
"
I don't have any clue, how to solve it.
Here is my Controller.cs:
public class PaymentController : Controller
{
public IActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Processing()
{
var service = new PaymentMethodService();
var obj=service.Get("pm_1ICLE7GcqJgpxMZpnTbfS7Jw");
var paymentIntents = new PaymentIntentService();
var paymentIntent = paymentIntents.Create(new PaymentIntentCreateOptions
{
Amount = 2000,
Currency = "usd",
Customer = "cus_Ing6wBxNYVdB44",
ReceiptEmail = "eman29#jdecorz.com",
PaymentMethod = obj.Id,
Confirm = true,
OffSession = true
});//here exception is thrown
return Json(new { clientSecret = paymentIntent.ClientSecret });
}
}
My client.js code:
var stripe = Stripe("pk_test_51IBEAOGcqJgpxMZpvVKN2j9K7RJpzazfnG4u0relgSXiVBtNDd7nGgxBmX8BNCvuNerv1jnf0UVL5Uz8ODeJ7wvI00ruu2ByVM");
// Disable the button until we have Stripe set up on the page
document.querySelector("button").disabled = true;
fetch("/Payment/Processing", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(purchase)
})
.then(function (result) {
return result.json();
})
.then(function (data) {
var elements = stripe.elements();
var style = {
base: {
color: "#32325d",
fontFamily: 'Arial, sans-serif',
fontSmoothing: "antialiased",
fontSize: "16px",
"::placeholder": {
color: "#32325d"
}
},
invalid: {
fontFamily: 'Arial, sans-serif',
color: "#fa755a",
iconColor: "#fa755a"
}
};
var card = elements.create("card", { style: style });
// Stripe injects an iframe into the DOM
card.mount("#card-element");
card.on("change", function (event) {
// Disable the Pay button if there are no card details in the Element
document.querySelector("button").disabled = event.empty;
document.querySelector("#card-error").textContent = event.error ? event.error.message : "";
});
var form = document.getElementById("payment-form");
form.addEventListener("submit", function (event) {
event.preventDefault();
// Complete payment when the submit button is clicked
payWithCard(stripe, card, data.clientSecret);
});
});
// Calls stripe.confirmCardPayment
// If the card requires authentication Stripe shows a pop-up modal to
// prompt the user to enter authentication details without leaving your page.
var payWithCard = function (stripe, card, clientSecret) {
loading(true);
stripe
.confirmCardPayment(clientSecret, {
payment_method: {
card: card
}
})
.then(function (result) {
if (result.error) {
// Show error to your customer
showError(result.error.message);
} else {
// The payment succeeded!
orderComplete(result.paymentIntent.id);
}
});
};
/* ------- UI helpers ------- */
// Shows a success message when the payment is complete
var orderComplete = function (paymentIntentId) {
loading(false);
document
.querySelector(".result-message a")
.setAttribute(
"href",
"https://dashboard.stripe.com/test/payments/" + paymentIntentId
);
document.querySelector(".result-message").classList.remove("hidden");
document.querySelector("button").disabled = true;
};
// Show the customer the error from Stripe if their card fails to charge
var showError = function (errorMsgText) {
loading(false);
var errorMsg = document.querySelector("#card-error");
errorMsg.textContent = errorMsgText;
setTimeout(function () {
errorMsg.textContent = "";
}, 4000);
};
// Show a spinner on payment submission
var loading = function (isLoading) {
if (isLoading) {
// Disable the button and show a spinner
document.querySelector("button").disabled = true;
document.querySelector("#spinner").classList.remove("hidden");
document.querySelector("#button-text").classList.add("hidden");
} else {
document.querySelector("button").disabled = false;
document.querySelector("#spinner").classList.add("hidden");
document.querySelector("#button-text").classList.remove("hidden");
}
};
I try to use samples from https://stripe.com/docs/payments/save-during-payment and https://stripe.com/docs/payments/save-and-reuse, but can't understand, what I do wrongly
I know this is the dumb question, but it is my first expierence with Stripe and I can't to find any solution for this problem.
Thank you in advance!

Answer 1

When re-using a PaymentMethod for a Customer, it must be attached to them. There is a few ways to go about that. For example, one option is to create a payment method and then to call attach in the backend [1]. The other option is to collect card information using Stripe.js and Elements and to "setup future usage", this will automatically attach the card to the customer [2].
One thing to note, if your code uses confirmCardPayment() [3], that would normally be an "on-session" payment as the user is actively confirming the charge. [4]
[1] https://stripe.com/docs/api/payment_methods/attach
[2] https://stripe.com/docs/js/payment_intents/confirm_card_payment#stripe_confirm_card_payment-data-setup_future_usage
[3] https://stripe.com/docs/js/payment_intents/confirm_card_payment
[4] https://stripe.com/docs/api/payment_intents/create#create_payment_intent-off_session