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

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>
      <KimaTransactionWidget
        theme={{ colorMode: ColorModeOptions.light }}
        mode={ModeOptions.payment}
        kimaBackendUrl='http://localhost:3001'
        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.