I'm attempting to implement stripe into my project. The code below is from the Stripe integration for asp.net MVC. But I have no MVC, it is asp.net core 5 razor pages project. So I'm modifying there code to suit razor.
This is the script.
// A reference to Stripe.js initialized with a fake API key.
const stripe = Stripe("abc");
// The items the customer wants to buy
const items = [{ id: "Art Works" }];
let elements;
initialize();
checkStatus();
document
.querySelector("#payment-form")
.addEventListener("submit", handleSubmit);
// Fetches a payment intent and captures the client secret
async function initialize() {
const response = await fetch('./?handler=create', {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ items }),
});
const { clientSecret } = await response.json();
const appearance = {
theme: 'stripe',
};
elements = stripe.elements({ appearance, clientSecret });
const paymentElement = elements.create("payment");
paymentElement.mount("#payment-element");
}
This seems to be the offending code "const response = await fetch('./?handler=create'," I know the fetch url is incorrect.
This is the handler I'm trying to fetch on the page behind index.cshtml
public IActionResult OnPostCreate(PaymentIntentCreateRequest request)
{
var paymentIntentService = new PaymentIntentService();
var paymentIntent = paymentIntentService.Create(new PaymentIntentCreateOptions
{
Amount = CalculateOrderAmount(request.Items),
Currency = "AUD",
PaymentMethodTypes = new List<string>
{
"card",
},
});
return new JsonResult(new { clientSecret = paymentIntent.ClientSecret });
}
Any help would be appreciated Thank you.