npm package: @noda-ui/pay-sdk
Description: ## Installation ``` npm i @noda-ui/pay-sdk -S #or yarn add @noda-ui/pay-sdk ```
Latest version: 1.0.5

# @noda-ui/pay-sdk

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


## Usage
```html
<body>
    <div>{page-contentt}</div>
    <div id="__noda-elements-frame__"></div>
</body>
```

```javascript
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
```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

```javascript
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](https://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](https://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_** <br /> **_Processing_** <br /> **_Failed_** <br /> **_Awaiting confirmation_** <br /> **_Done_** <br /> **_Settled_** <br />**_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):

```javascript
{
  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](https://noda.stoplight.io/docs/noda-pay-api).