metal-pay-connect-js

Overview

metal-pay-connect-js is a web SDK designed to help ease the integration of the Metal Pay Connect widget. It provides everything you need to help get you started buying cryptocurrency.

Features

• Easy integration of the Metal Pay Connect widget
• Bundles type declarations to provide TypeScript support

Installation

To integrate metal-pay-connect-js into your project, follow these steps:

Using npm

npm install --save metal-pay-connect-js

Using yarn

yarn add metal-pay-connect-js

Using pnpm

pnpm add metal-pay-connect-js

Prerequisites

• An active Metal Pay Connect account
• Your Metal Pay Connect API key

Usage

Here’s how you can start using metal-pay-connect-js in your project:

JavaScript and TypeScript

import { MetalPayConnect } from 'metal-pay-connect-js'

// Your code ...

const metalPayConnectEl = document.getElementById('metal-pay-connect')

// Initialize the SDK with configuration options
const metalPayConnect = new MetalPayConnect({
  el: metalPayConnectEl,
  environment: 'dev',
  params: {
    apiKey: 'YOUR_API_KEY',
    signature: 'YOUR_SIGNATURE',
    nonce: 'YOUR_NONCE'
  }
})

// Cleanup the SDK
metalPayConnect.destroy()

React

import { MetalPayConnect } from 'metal-pay-connect-js'

// Your code ...

const metalPayConnectEl = useRef()

useEffect(() => {
  // Initialize the SDK with configuration options
  const metalPayConnect = new MetalPayConnect({
    el: metalPayConnectEl.current,
    environment: 'dev',
    params: {
      apiKey: 'YOUR_API_KEY',
      signature: 'YOUR_SIGNATURE',
      nonce: 'YOUR_NONCE'
    }
  })

  return () => {
    // Cleanup the SDK
    metalPayConnect.destroy()
  }
}, [])

Vue.js

import { MetalPayConnect } from 'metal-pay-connect-js'

// Your code ...

const metalPayConnectEl = useTemplateRef('metal-pay-connect')

// Initialize the SDK with configuration options
const metalPayConnect = ref(
  new MetalPayConnect({
    el: metalPayConnectEl.value,
    environment: 'dev',
    params: {
      apiKey: 'YOUR_API_KEY',
      signature: 'YOUR_SIGNATURE',
      nonce: 'YOUR_NONCE'
    }
  })
)

onUnmounted(() => {
  // Cleanup the SDK
  metalPayConnect.value.destroy()
})

API Reference

MetalPayConnect

• Constructor: new MetalPayConnect(config: Config)
  • config: configuration object
• Method: update(params: PartialDeep<Params>): void
  • action: updates the config params
  • params: partial config params
• Method: destroy(): void
• Accessor: config: InnerConfig

Config interface

type Environment = 'preview' | 'dev' | 'prod'

interface Params {
  apiKey: string
  signature: string
  nonce: string
  networks?: string[]
  address?: Record<string, string>
}

interface SignatureRequestResponseData {
  signature: string
  nonce: string
}

interface Handlers {
  onSignatureRequest?: () => Promisable<SignatureRequestResponseData>
  onTransactionResponse?: () => Promisable<void>
}

interface Config {
  el?: HTMLElement
  environment?: Environment
  params: Params
  handlers?: Handlers
}

InnerConfig interface

interface InnerConfig extends Config {
  environment: Environment
  version: string
}