nanobyte-checkout

Library for creating nanobyte checkout buttons and links.

Example Button

Installation

From NPM

npm install @nanobyte-crypto/checkout

On web

<script
  src="https://unpkg.com/@nanobyte-crypto/checkout@latest"
  type="text/javascript"
></script>
<script type="text/javascript">
  Nanobyte.button.init(...);
  Nanobyte.button.setPaymentDetails(...);
</script>

Usage

Register as merchant

To begin you need to register as a merchant at nanobyte to generate yourself an API key.

Setting up the nanobyte checkout button

The nanobyte checkout button is created on your front end to communicate with the nanobyte server and browser extension to enable frictionless payments

import { button } from "@nanobyte-crypto/checkout";

// call this once, when the page has loaded:
// (this will add a click handler to the button, and subscribe to some websocket events)
button.init(
  // this is the API key from the merchant dashboard
  merchantApiKey,
  (data) => {
    // this callback will be called when a payment has been completed
    console.log(data);
  }
);

button.setRequiredFields(
  // You can set any required fields for a payment as an array of strings
  ["email", "address", "country", "zipcode", "city"],
  (data) => {
    // This is called if the user tries to make a payment without all of the required fields present
    console.log(data);
  }
);


// set the payment details either on click:
button.setInterceptClick(
  async () => {

    // get data from your backend:

    return {
      // Here you can set the payment details dynamically and the button will update. You can switch out fiatPrice and currency for amount if you are want payment in nano. Amount needs to be specified in RAW.
      //amount: "10000000"
      fiatPrice: "1.00",
      currency: "USD",
      label: "Some Purchase", // Label is what they are paying for
      message: "Thank you for your purchase!",
      //You can add any data that your payment flow uses
      orderNumber: "order#1234",
      //You should include the required fields that you set
      email: "[email protected]",
      address: "123 Oak Street",
      zipcode: "32826",
    };
  },
);

// or at any other time:
button.setPaymentDetails({
  // Here you can set the payment details dynamically and the button will update. You can switch out fiatPrice and currency for amount if you are want payment in nano. Amount needs to be specified in RAW.
  //amount: "10000000"
  fiatPrice: "1.00",
  currency: "USD",
  label: "Some Purchase", // Label is what they are paying for
  message: "Thank you for your purchase!",
  //You can add any data that your payment flow uses
  orderNumber: "order#1234",
  //You should include the required fields that you set
  email: "[email protected]",
  address: "123 Oak Street",
  zipcode: "32826",
});

Adding the nanobyte checkout button

You will need to add the button to the DOM

// include this into the DOM where you want the checkout button to be:
<button id="nanobytepay">
  <img
    width="200"
    src="https://imagedelivery.net/uA65-M4gr037oB0C4RNdvw/cd775aca-5679-4368-a1bf-b59d45311f00/public"
    alt="pay with nanobyte"
  />
</button>

Check payment status

You will want to verify from your server that the payment has been successful before releasing the goods/services. You can call the below API with your API Key to do that.

Example Usage:

// curl:
// curl --request GET 'https://api.nanobytepay.com/payments/:paymentId' --header 'x-api-key: api_key_here'

// axios (js):
import axios from "axios";

const paymentId = "6356c64c03ff47e05376b94e";
const apiKey = "api_key_here";
const response = await axios.get(
  `https://api.nanobytepay.com/payments/${paymentId}`,
  {
    headers: {
      "x-api-key": apiKey,
    },
  }
);
// reponse == { error: "missing_field", details: "paymentId is missing" }
// reponse == { error: "missing_header", details: "x-api-key is missing" }
// reponse == { error: "merchant_api_not_valid", details: "merchant_not_found" }
// reponse == { error: "payment_not_found" }
// reponse == { error: "timed_out" }
// reponse == { status: "confirmed", metadata }