Checkout

Add buy buttons to your pricing cards that create Stripe checkout sessions. Accordero handles the entire flow: currency conversion, checkout creation, and redirect to Stripe - all with automatic localization.

How it works

1. Add data-pf-checkout to any button inside your pricing card
2. When clicked, Accordero creates a Stripe checkout session
3. The session uses the converted price in the visitor's currency
4. Customer is redirected to Stripe to complete payment

Basic checkout button

<Card
  data-pf-base-price="99"
  data-pf-base-currency="usd"
  data-pf-product-id="prod_xxxxxxxxxxxxx"
>
  <CardHeader>
    <CardTitle>Pro Plan</CardTitle>
  </CardHeader>
  <CardContent>
    <p className="text-3xl font-bold" data-pf-price-formatted>
      $99
    </p>
  </CardContent>
  <CardFooter>
    <Button data-pf-checkout className="w-full">
      Buy Now
    </Button>
  </CardFooter>
</Card>

Required attributes

For checkout to work, you need these attributes on your pricing container:

Custom redirect URLs

By default, customers return to the current page after checkout. You can customize this:

<Button
  data-pf-checkout
  data-pf-success-url="https://yoursite.com/thank-you"
  data-pf-cancel-url="https://yoursite.com/pricing"
>
  Buy Now
</Button>

Pass metadata to Stripe

Track additional information in your Stripe dashboard by passing metadata:

<Button
  data-pf-checkout
  data-pf-checkout-meta='{"userId": "user_123", "plan": "pro", "referral": "twitter"}'
>
  Buy Now
</Button>

The metadata will be available in:

• Stripe Dashboard
• Webhook events (checkout.session.completed)
• Your webhook handlers

Associate with existing customers

If you already have a Stripe customer ID, pass it to associate the checkout:

<Button data-pf-checkout data-pf-checkout-customer="cus_xxxxxxxxxxxxx">
  Buy Now
</Button>

Subscriptions

For recurring billing, add the data-pf-recurring attribute to your pricing container:

<Card
  data-pf-base-price="99"
  data-pf-base-currency="usd"
  data-pf-product-id="prod_xxxxxxxxxxxxx"
  data-pf-recurring
>
  <CardHeader>
    <CardTitle>Pro Plan</CardTitle>
  </CardHeader>
  <CardContent>
    <p className="text-3xl font-bold" data-pf-price-formatted>
      $99
    </p>
    <p className="text-sm text-muted-foreground">per month</p>
  </CardContent>
  <CardFooter>
    <Button data-pf-checkout className="w-full">
      Subscribe
    </Button>
  </CardFooter>
</Card>

Complete example

Here's a complete pricing card with all features:

<Card
  data-pf-base-price="99"
  data-pf-base-currency="usd"
  data-pf-product-id="prod_xxxxxxxxxxxxx"
  data-pf-recurring
  className="max-w-sm"
>
  <CardHeader>
    <CardTitle>Pro Plan</CardTitle>
    <CardDescription>Everything you need to scale</CardDescription>
  </CardHeader>
  <CardContent>
    <p className="text-4xl font-bold text-primary" data-pf-price-formatted>
      $99
    </p>
    <p className="text-sm text-muted-foreground">per month</p>
  </CardContent>
  <CardFooter>
    <Button
      data-pf-checkout
      data-pf-success-url="https://yoursite.com/welcome"
      data-pf-checkout-meta='{"tier": "pro", "billing": "monthly"}'
      className="w-full"
    >
      Subscribe
    </Button>
  </CardFooter>
</Card>

Next steps