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:

JavaScript

npm install --save @mojito-inc/mixers

Install using Yarn:

JavaScript

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:

   JavaScript

   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,
          apiKey: Configuration.PAYMENT_API_KEY,
        },
        description: "Custom Description"
      },
      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 Stripe for payments, so the supported countries depend on which payment method is going to be used, as described here:

stripe.com

Parameters:

UserInfo

CheckoutOptions

walletDetails

UI Configuration

Global Config

Payment config

Cost breakdown config

Payment Confirmation

Delivery Config

MojitoDeliveryType

MojitoCheckoutDeliveryType

Wallet connect config

Wallet Options

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.