Naughty Pterodactyl Maid


    0.2.30-demo • Public • Published



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


      <noda-web-pay id="payment"></noda-web-pay>
    import "@noda-ui/pay/lib/index.js";
    import "@noda-ui/pay/lib/styles/styles.css";
    const payment$ = document.querySelector("#payment");
    payment$.payment = {
      env: "DEVELOPMENT", // or "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$.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, 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

    Output events

    Event Type Description
    close void triggered by clicking on the closing icon
    paid Payment Result triggered after receiving a payment response


    Remember to use valid api token for apiKey field.

    How to obtain the keys?

    Sandbox: use 24d0034-5a83-47d5-afa0-cca47298c516 for DEVELOPMENT 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 to get your production keys

    Payment UX

    Please switch the "Purchase scenarios" at 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
    Awaiting confirmation
    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


    npm i @noda-ui/pay

    DownloadsWeekly Downloads






    Unpacked Size

    479 kB

    Total Files


    Last publish


    • max_demidov
    • v.mikhaylin
    • sdv_daniil