Create and Configure Single Payment Widget
This document provides configuration instructions for the Single Payment Widget.
Create
Before configuring the specific fields for the Single Payment Widget, you need to create a widget. If you haven't done this yet, please refer to the Create Widget section for instructions. This section covers the general fields that need to be specified during widget creation.
After completing the generic fields, return to this page to configure the Single Payment specific fields detailed below.
Configure
Payee Account Details
To set up a payment widget, you need to specify a payee account that will receive the funds. The following details are required:
| Name | Description | Requirement |
|---|---|---|
| Display Name | Can differ from the actual bank account name to support aliasing. | Optional |
| Account Name | Used when instructing the payment. | Required |
| Account Number | Valid UK bank account number. | Required |
| Sort Code | Valid UK sort code. | Required |
Default Payment Details
Next, specify the default payment details:
| Name | Description | Requirement |
|---|---|---|
| Amount | A default amount that the end user is expected to pay. | Required |
| Reference | A payment reference can be specified, which will be the same for every payment, or it can be left blank to generate a unique reference code for each payment. | Optional |
Overriding Default Values
After a widget is created, its default values can be overridden by passing in parameters during widget instantiation. These parameters include:
| Name | Description |
|---|---|
| payeeId | Once a widget is created, a unique Payee ID is associated with each payee created. You can change which payee the widget will use here. |
| amount | The payment amount in minor units. |
| reference | For example: invoice ID, vendor name. |
| endToEndId | Unique identification assigned by the initiating party to unambiguously identify the transaction. This identification is passed on, unchanged, throughout the entire end-to-end chain. |
Webhooks
The Single Payment Widget can send events via webhooks, allowing you to receive real-time notifications about payment processes. Here are the configurable webhook settings:
| Name | Description | Requirement |
|---|---|---|
| Webhook URI | Specify your endpoint URI to receive webhook events. This is optional but recommended for real-time updates. | Optional |
| Webhook format | Events will be sent in JWT format. This is preselected as the default format to ensure secure and structured data transmission. | Preselected default |
Handling Webhooks
Ensure your webhook endpoint correctly processes JWT payloads:
app.post('/webhook/receipt/moneyhub', (req, res) => {
try {
const payload = jwt.verify(req.body.token, publicKey);
// Process the payload
res.sendStatus(200);
} catch (error) {
console.error('Webhook error:', error);
res.sendStatus(500);
}
});
For more information about webhooks and what events trigger them, see Webhooks .
Previewing the Widget
Once a Widget has been created it can be Previewed via the top menu bar, see Preview
Updated 6 months ago