Getting Started
Usage
Learn how to implement the Creem Module in your Nuxt project.
This is only a basic example of what you can achieve with the Creem module.
Basic Usage Example
Here is an example of a page that lists products and allows the user to initiate a checkout session for them.
- Design your UI and fetch the products from the Creem API.
- Create your own server endpoint and import the
useCreemCheckout()composable to initiate a checkout session. - You redirect the user to the checkout session URL.
- Wait for the user to complete the payment and return to your website.
- Have your webhook handle the payment and process the order.
- Go Wild!
Fetching Products
app.config.ts
<template>
// ...
<ULandingGrid>
<ULandingCard
v-for="product in products.items"
:key="product.id"
:title="product.name"
>
<template #default>
<UButton @click="createCheckoutSession(product)">
Buy for ${{ product.price / 100 }}
</UButton>
</template>
</ULandingCard>
</ULandingGrid>
// ...
</template>
<script setup lang="ts">
const { data: products, status } = await useFetch<CreemProductList>('/api/v1/products/list', {
headers: {
'content-type': 'application/json',
},
})
// Create checkout session and navigate to it
const createCheckoutSession = async (product: CreemProduct) => {
const checkoutSessionUrl = await $fetch('/api/v1/checkout', {
method: 'POST',
headers: {
'content-type': 'application/json',
},
body: {
product,
},
})
await navigateTo(checkoutSessionUrl, { external: true })
}
</script>
</script>
Fetching a Checkout Session
On your page of your component, you can fetch a checkout session and navigate to it by creating your server endpoint and fetching the data using the server composables like useCreemCheckout().
app.config.ts
<template>
// ...
<button @click="buyProduct(product)">
Buy Product
</button>
// ...
</template>
<script setup lang="ts">
const buyProduct = async (product: CreemProduct) => {
const checkoutSessionUrl = await $fetch('/api/v1/checkout', {
method: 'POST',
headers: {
'content-type': 'application/json',
},
body: {
product,
},
})
await navigateTo(checkoutSessionUrl, { external: true })
}
</script>
server/api/v1/checkout/index.post.ts
export default defineEventHandler(async (event) => {
const { product } = await readBody(event)
const config = useRuntimeConfig()
// Bring your own Auth, like Nuxt Auth Utils or any other auth provider.
const session = await useCreemCheckout().createSession({
product_id: product.id,
return_url: `${config.public.site_url}${config.creem.return_url}`
})
if (!session.checkout_url) {
throw createError({
statusCode: 400,
statusMessage: 'Failed to create checkout session',
})
}
return session.checkout_url
})