Components
Pricing
Guide for Pricing.svelte component
This component provides a sleek section for explaining your pricing options.
Location: src/components/Pricing.svelte
Setup
To change the price cards and their details you can edit the cards array:
Pricing.svelte
<script lang="ts>
...
let cards = [
{
id: 'basic', // SET ID TO THE SAME VALUE AS DEFINED IN YOUR src/routes/api/stripe/+server.ts
name: 'Basic', // DISPLAY NAME
original: 100, // ORIGINAL PRICE
price: 50, // SALE PRICE
included: ['Feature 1', ...], // FEATURES INCLUDED
excluded: ['Feature 2'...], // FEATURES EXCLUDED
highlighted: true // TRUE OR FALSE BASED ON THE CARD YOU WANT TO HIGHLIGHT AS "POPULAR"
},
...
];
...
</script>
For the Stripe checkout function to work, the
id property must be the same as you defined in src/routes/api/stripe/+server.ts. See the Payments section for more details.