Welcome to the Docs

Add the SDK for native Javascript:

      <script src="https://paycchainmerchant.netlify.app/sdk/paycchainSDK.js"></script>
          

Install the SDK for React:

1
2
3


      npm install paycchain-button

Usage:

      import PaycchainButton from "paycchain-button/dist/components/PaycchainButton";
          

Add Paycchain button to your website:paycchain.button(elementId,data,callbacks)

elementId
data
Items
Item Object
callbacks

Basic Paycchain button(Native Javascript):

        <div id="paycchain-button-container">
        <script>
        paycchain.button(
          "paycchain-button-container",
          {
            amount: 1,
            apiKey: "YOUR_API_KEY",
          }
        );
        </script>
        </div>
          

Basic Paycchain button(React):

          <PaycchainButton
            orderRequest={{
            amount: 1,
            apiKey:
              "YOUR_API_KEY",
          }}
        />
          

elementId

nametypedefaultdescription

elementId

string

required

id of the element that Pacchain button need to be added into,paycchain-button-container in this example.

data

nametypedefaultdescription

amount

number

required

The amount need to be paid by customer, after tax, in USD.

taxAmount

number

0

The amount of tax included in total amount, in USD.

apiKey

string

required

Your API_KEY, can be retrieved from your dashboard in Integration section.

items

Array

[]

Array of Item Object, used purely for display information of items purchased by customer in confirmation, Optional.

Add description for items(Native Javascript):

        <div id="paycchain-button-container">
        <script>
          paycchain.button(
            "paycchain-button-container",
            {
              items: [
                {
                  name: "Iphone-X",
                  price: 0.1,
                  quantity: 1,
                  product_id: "1122357",
                },
                {
                  name: "OnePlus-8",
                  price: 0.1,
                  quantity: 1,
                  product_id: "1122352",
                },
                {
                  name: "Iphone-8",
                  price: 0.4,
                  quantity: 2,
                  product_id: "1122351",
                },
              ],
              amount: 1,
              apiKey:"YOUR_API_KEY"
            }
          );
        </script>
      </div>

Add description for items(React):

          <PaycchainButton
              orderRequest={{
              items: [
                {
                  name: "Iphone-X",
                  price: 0.1,
                  quantity: 1,
                  product_id: "1122357",
                },
                {
                  name: "OnePlus-8",
                  price: 0.1,
                  quantity: 1,
                  product_id: "1122352",
                },
                {
                  name: "Iphone-8",
                  price: 0.4,
                  quantity: 2,
                  product_id: "1122351",
                },
              ],
              amount: 1,
              apiKey:
                "YOUR_API_KEY",
          }}
        />

Items

Items field is an option of your choice to provide. It consists a list of item Object. It's only used for displaying the order details to customer and for you to track which product was purchased by customer. Prices in items will not be used for actual payment amount, they are only used for your own purpose. If not provided, your store name and amount to be paid will be showed in confirmation page.

Item Object

nametypedefaultdescription

name

string

required

Name of your product to be displayed to customer.

price

number

required

Price of the product per unit.

product_id

string

required

product_id for you to later track on which product was being purchased.

quantity

number

required

Quantity of the product being purchased in this order.

Callbacks

onApprove()
onCancel()
onError()

Add callbacks(Native Javascript):

        <div id="paycchain-button-container">
        <script>
          paycchain.button(
            "paycchain-button-container",
            {
              items: [
                {
                  name: "Iphone-X",
                  price: 0.1,
                  quantity: 1,
                  product_id: "1122357",
                },
                {
                  name: "OnePlus-8",
                  price: 0.1,
                  quantity: 1,
                  product_id: "1122352",
                },
                {
                  name: "Iphone-8",
                  price: 0.4,
                  quantity: 2,
                  product_id: "1122351",
                },
              ],
              amount: 1,
              apiKey:"YOUR_API_KEY"
            },
            {
              onApprove: function (data) {
                console.log(data);
                console.log("order approved");
                alert("Filled! blockHash: " + data.result.tx.transactionHash);
              },
              onCancel: function (data) {
                console.log(data);
                console.log("order cancelled");
                alert("order cancelled");
              },
              onError: function (data) {
                console.log(data);
                console.log("order error");
                alert("order failed");
              },
            }
          );
        </script>
      </div>

Add callbacks(React):

          <PaycchainButton
            orderRequest={{
              items: [
                {
                  name: "Iphone-X",
                  price: 0.1,
                  quantity: 1,
                  product_id: "1122357",
                },
                {
                  name: "OnePlus-8",
                  price: 0.1,
                  quantity: 1,
                  product_id: "1122352",
                },
                {
                  name: "Iphone-8",
                  price: 0.4,
                  quantity: 2,
                  product_id: "1122351",
                },
              ],
              amount: 1,
              apiKey:
                "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJtZXJjaGFudCI6IjYyZTg1MjU3YmNkMDM5MDAyMzc1NzEzZCIsImNyZWF0ZWRBdCI6MTY1OTM5MjU5OTAzNywiaWF0IjoxNjU5MzkyOTM0LCJleHAiOjE2OTA5Mjg5MzR9.SgNxmzuejjk3vQjBTp0auo9snfrI2N_lnqo54gCo3gg",
            }}
            handlers={{
              onApprove: function (data) {
                console.log("order approved");
                console.log(data);
                alert("Filled! blockHash: " + data.tx.transactionHash);
              },
              onCancel: function (data) {
                console.log(data);
                console.log("order cancelled");
                alert("order cancelled");
              },
              onError: function (data) {
                console.log(data);
                console.log("order error");
                alert("order failed");
              },
            }}
        />

onApprove(Object)

Promise returning the order details, transaction hash and status in an Object to let your site know the transaction is successful. The method is called after the buyer approves the transaction onpaycchain.com.

onCancel()

When a customer cancels a payment, they typically return to the parent page. You can instead use the onCancel function to show a cancellation page or return to the shopping cart.

onError(Object)

If an error prevents customer checkout, alert the user that an error has occurred with the buttons using the onError callback:

Response Object

nametypedescription

items

array

Name of your product to be displayed to customer.

status

string

Status of payment, can be one of Filled,Failed.

tx

object

Object contains information about the block chain transaction, including a transactionHash you can use to track the transaction on corresponding block chain.