Add the Kima Transaction Widget to a NextJS App

The procedure for adding the Kima Transaction Widget to a NextJS app is very similar to the React tutorial but you should be aware that you will need to export the widget component as a dynamic component with {ssr: false} so that the application runs the widget on the client side.

Assuming you are building an app from scratch, you can run npx create-next-app <your-app-name> to create a new app.

You can either run:

npm i @kimafinance/kima-transaction-widget

or else copy this package.json to the root of your directory and then simply run npm i.


  "name": "kima-next-minimal",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  "dependencies": {
    "@kimafinance/kima-transaction-widget": "^1.1.98-beta.1",
    "next": "14.1.3",
    "pino-pretty": "^10.3.1",
    "react": "^18",
    "react-dom": "^18",
    "redux": "^5.0.1"
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.3",
    "postcss": "^8",
    "tailwindcss": "^3.3.0"

Within your app directory, create a components directory and inside that create a file named widget.jsx with the following code:


import dynamic from 'next/dynamic';
import React from 'react';

import {
} from '@kimafinance/kima-transaction-widget';
import '@kimafinance/kima-transaction-widget/dist/index.css';

const App = () => {
  return (
      <div style={{ margin: '0 5vw' }}>
        <div className='container'>
              colorMode: ColorModeOptions.light,
              fontSize: FontSizeOptions.medium,

const DynamicApp = dynamic(() => Promise.resolve(App), {
  ssr: false,

export default DynamicApp;

You can now use DynamicApp on whatever page you like. In our example, we will create an index page index.jsx in our pages directory and copy the following code:


import React from 'react';
import DynamicApp from '../components/widget';

const HomePage = () => {
  return <DynamicApp />;

export default HomePage;

When you visit localhost:3000 you will see something like this:

Exactly as with the basic React implementation, you have all the same configuration options.

Configuration options

Note that in the above example, we have configured the title and payment title text, along with the colour. These are just some of the configuration options we describe below.

Configure the widget's look and feel

There are numerous ways to configure the modal for your own preferences and the look and feel of your dApp, which you can do via the following props:


The Theme prop allows you not only to switch between light and dark mode but also to specify your font colour and style and background colour:


    colorMode: ColorModeOptions.light,
    fontSize: FontSizeOptions.medium,
    fontFamily: 'Sans Serif',
    backgroundColorLight: '#CCCCCC', // background color of widget when light mode
    backgroundColorDark: '#FFDDFF' // background color of widget when dark mode


The Title prop enables you to give the widget whatever title you want and can be configured for each step of the widget.

  • Required: false

  • Type: TitleOption:


    initialTitle: 'New Purchase'

Payment Title

The PaymentTitle prop allows you to optionally set the title that appears on the payment screen if you are using the Payment component.

  • Required: false

  • Type: PaymentTitleOption


     'You can now purchase our NFT on Polygon, using funds from other chains.',
   style: {
     fontSize: '1.2em',
     fontWeight: '500'


This is a string, which should be to your own help documentation or FAQ. If unset, the link will default to Kima's help documentation.

  • Required: false

  • Type: string

Configure the widget's functionality

Used to specify the scenario of kima-transaction-widget. Available modes are payment, bridget and status.

Required: true Type: ModeOptions Payment and bridge scenario for the purpose of widget, status mode is for tracking status of specific transaction of kima widget. To use status mode, txId prop should be determined export declare enum ModeOptions { payment = 'payment', bridge = 'bridge', status = 'status' }


Within the payment scenario, you may optionally want to preset the chain and wallet address where the payment should go, as well as the payment amount.

  • Required: false

  • Type: TransactionOption


  targetChain: SupportNetworks.AVALANCHE, // target chain to receive payment
  targetAddress: '0x8222ADB2A2092c3774105a5F558987265D920C09', // target address to receive payment
  amount: 5 // USDK amount to receive payment


This is one of the few props that is mandatory to set, because this specifies Kima's transaction back end URL. In the bridge example above, we have made the assumption that you have the back end server running locally on localhost:3001.

  • Required: true

  • Type: string


Again, this is mandatory because this is used to specify the REST API URL for interactions with the Kima blockchain.

  • Required: true

  • Type: string


This is used to specify the URL of Kima's block explorer in the environment you are using. The widget needs this to provide updates to the status screen, as well as allowing users to link to their transactions to view progress.

It is not mandatory, but it is highly recommended.

Required: false Type: string Default:


Similarly, this is used to show users the progress of their transactions. It is not mandatory and is used only for status mode.

  • Required: false

  • Type: boolean

  • Default: -1


Used to specify whether users should be given the option to transact with fiat currency.

  • Required: false

  • Type: boolean

  • Default: false


This prop is optional and allows you to define whether connection of wallets such as MetaMask should be automatic or manual.

  • Required: false

  • Type: boolean

  • Default: false

Last updated