Developers

You can easily add a payment plugin to accept payments that will be sent directly to your wallet.

1. Load the SDK

<script src="https://pay.canonic.xyz/dist/canonic-pay.min.js" type="module"></script>
            
<link rel="stylesheet" href="https://pay.canonic.xyz/dist/canonic-pay.min.css" />

2. Add the container div

• Add an empty div with an id of canonicPay where you want the payment information to be shown.
• Add the data attributes to setup your button:
• paymail (Required): The Canonic ID paymail of the wallet where the payment will be sent to and associated with. Your ID paymail can be found in your Wallet Settings.
Do NOT use your "pretty" paymail, because it can be changed at any time and therefore potentially breaking your payment implementation. Use your ID paymail by following the instructions above.
• session-id (Required): A unique string used to associate a successful purchase with.
• email (Required): The customer's email that will be used for a payment receipt.
• product (Required): A product ID or description of the product you are selling.
• callback-url (Required): The URL that will be hit after a successful payment. Read the Handle Payment section below for more information.
• price: The USD price of the product you are selling. This is what determines when the callback-url is called. Omitting this will cause the callback-url to be called immediately after every user payment.
• outputs: Include any outputs that you want the payment to go to along with the percentage cut (all output cuts must total 1, so make sure to include the original paymail if you still want a payment to go that wallet).
• heading-text: Text to replace the default heading text.
• subheading-text: Text to replace the default subheading text.
• hide-price: Boolean flag to hide the price UI.
• theme: Set the theme to 'dark' or 'light' to match the theme of your website. Defaults to 'dark'.
• redirect-url: URL to redirect to after a successful payment. Note: the final redirect URL will automatically include a 'sessionId' URL param with the provided 'session-id'.
• tickers: Comma-separated string of the supported tickers/cryptocurrencies that your payment plugin will support. Defaults to `BTC,BCH`. Available tickers are BTC, BCH, BSV, and SIGNET.

<div
    id="canonicPay"
    data-paymail="[email protected]"
    data-session-id="123"
    data-price="50"
    data-product="Blue t-shirt"
    data-email="[email protected]"
    data-callback-url="https://pay.canonic.xyz/api/test"
    data-heading-text="Pay Now"
    data-subheading-text="Scan the QR code below to make your payment."
    data-hide-price="false"
    data-theme="dark"
    data-tickers="BTC,BCH"
    data-redirect-url="https://example.com/thank-you"
    data-outputs="[{"paymail": "canonic@canonic.xyz", "cut": 0.5, "currency": "USD"},{"paymail": "other@canonic.xyz", "cut": 0.5, "currency": "USD"}}]"
>
</div>

3. Handle payment

interface Payload {
  sessionId: string; // Unique ID that was originally given to canonic-pay in html
  date: number; // Payment date, in Unix time
  pricePaid: number; // The USD amount user has paid on invoice
  priceAsked: number; // Invoice USD amount
  paymentNeeded: boolean; // Helper flag to check if 'pricePaid' is less than 'priceAsked' and more payment is required
  payments: [
    {
      time: number; // Unix date of payment
      txid: string; // 64 character bitcoin txid hex string
      vout: number; // Bitcoin output of payment
      address: string; // Bitcoin address paid
      satoshis: number; // Number of satoshis the user sent
      price: number; // The USD amount paid
      ticker: string; // Either BTC, BCH or BSV
    }
  ]
  prices: {
    BTC: number;
    BCH: number;
    BSV: number;
  }
}