stripe-astro-loader

stripe-astro-loader

Fetch data from the Stripe API and use it in Astro collections — only has products for now.

Install

npm i stripe stripe-astro-loader

Configure

import { defineCollection } from "astro:content";
import { stripePriceLoader, stripeProductLoader } from "stripe-astro-loader";
import Stripe from "stripe";

const stripe = new Stripe("SECRET_KEY");

const products = defineCollection({
  loader: stripeProductLoader(stripe),
});

const prices = defineCollection({
  loader: stripePriceLoader(stripe),
});

export const collections = { products, prices };

Make sure to enable the experimental content layer in your Astro config:

import { defineConfig } from "astro/config";

export default defineConfig({
  experimental: {
    contentLayer: true,
  },
});

Usage

// pages/index.astro
---
import { getCollection } from 'astro:content';

const products = await getCollection('products');
---

// pages/products/[id].astro
---
import { getCollection,render } from 'astro:content';

export async function getStaticPaths() {
  const products = await getCollection('products');

  return products.map(product => ({
    params: { id: product.id }, props: { product },
  }));
}

const { product } = Astro.props;
const { Content, headings } = await render(product);
---

<h1>{product.data.name}</h1>

<pre>{JSON.stringify({product, headings}, null, 2)}</pre>

<Content />