Code Monkey home page Code Monkey logo

accept-nano-client's Introduction

accept-nano-client

Build Status Coverage Status npm (scoped) npm bundle size (scoped) GitHub

Payment gateway for NANO

accept-nano-client is a JavaScript package that helps you to communicate with accept-nano for receiving NANO payments easily in your client-side applications.

Installation

via NPM

npm install @accept-nano/client

yarn add @accept-nano/client

ES Modules / TypeScript

import * as acceptNano from '@accept-nano/client'

CommonJS

const acceptNano = require('@accept-nano/client')

Directly in Browser, as a UMD module

After the accept-nano-client script is loaded there will be a global variable called acceptNano, which you can access via window.acceptNano

<html>
  <head>
    ...
    <script src="https://unpkg.com/@accept-nano/client@2"></script>
  </head>
  ...
</html>

Usage

Creating a Payment Session

To be able to initiate the payment process, you must create a new payment session.

// 1- create a new payment session
type CreateSessionParams = {
  apiHost: string // host of your Accept NANO server, without protocol
  pollInterval?: number // time interval (ms) to re-check for verification of a payment (default: 3s)
  debug?: boolean // enables debug mode and prints some useful stuff to console
}

const session = acceptNano.createSession({
  apiHost: 'accept-nano-demo.put.io',
})

// 2- register event listeners to shape-up your logic based on session events.
type PaymentSessionEvents = {
  start: () => void
  end: (error: PaymentError | null, payment: AcceptNanoPayment | null) => void
}

session.on('start', () => {
  myApp.paymentStarted()
})

session.on('end', (error, payment) => {
  if (error) {
    return myApp.paymentFailed({ reason: error.reason })
  }

  return myApp.paymentSucceeded({
    amount: payment.amount,
    state: payment.state,
  })
})

Presenting the Payment Overlay

After creating your session and attaching the event listeners, you can follow one of those options to proceed with the payment flow.

Option 1: Create a Payment Through Client

If you want to create and verify an accept-nano payment in your client application, you can use this option.

After the payment is created, accept-nano-client will automatically proceed to the verification step.

type CreatePaymentParams = {
  amount: string // stringified number
  currency: 'NANO' | 'USD'
  state?: string // payload to share between your client and server, will be embedded into the payment object
}

session.createPayment({
  amount: '1',
  currency: 'USD',
  state: '{userId:7}',
})

Option 2: Verify a Payment Through Client

If you create an accept-nano payment in another context (such as your application's backend), you can use this option to perform the verification in your client application.

type VerifyPaymentParams = {
  token: string // the Accept NANO payment token created in your backend application
}

session.verifyPayment({ token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9' })

Contributing

  • Please open an issue if you have a question or suggestion.
  • Don't create a PR before discussing it first.

Who is using accept-nano-client in production?

Please send a PR to list your site if accept-nano is helping you to receive NANO payments.

Sponsors

Browserstack

Cross-browser compatibility is tested with BrowserStack, thanks for supporting open source โค๏ธ๏ธ

accept-nano-client's People

Contributors

altaywtf avatar batuaksoy avatar bitdesert avatar cenkalti avatar dependabot[bot] avatar muraty avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.