@noda-ui/pay-sdk NPM

@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
email	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}}