@noda-ui/pay-sdk
Installation
npm i @noda-ui/pay-sdk -S
#or
yarn add @noda-ui/pay-sdk
Usage
<body>
<div>{page-contentt}</div>
<div id="__noda-elements-frame__"></div>
</body>import { NodaPaySDK } from '@noda-ui/pay-sdk';
import '@noda-ui/pay-sdk/lib/noda.css';
const payment = {
"env":"PRODUCTION",
"apiKey":"{merchant-api-key}",
"paymentId":"test1",
"shopId":"{merchant-shop-id}",
"description":"simple card payment",
"returnUrl":"https://ui.noda.live/processing/result",
"webhookUrl":"https://ui.noda.live/processing/result",
"amount":1000.00,
"currency":"eur",
"email":"noda_merchant@gmail.com",
"customerId":"0001",
"BillingAddress":{
"addressLine":"Emilia Plater 15",
"city":"Warsaw",
"state":null,
"country":"AD",
"zip":"02483"
}
};
const settings = {
isPhoneNumberFieldVisible: true
};
const payload = {
payment,
settings
};
const nodaElementID = '__noda-elements-frame__';
/* Use this particular element identifier to connect component styles. */
const nodaPayContainer = document.getElementById(nodaElementID);
NodaPaySDK.init(nodaPayContainer);
NodaPaySDK.update(payload);
NodaPaySDK.reset();
NodaPaySDK.unmount();Usage with TypeScript
declare module '@noda-ui/pay-sdk';BillingAddress interface
| Field | Type | Description |
|---|---|---|
| addressLine *required | string | The first part of your address consisting of the number of your building along with your street name |
| city *required | string | The city detail for the address |
| state | string | The state detail for the address (pass null if the address contains no state) |
| country *required | string | ISO 3166-1 alpha-2 country code |
| zip *required | string | The zip code for the address |
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. Currently accepted: {gbp, eur, usd} |
| customerId *required | 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 |
| 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 information from the merchant in key:value format |
| BillingAddress *required | object | BillingAddress interface |
Settings interface
| Field | Type | Description |
|---|---|---|
| isPhoneNumberFieldVisible | bool | Switch phone number field visibility |
| isEmailFieldVisible | bool | Switch email field visibility |
Payload interface
| Field | Type | Description |
|---|---|---|
| payment | object | Payment interface |
| settings *required | object | Settings interface |
Output events
Window CustomEvent format
new CustomEvent(name, { detail: data });| Event | Type | Description |
|---|---|---|
| close | null | Triggered by clicking on the closing icon |
| paid | Payment Result | Triggered after receiving a payment response |
| viewChange | DOMRect | Triggered after element size changes |
| render | null | Triggered after element renders |
Security
Remember to use valid api token for apiKey field.
How to obtain the keys?
Sandbox: use 24d0034-5a83-47d5-afa0-cca47298c516 for DEVELOPMENT and STAGING 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
Depending on the additional parameters passed, payment UX will be rather country-oriented (with the bank selection at the first step) or bank-oriented (with the particular bank pre-selected). Please switch the "Purchase scenarios" at ui.noda.live/demo 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.
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 |
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}}
Api usage
See the Noda API docs.