@noda-ui/pay
Installation
npm i @noda-ui/pay
#or
yarn add @noda-ui/pay
Usage
<body>
<noda-web-pay id="payment"></noda-web-pay>
</body>import "@noda-ui/pay/lib/index.js";
import "@noda-ui/pay/lib/styles/styles.css";
const payment$ = document.querySelector("#payment");
payment$.payment = {
env: "DEVELOPMENT", // "STAGING", "PRODUCTION"
apiKey: "{{api key}}",
paymentId: "{{payment id}}",
amount: 0.5,
currency: "gbp", // Payment currency in ISO_4217 format.
customerId: "{{cutomer id}}",
returnUrl: "{{return url}}",
webhookUrl: "{{webhook url}}",
shopId: "{{shop id}}",
description: "{{payment description}}",
country: "{{country}}",
email: "{{email}}",
iin: 00000000,
additionalData: {}
};
payment$.settings = {
isPhoneNumberFieldVisible: false,
isCloseButtonVisible: true,
isNodaInfoShown: true
}
payment$.addEventListener("close", (event) => {
console.log("clicked to close icon: ", e); // Close icon click event
});
payment$.addEventListener("paid", (event) => {
console.log("event after pay: ", event.detail); // Payment result event
});Usage with TypeScript
declare module "@noda-ui/pay";Payment interface
| Field | Type | Description |
|---|---|---|
| env *required | string | App environments, for develop and production. Currently accepted: {PRODUCTION, STAGING, DEVELOPMENT} |
| apiKey *required | string | Merchant's api key, issued by Noda |
| paymentId *required | string | Order identificator in merchant's system |
| amount *required | number | Payment amount |
| currency *required | string | Payment currency in ISO_4217 format. |
| customerId | string | End-customer Id in merchant's system. That parameter can be used to find a best button appearance for the particular customer. |
| webhookUrl | string | URL where the Noda will send hooks about the payment status changes |
| returnUrl *required | string | After the payment completed, customer will be redirected into this Url |
| shopId | string | Merchant's shop identificator, issued by Noda. If you have more than one online shop, this parameter helps to analyse the payments afterwards |
| description | string | Short order description for the customer |
| country *required | string | ISO 3166-1 alpha-2 country code |
| string | End-customer e-mail. That parameter can be used to find a best button appearance for the particular customer. | |
| iin | number | IIN (first six digits) of the end-customers credit card used earlier at the merchant's checkout. This parameter helps to define end-customer Bank and propose to pay with that bank. |
| additionalData | object | Additional payment information in key:value format |
Settings interface
| Field | Type | Description |
|---|---|---|
| isPhoneNumberFieldVisible | boolean | Whether to show the phone input field when creating a map |
| isCloseButtonVisible | boolean | Whether to show a window close button in the top right corner of the screen |
| isNodaInfoShown | boolean | Whether to show information about Noda |
Output events
| Event | Type | Description |
|---|---|---|
| close | void | triggered by clicking on the closing icon |
| paid | Payment Result | triggered after receiving a payment response |
Security
Remember to use valid api token for apiKey field.
How to obtain the keys?
Sandbox: use 24d0034-5a83-47d5-afa0-cca47298c516 for non PRODUCTION environment. Live: use 808e683e-9383-4717-8148-02e74b63b1f8 for testing purposes.
Please consider, that this is a real payment routing which is set up to charity organisations complete the onboarding at ui.noda.live/hub to get your production keys
Payment UX
Please switch the "Purchase scenarios" at ui.noda.live/pay-sandbox in order to overview the different behavior.
If you've used some additional parameters (for example - IP, IIN, CustomerID and so on) previosly, for the same purchase, we highly recommend pass the same additional parameters, in order to keep the consistent UX for the customers.
Package Payment Result
| Parameter | Type | Descripton |
|---|---|---|
| id | string | payment id |
| url | string | {{set}} |
| qrCode | string | {{set}} |
| threeDsData | Three Ds Data | three ds data object |
| status | string |
New Processing Failed Awaiting confirmation Done Settled Incomplete Settlement |
Package Payment Result interface
You can receive payment result with the following options:
-
url {{set}} description (example):
-
qrCode {{set}} description (example):
-
threeDsData {{set}} description (example):
{
paReq: {{set}},
acsUrl: {{set}},
termUrl: {{set}},
md: {{set}}
}-
status
- New - {{set}}
- Processing - {{set}}
- Failed - {{set}}
- Awaiting confirmation - {{set}}
- Done - {{set}}
- Settled - {{set}}
- Incomplete Settlement - {{set}}
Alternative Payment Result
Please see the detailed description at docs.noda.live.
Webpack 5 Issues
During the integration process, you might face multiple issues with webpack 5. This issue is caused due to the fact that some packages have certain dependencies, which are not present within the browser environment by webpack 5. Hence, you require certain node polyfills to be added to your project, while overriding the configurations to enable their usage. When that is done, your project should run without any issues.
An alternative solution to the problem is to install @microsoft/signalr package in your project.