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.
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}!`)})
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.
Updates the existing on-page widget with options: amount, reference, etc.
...paymentWidget.update({amount: 20.50})...
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 |
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}!`)})...
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 |
StatusId | Description |
2 | Payment was successful |
5 | Payment was declined |
Other payment statuses are reserved for internal use