@noda-ui/pay-sdk

v1.0.5

Published

9 months ago

## Installation ``` npm i @noda-ui/pay-sdk -S #or yarn add @noda-ui/pay-sdk ```

Downloads

133

0High
0Medium
0Low

max_demidov

v.mikhaylin

sdv_daniil

@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":"[email protected]",
    "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

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

Payload 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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@noda-ui/pay-sdk

Installation

Usage

Usage with TypeScript

BillingAddress interface

Payment interface

Settings interface

Payload interface

Output events

Security

How to obtain the keys?

Payment UX

Payment Result

Payment Result interface

Api usage