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
7	Payment is processing
2	Payment was successful
5	Payment was declined

Other payment statuses are reserved for internal use