Zapper Integrations
Search…
Zapper Integrations
Introduction
API
Authentication
Invoices
Payments
Refunds
Payment Notifications
HTTP Webhook
Web
Javascript SDK
Library Installation
Payment Widget
Zapper Code
Ecommerce Plugins
Apps
App Links
Powered By
GitBook
Payment Widget
Predefined payment view that includes the Zapper Code, merchant name, amount to be paid and real-time payment status.
Payment widget (desktop mode)
Payment widget (mobile)
Upon a completed payment,
successful
or
declined
, a payment status reflects in the payment widget. A retry is available if a payment is declined.
A Zapper Code (QR code) displays containing payment and merchant information, specifically the amount and order identifier. i.e. the
reference
.
Basic Usage
const
paymentWidget
=
new
zapper
.
payments
.
PaymentWidget
(
"body"
,
{
merchantId
:
17212
,
siteId
:
15076
,
amount
:
9.99
,
reference
:
"REF-001"
}
)
​
paymentWidget
.
on
(
'payment'
,
({
status
,
paidAmount
,
zapperId
,
reference
})
=>
{
console
.
log
(
`
Received payment of
${
paidAmount
}
with reference
${
reference
}
!
`
)
})
Functions
constructor(target: string | Element, options: PaymentWidgetOptions)
The
PaymentWidget
constructor takes in an HTML element or CSS selector and a set of options to render a payment view on the web page.
update(options: PaymentWidgetOptions)
Updates the existing on-page widget with options: amount, reference, etc.
...
paymentWidget
.
update
({
amount
:
20.50
})
...
PaymentWidgetOptions
Field
Type
Description
merchantId
number
Zapper Merchant ID
siteId
number
Zapper Site ID
amount
number
Amount to be paid
reference
string
Merchant or application reference. This field can be used to account the payment on the merchant integration, e.g. Order number
on(event: string, handler: function)
event: "payment"
Event that is triggered after a successful or declined payment by the user. The Handler is called with a single PaymentResult parameter:
...
paymentWidget
.
on
(
'payment'
,
(
{
status
,
paidAmount
,
zapperId
,
reference
}
)
=>
{
console
.
log
(
`
Received payment of
${
paidAmount
}
with reference
${
reference
}
!
`
)
})
...
PaymentResult
Field
Type
Description
status
number
Status of the payment.
paidAmount
number
Amount paid by the user.
zapperId
string
Zapper's unique identifier for the transaction.
reference
string
Merchant or application reference, specified in the PaymentWidgetOptions
Payment Status
StatusId
Description
2
Payment was successful
5
Payment was declined
Other payment statuses are reserved for internal use
Previous
Library Installation
Next
Zapper Code
Last modified
2yr ago
Copy link
On this page
Basic Usage
Functions
constructor(target: string | Element, options: PaymentWidgetOptions)
update(options: PaymentWidgetOptions)
on(event: string, handler: function)