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

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

Payment Status