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