@noda-ui/pay NPM

@noda-ui/pay

Installation

npm i @noda-ui/pay
#or
yarn add @noda-ui/pay

Usage

<body>
  <noda-web-pay id="payment"></noda-web-pay>
</body>

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

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 to get your production keys

Payment UX

Please switch the "Purchase scenarios" at 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):

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

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 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 package in your project.

noda cards payments js web

@everything-registry/sub-chunk-656 @zalastax/nolb-_noda @infinitebrahmanuniverse/nolb-_noda

11 months ago

1 year ago

1 year ago

1 year ago