Zapper Code

Render a dynamic Zapper QR Code without any of the UI of the Payment Widget

Functions

constructor(target: string | Element, options: ZapperCodeOptions)

const zapperCode = new zapper.payments.ZapperCode(
"body",
{
merchantId: 17212,
siteId: 15076,
amount: 1.06,
size: 200
}
)

update(options: ZapperCodeOptions)

Updates the existing on-page Zapper Code with options: amount, reference, etc.
...
zapperCode.update({
amount: 20.50
})
...

ZapperCodeOptions

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
size
number
Image size for the Zapper Code in pixels

on(event: string, handler: function)

...
zapperCode.on('payment', ({ status, paidAmount, zapperId, reference }) => {
console.log(`Received payment of ${paidAmount} with reference ${reference}!`)
})
...

event: "payment"

Event that is triggered after a successful or declined payment by the user. The Handler is called with a single PaymentResult parameter:
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 ZapperCodeOptions

Payment Status

StatusId
Description
2
Payment was successful
5
Payment was declined
Other payment statuses are reserved for internal use