Checkout (Embedded)

Overview

Checkout is Tsara's hosted payment page. You can embed it into your site or app with minimal setup.

What You Can Do

  • Accept one-time and subscription payments.
  • Works across web and mobile.
  • Supports both fiat and stablecoins.
  • Handles all compliance, receipts, and settlement automatically.

Integration Options

  • Redirect → Send customers to a Tsara-hosted checkout page.
  • Embed → Add a checkout form directly inside your app/site with a JS snippet.

Quick Example (Embedded Checkout)

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Use Checkout</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>

    <div class="container">
        <button class="btn bg-primary pay">Pay</button>
    </div>

  <script>
    function generateTrxId() {
      return 'trx_' + Date.now() + '_' + Math.random().toString(36).substr(2, 6);
    }

    function fundWithTsara(data) {
        var paymentInfo = {
            public_key: "public_key",
            trx_id: data.trx_id,
            amount: data.amount,
            email: data.email,
            currency: "NGN",
            phone: data.phone,
            name: data.name,
            meta: {
                customer_id: data.user_id,
            },
            customer: {
                email: data.email,
                phone: data.phone,
                name: data.name,
            },
            redirect_url: data.redirect_url,
            customizations: {
                title: "Business Name",
                description: "Fund Wallet",
                logo: "",
            }
        };
        tsara.pay(paymentInfo);
    }

    document.querySelector('.pay').addEventListener('click', function (e) {
        fundWithTsara({
            trx_id: generateTrxId(),
            amount: 1000,
            email: '[email protected]',
            phone: '08012345678',
            name: 'Test Client',
            user_id: '123456',
            redirect_url: 'https://yourwebsite.com/redirect'
        });
    });
  </script>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"></script>
  <script src="https://checkout.tsara.ng/inline.js?v=1"></script>
</body>

</html>