Checkouts

Checkouts are how your customers pay for your products on mavi pay. Every purchase flows through a checkout session, which collects payment information, processes the charge via Stripe, and delivers benefits upon success.

mavi pay provides three ways to accept payments: hosted checkout pages, shareable checkout links, and an embeddable checkout widget.

Hosted Checkout

When a customer clicks a buy button or visits a checkout link, they are taken to a hosted checkout page on pay.mavifinans.sh. This page handles:

• Product display (name, description, price)
• Email collection
• Payment form (powered by Stripe Elements)
• Coupon/discount code entry (if enabled)
• Order confirmation and receipt

The hosted checkout is fully managed by mavi pay. No code is required -- just create a product and share the link.

Checkout Links

Checkout links are unique URLs tied to a specific product. You can generate them from the dashboard and share them anywhere -- email campaigns, social media posts, landing pages, or printed QR codes.

Each link directs the customer to the hosted checkout page for that product. See the Checkout Links documentation for details on creation, tracking, and customisation.

Embeddable Checkout Widget

For a seamless experience on your own website, mavi pay provides an embeddable checkout widget. The widget renders an inline checkout form directly on your page, so customers never leave your site.

Installation

npm install @mavi-pay/sdk

Basic Usage

import { MaviPayCheckout } from '@mavi-pay/sdk'

export default function BuyPage() {
  return (
    <MaviPayCheckout
      productId="prod_xxxxxxxx"
      onSuccess={(result) => {
        console.log('Payment succeeded:', result.orderId)
      }}
    />
  )
}

Configuration Options

Customisation

You can customise the checkout experience from the dashboard under Settings > Checkout:

• Brand colour -- Applied to buttons and accents on the hosted checkout page.
• Logo -- Displayed at the top of the checkout page.
• Success message -- Custom text shown after a successful purchase.
• Success redirect URL -- Redirect customers to your own confirmation page after payment.
• Terms of service URL -- Shown as a link the customer must acknowledge before paying.

Checkout Flow

1. Customer visits the checkout link or interacts with the embedded widget.
2. Customer enters their email and payment details.
3. Stripe processes the payment.
4. mavi pay records the order and activates any attached benefits.
5. Customer receives a confirmation email with receipt and benefit access details.
6. You receive the revenue minus the 2% mavi pay fee and Stripe processing fees.

Webhooks

mavi pay fires webhook events at each stage of the checkout lifecycle. You can configure webhook endpoints in the dashboard under Settings > Webhooks.

Key events:

• checkout.created -- A checkout session was initiated.
• checkout.completed -- Payment succeeded and the order is confirmed.
• checkout.failed -- Payment failed or was declined.

Next Steps

• Create checkout links to share products instantly.
• Attach benefits to deliver value after purchase.
• Integrate with Next.js for a custom checkout flow.