I am encountering an issue while trying to click on a "checkout" button that is supposed to send cart data to a backend and redirect me to a URL generated by the backend.
Despite receiving a valid URL, my code is not functioning correctly. When I attempt to redirect to the provided URL, the page simply refreshes without redirecting me anywhere.
Although I have a working version of the code from a different project, my attempts to replicate it by copying and pasting have been unsuccessful. Refactoring it to align with my current codebase has also proven to be a challenge, as I cannot seem to identify the necessary adjustments to make it operational.
The code snippet above represents the working code, while the one below it is my non-functional code. I am seeking assistance to understand the disparity between the two sets of code. What is causing the malfunction in my version? How can I modify it to mirror the functionality of the working code?
Working
-Frontend
<script setup>
import { ref, onBeforeMount } from "vue";
import CheckoutSummary from "../components/CheckoutSummary.vue";
import CheckoutButton from "../components/CheckoutButton.vue";
// Reactive data
const isLoading = ref(false);
const cart = ref([]);
// Get the cart data
onBeforeMount(async () => {
const response = await fetch("/api/shopping-cart").then((r) => r.json());
cart.value = response.cart;
});
// Click handler for button
const redirectToStripe = async () => {
isLoading.value = true;
const response = await fetch("/api/create-checkout-session", {
method: "POST",
});
const { url } = await response.json();
window.location.href = url;
};
</script>
-Backend
// Create a Checkout Session
app.post("/create-checkout-session", async (req, res) => {
// Make an array of just our Stripe Price ID and quantities
const lineItems = USER_SHOPPING_CART.map((item) => {
return {
price: item.stripePriceId,
quantity: item.quantity,
};
});
const session = await stripe.checkout.sessions.create({
mode: "payment",
line_items: lineItems,
success_url: `http://localhost:3000/success?session_id={CHECKOUT_SESSION_ID}`,
cancel_url: `http://localhost:3000/`,
});
return res.send({ url: session.url });
});
Not Working
-Frontend
<script setup>
import { computed } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
const router = useRouter();
// eslint-disable-next-line no-unused-vars, no-undef
const props = defineProps({
isLoading: Boolean,
});
const store = useStore();
const cartItems = computed(() => store.getters.getCheckout);
const redirectToStripe = async () => {
const { url } = await fetch("http://localhost:5000/create-checkout-session", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify(cartItems.value),
}).then((response) => response.json());
console.log("url=", url);
router.go(url);
};
</script>
-Backend
app.post("/create-checkout-session", async (req, res) => {
// Make an array of just our Stripe Price ID and quantities
const lineItems = req.body.map((item) => {
console.log("lineItems= ", item.item.priceId, item.item.quantity);
return {
price: item.item.priceId,
quantity: item.item.quantity,
};
});
const session = await stripe.checkout.sessions.create({
mode: "payment",
line_items: lineItems,
success_url: `http://localhost:8080/success?session_id={CHECKOUT_SESSION_ID}`,
cancel_url: `http://localhost:8080/`,
});
return res.send({ url: session.url });
});