Comment on page
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.
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}!`)
})
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. Updates the existing on-page widget with options: amount, reference, etc.
...
paymentWidget.update({
amount: 20.50
})
...
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 |
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}!`)
})
...
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 |
StatusId | Description |
2 | Payment was successful |
5 | Payment was declined |
Other payment statuses are reserved for internal use
Last modified 3mo ago