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