I've got this simple component, which sends a client-side-only payment order to my stripe account. Everything works but I can't figure out how to get a response/token from stripe with the order information, which I can send to my backend.
<script setup>
import {onMounted} from "vue";
let stripe = null
onMounted(async () => {
stripe = Stripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY)
})
const redirect = () => {
stripe.redirectToCheckout({
successUrl: 'http://localhost:8000/success',
cancelUrl: 'http://localhost:8000/cancel',
lineItems: [
{
price: import.meta.env.VITE_PHOTO_PRICE,
quantity: 2
}
],
mode: 'payment'
})
}
</script>
<template>
<div id="checkout" class="checkout">
<button @click="redirect">Pay now!</button>
</div>
</template>
Is there a reference in the stripe checkout docs or something?
The integration path you chose here is called client-only Checkout but this was deprecated a couple of years ago by Stripe and is mostly discouraged at this point. Instead, Stripe built their new product called Payment Links which is even easier. You configure what you want to sell in the Dashboard, get a URL back looking like https://buy.stripe.com/123ABC456 and you can share that URL with any of your customers for them to pay you.
To focus on your specific question though, there is no "order id" or anything else returned by redirectToCheckout(). The goal is this call is to send your customer to Stripe's hosted payment page immediately. If you need to map this future payment with a specific customer or order, you should use the client_reference_id property associated with a Checkout Session. You can set it client-side as clientReferenceId in your call and it will be set on the Session itself for you. When you get the checkout.session.completed event sent to your webhook handler, or after the redirect from Checkout, you'll be able to map that id to whatever you have stored internally in your own system/database.