Mixers Kit

How to Install and Setup the Mojito-mixers SDK module.

Overview

The "mojito-mixers" SDK is a library that provides abstractions and functionalities to simplify interaction with purchasing NFTs using payment methods such as card payments, on-chain payments, and wire transfers in a TypeScript/JavaScript environment. It offers a comprehensive solution for integrating the mixers feature into your application with a pre-designed user interface.

This guide will help you better understand how to use and integrate the mixers SDK into your application.

Prerequisites

Before proceeding with the installation steps, ensure that you have the following prerequisites in place:

  1. Node.js and NPM/Yarn: Make sure you have Node.js installed on your machine, and the Node.js version should be 18 or higher, along with either NPM (Node Package Manager) or Yarn. You can download and install Node.js from the official website here.
  2. Authentication Provider: To obtain the necessary token for authentication, you need to have an authentication provider set up. This can be a JWT (JSON Web Token) or an Auth0 token, which will be passed as the "token" property in the configuration.
  3. API URL: Determine the appropriate API URL to use based on your environment.

If you are using create-react-app

Add below packages as dependencies in your package.json

{
  ...
  "dependencies": {
    ...
    "url": "latest",
    "http": "npm:http-browserify",
    "https": "npm:https-browserify",
    "zlib": "npm:browserify-zlib",
    "http-browserify": "latest",
    "https-browserify": "latest",
    "browserify-zlib": "latest",
    "assert": "^2.0.0",
    "stream": "^0.0.2"
  }
}

To ignore the sourcemap warnings, create a .env file with the following in your root directory:

GENERATE_SOURCEMAP=false

Installation and Setup

Step 1: Install the Mixers Module

Install the Mojito Mixers SDK module on your project by using one of the following methods below:

Install using NPM:

npm install --save @mojito-inc/mixers

Install using Yarn:

yarn add @mojito-inc/mixers

Note:

make sure you install the following dependencies:

yarn add @mui/[email protected] @mui/[email protected] @apollo/client graphql

Step 2: Theme

You can use the theme Options or theme props to pass a custom theme or theme options object:

theme Options (preferred) will merge Mojito's default theme with your custom one

If none is provided, the default Mojito theme will be used.

const DefaultThemes: ThemeConfiguration = {
      font: {
        primary: 'Sneak',
        secondary: 'Sneak',
      },
      color: {
        primary: '#6663FD',
        secondary: '#FFFFFF',
        background: '#FAFAFC',
        errorBackground: '#FEE3E5',
        text: '#000000',
        cardBackground: '#FFFFFF',
        checkout: {
          continueButtonBackground: '#6663FD',
          continueButtonTextColor: '#FFFFFF',
        },
        placeholder: '#BABEC5',
        costBreakdown: {
          applyButtonBackground: '#DADAE9',
          applyButtonTextColor: '#FFFFFF',
        },
      },
    };

Note: that using MUI's ThemeProvider from your project won't work as expected and you will end up seeing Mojito's default theme:

Step 3: Import the MojitoCheckout and Pass the Required Parameters

To use the MojitoCheckout from the @mojito-inc/mixers module and pass the required parameters, follow these steps:

  1. Import the MojitoCheckout component from @mojito-inc/mixers in your JavaScript file:

    import { MojitoCheckout } from '@mojitoinc/mixers';
    
  2. Place the MojitoCheckout component in your code and provide the necessary parameters:

import { MojitoCheckout } from '@mojito-inc/mixers';

const CreditCardInstructions = () => (
  <div>
  	Your own instructions
	</div>
);

const WireTransferInstructions = () => (
  <div>
  	Your own instructions
	</div>
);

const MetamaskInstructions = () => (
  <div>
  	Your own instructions
	</div>
);
const theme = {
  font: {
    primary: 'Sneak',
    secondary: 'Sneak',
  },
  color: {
    primary: '#6663FD',
    secondary: '#FFFFFF',
    background: '#FAFAFC',
    errorBackground: '#FEE3E5',
    text: '#000000',
    cardBackground: '#FFFFFF',
    checkout: {
      continueButtonBackground: '#6663FD',
      continueButtonTextColor: '#FFFFFF',
      disableButtonBackground: '#DADAE9',
    },
    placeholder: '#BABEC5',
    costBreakdown: {
      applyButtonBackground: '#DADAE9',
      applyButtonTextColor: '#FFFFFF',
    },
  },
};

  const getAuthenticationToken = useCallback(async () => {
    const token = await getIdTokenClaims();
    return token?.__raw || '';
  }, [getIdTokenClaims]);

  const handleClickGoToMarketPlace = useCallback(async () => {
  }, []);

  const onEvent = (e:string)=>{
    console.log("EVENT",e)
  }

  
  <MojitoCheckout
    uri={ mojitoApiURL }
    userInfo: {
      email: email,
    },
    checkoutOptions={{
      orgId: <ORG_ID>,
      lotId: <LOT_ID>,
      quantity: 1,
      paymentId: <PAYMENT_ID>,
      vertexEnabled: true,
      collectionItemId: <ITEM_ID>,
      discountCode: <DISCOUNT_CODE>,
			invoiceId: <INVOICE_ID>
    }}
    theme={ theme }
    events={
      onEvent:onEvent,
      onCatch:onCatch,
      onError:onError,
    }
    uiConfiguration: {
      payment: {
        creditCard: true,
        walletConnect: true,
        wire: false,
        coinbase: false
      },
      costBreakdown: {
        showDiscountCode: true,
      },
      paymentConfirmation: {
        onGoTo: () => handleClickGoToMarketPlace(),
        creditCardInstructions: (
          <CreditCardInstructions />
        ),
        wireTransferInstructions: (
          <WireTransferInstructions />
        ),
        metamaskInstructions: (
          <MetamaskInstructions />
        ),
      },
      global: {
        logoSrc: PaceGalleryLogo?.src,
        loaderImageSrc: LoaderPaceGallery?.src,
        errorImageSrc: ErrorImage?.src,
      },
      delivery: {
        creditCard: {
          enableMultiSig: false,
          checkoutApiKey: Configuration.CHECKOUT_API_KEY,
        },
      },
      walletConnect: {
        orgId: Configuration.ORGANIZATION_ID,
        walletConnectProjectId: Configuration.PROJECT_ID,
        paperClientId: Configuration.PAPER_CLIENT_ID,
				isWeb2Login: false
				skipSignature: false,
				theme: ConnectWalletTheme,
      },
			walletOptions: {
        enableEmail: true,
        enableMetamask: true,
        enableWalletConnect: true,
      },
    }
		success={false}
    show={ show }
    token={ bearerToken }
		debug={false} />

Step 4: Create success page and error page:

Create Success page

Create a page, and the path should be "{Your app domain}/payments/success". You should pass the prop "success" as true in the component.

This page is designed to display a success message after a successful credit card payment.

const checkoutProps: PUICheckoutProps = {
  ...otherProps
};

<MojitoCheckout {...checkoutProps} success={true} />

Create Error page

Create a page, and the path should be "{Your app domain}/payments/failure".

This page is designed to display a failure message after a payment failed from credit card payment. you can create your own failure design.

Card payment method

We use Checkout for payments, so the supported countries depend on which payment method is going to be used, as described here:

checkout.com

Parameters:

PramsTypeRequiredDescription
uristringAPI url
userInfoobjectUserInfo
showbooleanto open checkout modal
checkoutOptionsobjectCheckoutOptions
themeobjectTheme
eventsobjectEvents, you will get the logs
onClickConnectWalletfunctionYour own connect wallet logic
walletDetailsobjectpass connected wallet details if you add own connect wallet logic else no need to pass
uiConfigurationobjectUIConfiguration
successbooleanto show success popup
tokenstringpass bearer token
debugbooleanif true you will see the logs

UserInfo

PramsTypeDescription
emailstringTo show email in UI

CheckoutOptions

PramsTypeDescription
orgIdstringYour organization id
lotIdstringLot id you will get from mint portal
quantitynumberquantity of the token
paymentIdstringpaymentId for the success popup
collectionItemIdstringPass item Id to get the details of an item
discountCodestringcoupon code
errorURLstringerror url
successURLstringsuccess url
vertexEnabledbooleanto calculate tax
invoiceIdstringpass invoiceId for auction case

walletDetails

PramsTypeDescription
walletobjectPass connected Wallet details if you add your own wallet logic
saveWalletDatafunctionIn the function callback you can get the connected wallet details
onDisconnectnumberTo handle your own disconnect function
onClickRefetchBalancestringTo handle your own re-fetch function

UI Configuration

PramsTypeDescription
globalobjectGlobal config
billingobjectBilling config
paymentobjectPayment Config
costBreakdownobjectConst breakdown UI config
paymentConfirmationobjectPayment confirmation UI config
deliveryobjectDelivery UI config
walletConnectobjectConnect Wallet SDK config
walletOptionsobjectConnect wallet options

Global Config

PramsTypeDescription
logoSrcstringLogo url
loaderImageSrcstringloader url
errorImageSrcstringerror url

Payment config

PramsTypeDescription
walletConnectbooleanTo enable wallet connect
wirebooleanTo enable wire
creditCardbooleanTo enable credit card
coinbasebooleanTo enable coinbase

Cost breakdown config

TypeDescription
showDiscountCodebooleanTo hide or show discount UI
showProductionDisclaimerbooleanTo hide or show production disclaimer UI
productDisclaimerTextstringCustom product disclaimer text

Payment Confirmation

TypeDescription
wireTransferInstructionsJSX ElementCustom component for wire transfer instructions
creditCardInstructionsJSX ElementCustom component for credit card instructions
metamaskInstructionsJSX ElementCustom metamask instructions
onGoTofunctionFunction to handle back to marketplace button

Delivery Config

PramsTypeDescription
walletConnectbooleanTo enable wallet connect
wirebooleanTo enable wire
creditCardbooleanTo enable credit card
coinbasebooleanTo enable coinbase

Wallet connect config

PramsTypeDescription
orgIdbooleanOrganization id
walletConnectProjectIdbooleanWallet connect project id
paperClientIdbooleanEmail wallet paper client id
contentbooleanTo customise the connect wallet modal contents
isWeb2LoginbooleanConnect wallet by web2 login
skipSignaturebooleanConnect wallet by skipping signature process
themeThemeCustomise the wallet connect theme

Wallet Options

TypeDescription
enableEmailbooleanTo hide or show Email wallet button
enableMetamaskbooleanTo hide or show metamask button
enableWalletConnectbooleanTo hide or show wallet connect button

Debug mode

If you quickly click the logo in the top-right corner 16 times, the debug mode will be enabled (toggled, actually), even in production and regardless of the initial value you passed for the debug prop.

The debug mode will, among logging/displaying some other less relevant pieces of data

<MojitoCheckout debug={true} />

📘

Note:

For complete documentation of the SDK offerings, see the NPM document.