Transactions UI

📘

Important to know:

• Make sure you have read the previous guide: Transactions.
• SPI can be used with any JavaScript front-end framework, including React, Vue.js, Angular, and jQuery.
• All requirements in this guide are indicated by requirement IDs (e.g. ‘Req. TUI1’).

Make a transaction

Most transactions follow this workflow: the transaction is started, then it either completes successfully or it fails.

The requirements are as follows.

• Req. TUI1 — there must be a separate button for making each type of transaction (a purchase button, a refund button, etc.). When clicked, start the transaction immediately; don't display additional options or screens. This makes your POS quick and easy to use.
• Req. TUI2 — there is a message that shows that the transaction is in progress.
• Req. TUI3 — there is a message that shows whether the transaction succeeded or failed.

Other features can be implemented to improve the UI. For instance, you can display live updates of all the messages from the 'TransactionUpdateMessage' event.

Cancel a transaction

This is where the merchant starts a transaction but then cancels it before it completes.

The requirements are as follows.

• Req. TUI4 — there is a button to cancel the transaction that calls spi.CancelTransaction(...)

Signature required transaction

This is where the transaction requires a signature from the customer, so the UI presents the merchant with the option to accept or decline the customer’s signature.

The requirements are as follows.

• Req. TUI5 — there is a button to accept the customer's signature that calls spi.AcceptSignature(true)
• Req. TUI6 — there is a button to reject the customer's signature that calls spi.AcceptSignature(false)

Transaction recovery

This is where the transaction needs to be manually recovered, so the UI presents the merchant with the option to confirm that the transaction was successful or failed.

The requirements of the UI are as follows.

• Req. TUI7 — the UI allows the merchant to confirm that the transaction was successful.
• Req. TUI8 — the UI allows the merchant to confirm that the transaction failed.