Payment Mode

mode = ModeOptions.payment

Payment mode allows your users to pay for a product or service using stablecoins from any chain supported by Kima.

The payment details are passed into the Widget via the transactionOption prop (required)
The user can choose to pay from any chain and token supported by Kima. The funds will be transferred to the wallet and chain specified in the transactionOption prop
The title and subtile can be customized using the titleOption and paymentTitleOption props

⚠️ On testnet, transactionOption.currency must be USDK as this is the only currency supported on testnet. You will need to switch the currency based on whether your app is currently using testnet or mainnet.

import React from "react";

import {
  KimaTransactionWidget,
  KimaProvider,
  ModeOptions,
  SupportNetworks,
  ColorModeOptions,
} from "@kimafinance/kima-transaction-widget";
import "@kimafinance/kima-transaction-widget/dist/index.css";

const App = () => {
  return (
    <KimaProvider kimaBackendUrl="http://localhost:3001">
      <KimaTransactionWidget
        theme={{ colorMode: ColorModeOptions.light }}
        mode={ModeOptions.payment}
        titleOption={{
          initialTitle: "New Purchase",
        }}
        paymentTitleOption={{
          title: "Buy MyFirst NFT",
          style: {
            fontSize: "1.2em",
            fontWeight: "500",
            color: "#DDDDDD",
          },
        }}
        transactionOption={{
          targetChain: SupportNetworks.SOLANA,
          targetAddress: "5tvyUUqPMWVGaVsRXHoQWqGw6h9uifM45BHCTQgzwSdr",
          amount: 12.34,
          currency: "USDK",
        }}
      />
    </KimaProvider>
  );
};

export default App;

You should see a page that looks like this:

The payment (target) wallet and chain will show on the next step when the user approves the transfer amount.

Once the user sends the approval and submits the transaction, the user can see the transaction status in the next step.

PreviousNextJS NextBridge Mode

Last updated 23 days ago

import React from "react"; import { KimaTransactionWidget, KimaProvider, ModeOptions, SupportNetworks, ColorModeOptions, } from "@kimafinance/kima-transaction-widget"; import "@kimafinance/kima-transaction-widget/dist/index.css"; const App = () => { return ( <KimaProvider kimaBackendUrl="http://localhost:3001"> <KimaTransactionWidget theme={{ colorMode: ColorModeOptions.light }} mode={ModeOptions.payment} titleOption={{ initialTitle: "New Purchase", }} paymentTitleOption={{ title: "Buy MyFirst NFT", style: { fontSize: "1.2em", fontWeight: "500", color: "#DDDDDD", }, }} transactionOption={{ targetChain: SupportNetworks.SOLANA, targetAddress: "5tvyUUqPMWVGaVsRXHoQWqGw6h9uifM45BHCTQgzwSdr", amount: 12.34, currency: "USDK", }} /> </KimaProvider> ); }; export default App;