🔗

Payment Links

Shareable links for quick payments

Interactive Demo

Payment links allow you to collect payments without a full checkout. Share via WhatsApp, SMS, or email.

Create Payment Link

Generated Link

Payment Link:

https://pay.peeap.com/p/abc123xyz

AI Integration Guide

Copy this prompt to your AI coding assistant to integrate Payment Links.

Prompt for AI Assistant:

I want to add Peeap Payment Links to my app. Here are the details:

## Installation
npm install @peeap/widgets

## Components Available
1. PaymentLinkCreator - Widget to create payment links
2. PaymentLinkButton - Simple button that opens payment modal
3. PaymentPage - Full hosted payment page component

## Basic Usage - Payment Link Creator
import { PaymentLinkCreator } from '@peeap/widgets'

function CreatePaymentLink() {
  return (
    <PaymentLinkCreator
      apiKey="pk_live_YOUR_API_KEY"
      merchantId="YOUR_MERCHANT_ID"
      onLinkCreated={(link) => {
        console.log('Link URL:', link.url)
        // Copy to clipboard, share via WhatsApp, etc.
      }}
    />
  )
}

## Basic Usage - Payment Button
import { PaymentLinkButton } from '@peeap/widgets'

// Add a "Pay Now" button anywhere
<PaymentLinkButton
  apiKey="pk_live_YOUR_API_KEY"
  amount={50.00}
  currency="USD"
  description="Premium Subscription"
  onSuccess={(payment) => console.log('Paid:', payment)}
>
  Pay $50.00
</PaymentLinkButton>

## PaymentLinkCreator Props
- apiKey (required): Your Peeap public API key
- merchantId (required): Your merchant business ID
- defaultAmount: number - Pre-fill amount
- defaultDescription: string - Pre-fill description
- allowCustomAmount: boolean (default: true)
- expiryOptions: number[] - Expiry hour options
- onLinkCreated: (link) => void
- onError: (error) => void

## PaymentLinkButton Props
- apiKey (required): Your Peeap public API key
- amount (required): Payment amount
- currency: string (default: 'USD')
- description: string - Payment description
- metadata: object - Custom data to attach
- onSuccess: (payment) => void
- onError: (error) => void
- children: ReactNode - Button content

Please integrate this into my app with [describe your requirements].

Code Examples

Simple Pay Button

import { PaymentLinkButton } from '@peeap/widgets'

// Add payment button to any product or service
<PaymentLinkButton
  apiKey="pk_live_your_key"
  amount={99.00}
  currency="SLL"
  description="Logo Design Service"
  onSuccess={(payment) => {
    // Unlock content, send confirmation, etc.
    router.push('/thank-you')
  }}
  className="bg-blue-600 text-white px-6 py-3 rounded-lg"
>
  Pay Le 99,000
</PaymentLinkButton>

Payment Link with WhatsApp Sharing

import { PaymentLinkCreator } from '@peeap/widgets'

function InvoiceActions({ invoiceId, amount, customerPhone }) {
  const handleLinkCreated = (link) => {
    // Open WhatsApp with pre-filled message
    const message = encodeURIComponent(
      `Hi! Here's your payment link for invoice #${invoiceId}: ${link.url}`
    )
    window.open(`https://wa.me/${customerPhone}?text=${message}`)
  }

  return (
    <PaymentLinkCreator
      apiKey="pk_live_your_key"
      merchantId="your_merchant_id"
      defaultAmount={amount}
      defaultDescription={`Invoice #${invoiceId}`}
      onLinkCreated={handleLinkCreated}
    />
  )
}

Subscription Payment Button

// Recurring subscription payment
<PaymentLinkButton
  apiKey="pk_live_your_key"
  amount={29.99}
  currency="USD"
  description="Pro Plan - Monthly"
  metadata={{
    plan: 'pro',
    billing: 'monthly',
    userId: user.id
  }}
  recurring={{
    interval: 'month',
    intervalCount: 1
  }}
  onSuccess={async (payment) => {
    await upgradeUserPlan(user.id, 'pro')
  }}
>
  Subscribe - $29.99/month
</PaymentLinkButton>

Common Use Cases

📱

WhatsApp Payments

Generate links and share instantly via WhatsApp for quick mobile payments.

🛍️

Social Selling

Create payment links for products and share on Instagram, Facebook, or Twitter.

💼

Freelancer Deposits

Collect project deposits or milestone payments without full invoicing.

🎁

Tips & Donations

Accept tips, donations, or voluntary payments with custom amount entry.

📋

Invoice Follow-up

Send quick payment links as reminders for unpaid invoices.

🔄

Subscriptions

Set up recurring payment links for membership or subscription services.

Features

No Expiry Option

Links can stay active indefinitely or expire after set time

Custom Amounts

Let customers enter their own amount (for donations)

Multiple Use

Same link can accept multiple payments

Payment Tracking

See all payments made through each link

Mobile Optimized

Payment pages work perfectly on mobile browsers

Multiple Payment Methods

Accept cards, mobile money, and bank transfers