@ngx-web3/ui-payment-btn NPM

Web Component Crypto Payment Button for Web3 Applications

👀 Overview

Simple HTML UI Crypto Payment Button Component that allows your to provide 100% decentralized USD transaction transactions solution with Bitcoin (BTC) Ethereum (ETH), Binance (BNB) or Solana (SOL) token. It includes real-time currency conversion from USD to selected token using Coingecko API. It also includes an optionnal UI parametter to display QRCode and the transaction status. This HTML component is a great way to provide a crypto payment button to your application or website without centralized payment provider.

⚙️ Install

Run npm install @ngx-web3/ui-payment-btn

📝 Usage

Angular >=13

  import { Component } from '@angular/core';
  import '@ngx-web3/ui-payment-btn';
  
  @Component({
    selector: 'app-root',
    template: `
      <p>Price: $ {{amount}} USD</p>
      <ngxweb3-payment-btn
          to="0x..."
          symbol="BNB"
          display-error="true"
          [attr.amount]="amount"></ngxweb3-payment-btn>
    `
  })
  export class AppComponent {
    public amount: number = 100;
  }

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

// angular.json

    "assets": [
      "src/favicon.ico",
      "src/assets",
      {
        "input": "node_modules/@ngx-web3/ui-payment-btn/assets/payment-btn",
        "glob": "**/*",
        "output": "assets/payment-btn"
      }
    ],
    "allowedCommonJsDependencies": [
      "@solana/buffer-layout",
      "bl/BufferList.js",
      "blob-to-it",
      "borsh",
      "bs58",
      "buffer",
      "hamt-sharding",
      "hash.js",
      "it-parallel-batch",
      "jayson/lib/client/browser",
      "p-retry",
      "parse-link-header",
      "rabin-wasm",
      "rpc-websockets",
      "secp256k1",
      "tweetnacl",
      "varint"
    ]

Polyfill

// allow node crypto library to be used in browser
if (window && (window as any).global === undefined) {
  console.log('window.global is undefined');
  (window as any).global = window;
  (window as any).global.process = {
    env: { DEBUG: undefined }
  } as any;
}

Component Options

Attribut	Description	Type	Default	Required
chainid	Network channel id. Refere to `Network & ChainId` documentation section to select correct value	String	mainnet	false
to	Wallet destination adrress	String	-	true
symbol	Token symbol	String	-	true
amount	USD Amount to send	Number	-	true
display-qrcode	Display QR Code	Boolean	true	false
display-error	Display error message	Boolean	false	false