Checkout Button and Checkout Panel

If your goal is to add a Taria Pay payment entry point to your own checkout page, start by choosing between three tiers:

Option	Best for	What happens on the page
Hosted Checkout	You don't want to maintain payment UI, or want the lowest-risk launch	Redirect to checkoutUrl / checkout.tariapay.com/...
Checkout Button	You want a payment button on your own page	The button opens Hosted Checkout when clicked
Checkout Panel	You want buyers to complete wallet payments without leaving your page	Wallet connection, chain/currency selection, and the payment panel are embedded in the page

Most merchants start with Hosted Checkout or the Checkout Button. The Checkout Panel is an advanced integration, suited to teams with frontend engineering capacity who are willing to test wallet compatibility and browser behavior.

Checkout Button

The Checkout Button is the lightest in-page integration. It does not bring wallet connection, RainbowKit, wagmi, or any on-chain transaction logic into your site; it simply opens the hosted checkout URL returned by your server when the buyer clicks.

Install

npm install @tariapay/checkout-panel

Import the styles in the entry that renders the button:

import "@tariapay/checkout-panel/styles.css";

Create the payment order on your server

API keys belong on the server only. The frontend should never create payment intents directly.

import { NextResponse } from "next/server";
import { TariaPay } from "@tariapay/sdk";

const tariapay = new TariaPay({
  secretKey: process.env.TARIAPAY_SECRET_KEY!,
});

export async function POST() {
  const paymentIntent = await tariapay.paymentIntents.create({
    orderId: `order_${crypto.randomUUID()}`,
    amount: "49.99",
    currency: "USDC",
    successUrl: "https://merchant.example/success",
    cancelUrl: "https://merchant.example/cancel",
  });

  return NextResponse.json({
    checkoutUrl: paymentIntent.checkoutUrl,
  });
}

Render the button on the frontend

"use client";

import { CheckoutButton } from "@tariapay/checkout-panel/button";
import "@tariapay/checkout-panel/styles.css";

export function TariaPayButton() {
  return (
    <CheckoutButton
      createCheckout={async () => {
        const response = await fetch("/api/tariapay/create-payment", {
          method: "POST",
        });
        if (!response.ok) throw new Error("Failed to create checkout");
        return (await response.json()) as { checkoutUrl: string };
      }}
    >
      Pay with Taria Pay
    </CheckoutButton>
  );
}

If your page already has a checkoutUrl, you can pass it directly:

<CheckoutButton checkoutUrl={checkoutUrl}>Pay with Taria Pay</CheckoutButton>

Checkout Panel

The Checkout Panel embeds wallet connection, chain/currency selection, approval, and the pay button directly in your page. It is the right choice when you specifically want buyers to stay on your site and you can maintain the frontend dependencies and wallet testing that come with it.

Install the advanced dependencies

npm install @tariapay/checkout-panel @rainbow-me/rainbowkit wagmi viem @tanstack/react-query

Return paymentId from your server

return NextResponse.json({
  paymentId: paymentIntent.paymentId,
});

Render the panel on the frontend

"use client";

import { CheckoutPanel } from "@tariapay/checkout-panel";
import "@tariapay/checkout-panel/styles.css";

export function TariaPayCheckoutPanel({ paymentId }: { paymentId: string }) {
  return (
    <CheckoutPanel
      paymentId={paymentId}
      walletConnectProjectId={process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID}
      onSuccess={({ txHash }) => {
        window.location.assign(`/success?tx_hash=${txHash}`);
      }}
    />
  );
}

walletConnectProjectId is not strictly required for browser wallet extensions, but we recommend configuring it if you want a reliable experience for mobile wallets and WalletConnect wallets.

Which one should you choose

• No development capacity, or you just want the fastest launch: use Hosted Checkout / payment links.
• You have your own checkout page but don't want to maintain wallet logic: use the Checkout Button.
• You want buyers to complete wallet payments without leaving your page: use the Checkout Panel.
• You want fully custom wallet and on-chain interactions: build your own frontend flow with the API reference.

Fulfillment rules

Browser callbacks, button redirects, and success pages are for buyer experience only — they are not a substitute for server-side confirmation.

Your system should only ship goods, activate memberships, record revenue, or release inventory after a webhook has passed signature verification. Continue reading: Receive payment results.

Next steps

• Create a payment order: Create a payment order
• Hosted Checkout: Redirect to checkout
• Testing and launch: Testing and go-live preparation