Appendix IV: Decentralized Commerce Configuration

Decentralized commerce is Credenza’s approach to seamlessly embedding blockchain-related commerce into any site, eliminating the need to re-route the user to another site to make a purchase. A detailed white paper is available here:

DocSend - Simple, intelligent, modern content sendingDocSend

Decentralized commerce relies on two key concepts:

• managing state (not logged in, logged in with no ownership, and logged in with ownership) and properly embedding the content within a user interface.

• Providing metadata for sales transaction interface

Determining state requires two calculations, though the second calculation is embedded in the smart contract. The first calculation requires checking passport.isLoggedIn to determine if the user is logged in or not. If not, no need to check ownership. On confirmation of Passport, calling the readRenderData() will automatically populate the return value with the appropriate HTML fragment.

const provider = await passport.getWeb3Provider();

const wallet = await provider.getSigner();

const decomContract = await window.CredenzaContracts.getCredenzaContract({
address: contractDecomAddress, wallet: wallet, name: "DeComContract"})

var statusHTML = await decomContract.readRenderData();
document.getElementById('decomFragment').innerHTML = statusHTML;

This allows for state-driven content for the asset (this works for both NFTs and Memberships that implement the CredenzaSellable interface).

The interface for embedded selling should be available in the host code as well.

async function spawnXUI(configData){
          passport.openUI(window.CredenzaPassport.pages.PAYMENT, {
            title: configData.title
            subtitle: configData.subTitle
             payments: {
               credenzaStoredValue: {
                 disabled: false
               },
             },
             token: {
               address: contractDecomAddress,
               tokenId: configData.tokenId, // change to 1/2/3 depending on the membership type
               amount: 1
             }
      })

Where configData encapsulates the relevant data to populate the transaction interface and manage a sale.