> ## Documentation Index
> Fetch the complete documentation index at: https://docs.niobi.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Payment Links

> Collect payments with zero front-end code using Niobi's hosted checkout. Learn the two ways to create a payment link, when to use each, and how the customer experience works end to end.

## Overview

Niobi gives you two ways to collect payments: integrate directly with the [Unified Collections API](/collecting-payments/basics) for full control over your own checkout UI, or generate a **Payment Link**, a Niobi-hosted checkout page you can share with a customer without writing any front-end code.

This page covers Payment Links, how to create one, and how the customer completes payment on it.

<img src="https://mintcdn.com/niobi/bEHho4ScQmdmC_cX/images/niobi-hosted-checkout-page.png?fit=max&auto=format&n=bEHho4ScQmdmC_cX&q=85&s=04781105d848cea0bfae81cceb9c0e92" alt="Niobi Hosted Checkout Interface" width="1290" height="752" data-path="images/niobi-hosted-checkout-page.png" />

### Why Payment Links?

* **Zero front-end engineering:** Niobi hosts the entire checkout page, so you don't need to build payment forms, input masks, or error-handling UI.
* **Multi-currency & country support:** Payer details, country selection, and currency are handled on the page itself.
* **Flexible distribution:** Share the link over WhatsApp, SMS, invoices, email, or a website or app checkout button, or embed it as a QR code for a customer to scan in person.
* **Instant reconciliation:** When the customer completes payment, Niobi credits your merchant wallet and dispatches the same webhook callback (`payment_step: 2`) used across every other collection method.

***

## Two Ways to Create a Payment Link

A payment link can be created in one of two ways, depending on who is creating it and why:

```mermaid theme={null}
%%{init: {'themeVariables': {'fontSize': '23px', 'actorBorder': '#0D9373', 'actorLineColor': '#0D9373', 'signalColor': '#0D9373', 'noteBorderColor': '#0D9373'}, 'sequence': {'width': 220, 'height': 95, 'actorMargin': 80, 'messageMargin': 60, 'boxMargin': 18, 'noteMargin': 18}}}%%
sequenceDiagram
    autonumber
    participant You as You (Dashboard or API)
    participant Niobi as Niobi
    participant Customer as Customer

    alt Via Dashboard (no-code)
        You->>Niobi: Payments -> Payment Links -> Create
    else Via API (programmatic)
        You->>Niobi: POST /api/v3/payment-link-api/create
    end
    Niobi-->>You: Checkout URL generated
    You->>Customer: Share the link (WhatsApp, SMS, email, invoice, website, or QR code)
    Customer->>Niobi: Opens the hosted checkout page
    Customer->>Niobi: Selects payment method and completes payment
    Niobi->>You: Webhook callback (payment_step: 2)
    Note over You: Reconcile and credit the merchant wallet
```

<CardGroup cols={2}>
  <Card title="Dashboard (No-Code)" icon="browser">
    Built for a person creating a link by hand: sales, support, or finance staff sending a one-off link to a specific customer, invoice, or order, with no engineering work involved.
  </Card>

  <Card title="API (Programmatic)" icon="code">
    Built for your own systems creating links automatically: for example, generating a unique link every time an order is placed on your platform, tied to your own order reference, with no manual step in between.
  </Card>
</CardGroup>

Neither method replaces the other. Which one you use depends on whether a **person** is triggering link creation, or a **system event** in your own backend is.

### Method 1: Via the Dashboard

<Steps>
  <Step title="Log in to the Niobi Dashboard">
    Navigate to **Payments → Payment Links**.
  </Step>

  <Step title="Click Create Payment Link">
    Enter the item name, currency, and amount. The amount can be fixed, or left for the customer to enter themselves.
  </Step>

  <Step title="Copy the generated checkout URL">
    The link is ready to share immediately, no further setup required.
  </Step>
</Steps>

### Method 2: Via the API

<Steps>
  <Step title="Call the Create Payment Link API">
    Send a signed request to the [Create Payment Link API](/api-reference/payment-link/create-a-payment-link) (`POST /api/v3/payment-link-api/create`) from your backend.
  </Step>

  <Step title="Optionally pre-fill the payer's details">
    Pass `first_name`, `last_name`, `email`, and `phone` at creation time so the checkout page loads with the customer's details already filled in, they only need to pick a payment method and confirm.
  </Step>

  <Step title="Retrieve and manage links programmatically">
    Use the [Payment Link List API](/api-reference/payment-link/payment-link-list) (`GET /api/payment-link-api/list`) to view, filter, or retrieve links you've created.
  </Step>
</Steps>

***

## How the Customer Completes Payment

Regardless of how the link was created, the customer experience and the settlement flow are identical:

<Steps>
  <Step title="Customer opens the link">
    Whether the customer clicked the link directly or scanned it as a QR code, they land on the same clean, branded Niobi checkout page shown above.
  </Step>

  <Step title="Customer confirms details and pays">
    Their name, email, country, and currency are pre-filled automatically if you supplied them at creation. The customer then picks their preferred local payment channel (Mobile Money, Bank Transfer, or Card) and completes authorization.
  </Step>

  <Step title="Webhook callback">
    Once the transaction settles, Niobi sends a terminal callback (`payment_step: 2`) to your configured webhook URL, the same shape you'd receive for a direct API collection. See [Collection Callbacks](/collecting-payments/callbacks) for the full payload and how to reconcile it.
  </Step>
</Steps>

***

## Next Steps

<div className="next-steps-flow">
  <a href="/collecting-payments/methods" className="next-step-card">
    <div className="next-step-badge">API Path</div>
    <h3>Collection Methods</h3>
    <p>Integrating directly instead? See every supported payment channel across Mobile Money, Bank Transfers, and Redirects.</p>
  </a>

  <div className="next-step-arrow">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  </div>

  <a href="/collecting-payments/callbacks" className="next-step-card">
    <div className="next-step-badge">Next</div>
    <h3>Collection Callbacks</h3>
    <p>Handle terminal payment\_step: 2 callbacks, verify signatures, and reconcile outcomes.</p>
  </a>
</div>