# @noda-ui/pay > noda ui, card payments Latest version **1.1.29** (published 2023-06-08) · 0 weekly downloads ## Install ```sh npm install @noda-ui/pay pnpm add @noda-ui/pay yarn add @noda-ui/pay bun add @noda-ui/pay ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.29 | | Published | 2023-06-08 | | First published | 2022-01-14 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 634.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | noda_dolgikh, max_demidov, v.mikhaylin, sdv_daniil | | Keywords | noda, cards, payments, js, web | ## Links - npm: https://www.npmjs.com/package/@noda-ui/pay - npm.io page: https://npm.io/package/@noda-ui/pay ## Alternatives - [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads - [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads - [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads - [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads - [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads ## Recent versions - 1.1.29 (latest) — 2023-06-08 - 1.1.27 — 2023-04-26 - 1.1.26-beta — 2023-04-20 - 1.1.20-gamma — 2023-03-21 - 1.1.20-beta — 2023-03-21 - 1.1.13-alpfa — 2023-03-21 - 1.1.20 — 2023-01-18 - 1.1.19 — 2023-01-17 - 1.1.18 — 2023-01-17 - 1.1.17 — 2023-01-13 - 1.1.16 — 2023-01-11 - 1.1.15 — 2023-01-11 - 1.1.14 — 2023-01-11 - 1.1.13 — 2023-01-09 - 1.1.12 — 2022-12-13 - … 64 more at https://npm.io/package/@noda-ui/pay/versions ## README # @noda-ui/pay ## Installation ``` npm i @noda-ui/pay #or yarn add @noda-ui/pay ``` ## Usage ```html ``` ```javascript 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 ```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 | | 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 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](https://ui.noda.live/hub) to get your production keys ### Payment UX Please switch the "Purchase scenarios" at [ui.noda.live/pay-sandbox](https://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): ```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}} ### Alternative Payment Result Please see the detailed description at [docs.noda.live](https://docs.noda.live/docs/noda-pay-api/22989088c5b85-creating-a-payment#payment-result-handling). ### 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](https://webpack.js.org/configuration/resolve/#resolvefallback) 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](https://www.npmjs.com/package/@microsoft/signalr) package in your project. --- _Source: https://npm.io/package/@noda-ui/pay · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._