Ctrl K
Pay With Pocket
Pay with Pocket enables seamless online payments via Pocket tags. Integrate via SDK or direct API.
How To Use (SDK)
Webhooks notify of events in real-time. Configure your webhook URL in your dashboard.
Add script: <script src="https://pocket-checkout-sdk.netlify.app/checkout-sdk.js"></script>
1
Initialize:
(JavaScript)
const payWithPocket = new Pocket({ key: 'MERCHANT_PUBLIC_KEY', amount: 500000 // 5000 //Other options...});payWithPocket.show();Options:
| Name | Type | Required | Description |
|---|---|---|---|
| key | string | Yes | Public key. |
| amount | number | Yes | In kobo. |
| wallet_id | string | No | Target wallet. |
| reference | string | Yes | Your reference. |
| product_name | string | No | Product name. |
| meta | object | No | Custom data. |
| business_id | string | No | Business ID. |
| narration | string | No | Description. |
| view | string | No | "popup" (default) or "redirect". |
| redirect_url | string | No | Success redirect. |
| onSuccess | function | No | Success callback. |
| onClose | function | No | Close callback. |
| onPending | function | No | Pending callback. |
| onOpen | function | No | Open callback. |
| onError | function | No | Error callback. |
Checkout Process Flow
1
Initialize SDK.
2
User selects payment method (default: Pocket).
3
Enter Pocket tag.
4
QR code (desktop) or app open (mobile).
5
Confirm payment.
6
Success modal
For bank transfer flow, see video link in original.
Additional Information
Immediate show: new Pocket({...}).show()
Trigger element: new Pocket({...}).trigger('#button')
Custom element: PVB_BASE{pay-with-pocket: .../*pay-with-pocket*/}_URL
Update status: payWithPocket.updatePaymentStatus('success')