@credenza-web3/transaction-ui v3.0.7

Credenza Transaction UI (DEPRECATED)

----------------------------------------------------------------------------------------------

Transaction UI is now a part of @credenza-web3/passport. This package should no longer be used

----------------------------------------------------------------------------------------------

Magic

Credenza passport requires magic if magicLink(email) login is required

<script src="https://auth.magic.link/sdk" type="application/javascript"></script>

Ethers.js

Ethers.js is required

<script src="https://cdn.ethers.io/lib/ethers-5.6.umd.min.js" type="application/javascript"></script>

Stripe

Credenza uses stripe for payments.

<script src="https://js.stripe.com/v3/"></script>

Credenza passport

Credenza Passport is required to complete payments.

<script src="https://unpkg.com/@credenza-web3/transaction-ui/dist/transaction-ui.umd.js"></script>
or
<script src="https://cdn.jsdelivr.net/npm/@credenza-web3/transaction-ui/dist/transaction-ui.umd.js"></script>

Installation

with npm

npm install @credenza-web3/transaction-ui

with yarn

yarn add @credenza-web3/transaction-ui

with pnpm

pnpm install @credenza-web3/transaction-ui

or include a script tag

<script src="https://unpkg.com/@credenza-web3/transaction-ui/dist/transaction-ui.umd.js"></script>

Usage

import {Passport} from '@credenza-web3/passport'
import {TransactionUI} from '@credenza-web3/transaction-ui'

or

const Passport = window.CredenzaPassport
const TransactionUI = window.CredenzaTUI

const passport = new Passport() // See passport docs for more...
await passport.init()

const transactionUI = new window.CredenzaTUI({
  passport,
  config: {
    title: string,
    subtitle: string,
    imageUrl: string, // https://website.com/image.png
    payments?: {
      credenzaStoredValue?: {
        disabled?: boolean //default - false
      },
      stripe?: {
        disabled?: boolean // default - false
      }
    },
    // This will help credenza to get a price and figure out a token to be transferred
    token?: {
      address: string, // contract address
      tokenId?: string, // token id if exists
      amount?: number  // amount of tokens if exists
      typeId?: number // if buying membership and typeId exists. Should be either tokenId or typeId
    },
    email?: {
      templateId?: string // For custom email template usage
    }
  },
})

Apple Pay

You must verify your domain. https://support.stripe.com/questions/enable-apple-pay-on-your-stripe-account Enabled by default on all supported devices and registered domains.

Google Pay

Is enabled on all supported devices by default

Transaction UI static properties

TransactionUI.chains (enum) Supported chains

Methods

Close TransactionUI

await transactionUI.close()

Events

Triggers when transaction completed

transactionUI.onTransaction((data) => {
  console.log('Payment data:', data)
})

Triggers when an error occurs

transactionUI.onError((errorData) => {
  console.log('Error', errorData)
})