I followed the instructions in the documentation to create a checkout session for stripe, but I encountered the following error:
Access to fetch at 'https://subdomain' from origin 'https://main-domain' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Where and how do I add the necessary header?
This is the request that is sent when the checkout button is clicked:
<script type="text/javascript">
var stripe = Stripe('api key');
var checkoutButton = document.getElementById('checkout-button');
checkoutButton.addEventListener('click', function() {
fetch('https://subdomain/create-session', {
method: 'POST',
headers: new Headers({
'Authorization': 'Basic',
'Access-Control-Allow-Origin': '*'
})
})
.then(function(response) {
return response.json();
})
.then(function(session) {
return stripe.redirectToCheckout({ sessionId: session.id });
})
.then(function(result) {
if (result.error) {
alert(result.error.message);
}
})
.catch(function(error) {
console.error('Error:', error);
});
});
</script>
This is my express route:
app.post("/create-checkout-session", async (req, res) => {
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
line_items: [
{ price: 'stripe product id', quantity: 1 },
{ price: 'stripe product id', quantity: 1 }
],
mode: 'payment',
success_url: 'https://site/success.html',
cancel_url: 'https://site/cancel.html',
});
res.json({ id: session.id });
});