@accept-nano/client 中文文档教程

发布于 4年前 浏览 31 更新于 3年前

accept-nano-client

构建状态 覆盖状态 npm(作用域) npm bundle size (scoped) GitHub

NANO

accept-nano-client 是一个 JavaScript 包,可帮助您与 accept-nano 用于在您的客户端应用程序中轻松接收 NANO 付款。

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

accept-nano-client 脚本加载后会有一个名为 acceptNano 的全局变量,您可以通过 window.acceptNano 访问

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

Usage

Creating a 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

。创建会话并附加事件侦听器后,您可以按照其中一个选项继续支付流程。

Option 1: Create a Payment Through Client

如果您想在客户端应用程序中创建并验证 accept-nano 付款,您可以使用此选项。

创建付款后,accept-nano-client 将自动进行验证步骤。

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

如果您在另一个上下文(例如您的应用程序的后端)中创建一个accept-nano 支付,您可以使用此选项在您的客户端应用程序中执行验证。

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?

如果 accept-nano 正在帮助您接收 NANO 付款,请发送 PR 以列出您的站点。

Sponsors

Browserstack

跨浏览器兼容性已通过 BrowserStack 测试,感谢 支持开源 ❤️️

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@beta"></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 ❤️️

更多

友情链接

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文