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/abc123xyzAI 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