Switch billing provider from Stripe to Lemon Squeezy

Changed the billing provider in the `.env.development` file from Stripe to Lemon Squeezy. This requires adaptations at many levels: at the web app to load Lemon Squeezy's script in the checkout process, at the billing gateway to handle Lemon Squeezy calls, and in the database to reflect the current billing provider. The checkout process is now done using Lemon Squeezy Sessions and its billing strategy was adjusted accordingly. Billing-related components and services were also updated.
This commit is contained in:
giancarlo
2024-04-02 14:09:25 +08:00
parent d92d224250
commit 4576c8c14a
11 changed files with 106 additions and 92 deletions

View File

@@ -3,8 +3,6 @@ import { BadgeCheck } from 'lucide-react';
import { BillingConfig, getProductPlanPairByVariantId } from '@kit/billing';
import { Database } from '@kit/supabase/database';
import {
Card,
CardContent,
@@ -91,48 +89,44 @@ export function CurrentSubscriptionCard({
</div>
</If>
<div>
<If condition={subscription.status === 'trialing'}>
<div className="flex flex-col space-y-0.5">
<span className="font-semibold">
<Trans i18nKey="billing:trialEndsOn" />
</span>
<div className={'text-muted-foreground'}>
<span>
{subscription.trial_ends_at
? formatDate(subscription.trial_ends_at, 'P')
: ''}
</span>
</div>
</div>
</If>
<If condition={subscription.cancel_at_period_end}>
<div className="flex flex-col space-y-0.5">
<span className="font-semibold">
<Trans i18nKey="billing:cancelSubscriptionDate" />
</span>
<div className={'text-muted-foreground'}>
<span>
{formatDate(subscription.period_ends_at ?? '', 'P')}
</span>
</div>
</div>
</If>
<If condition={subscription.status === 'trialing'}>
<div className="flex flex-col space-y-0.5">
<span className="font-semibold">
<Trans i18nKey="billing:detailsLabel" />
<Trans i18nKey="billing:trialEndsOn" />
</span>
<LineItemDetails
lineItems={productLineItems}
currency={subscription.currency}
selectedInterval={firstLineItem.interval}
/>
<div className={'text-muted-foreground'}>
<span>
{subscription.trial_ends_at
? formatDate(subscription.trial_ends_at, 'P')
: ''}
</span>
</div>
</div>
</If>
<If condition={subscription.cancel_at_period_end}>
<div className="flex flex-col space-y-0.5">
<span className="font-semibold">
<Trans i18nKey="billing:cancelSubscriptionDate" />
</span>
<div className={'text-muted-foreground'}>
<span>{formatDate(subscription.period_ends_at ?? '', 'P')}</span>
</div>
</div>
</If>
<div className="flex flex-col space-y-0.5">
<span className="font-semibold">
<Trans i18nKey="billing:detailsLabel" />
</span>
<LineItemDetails
lineItems={productLineItems}
currency={subscription.currency}
selectedInterval={firstLineItem.interval}
/>
</div>
</CardContent>
</Card>

View File

@@ -40,7 +40,15 @@ function loadCheckoutComponent(provider: BillingProvider) {
}
case 'lemon-squeezy': {
throw new Error('Lemon Squeezy is not yet supported');
return buildLazyComponent(() => {
return import('@kit/lemon-squeezy/components').then(
({ LemonSqueezyEmbeddedCheckout }) => {
return {
default: LemonSqueezyEmbeddedCheckout,
};
},
);
});
}
case 'paddle': {