このインテグレーションにより、クレジットカードでさまざまなネットワークのトークンを購入できます。

インテグレーション

オンランプ機能を組み込むには、以下の手順に従ってください。

1

Web SDKで接続する

はじめにガイドを完了してください。

2

1. @0xsequence/checkout ライブラリをインストールする

npm install @0xsequence/checkout

# or

pnpm install @0xsequence/checkout

# or

yarn add @0xsequence/checkout
3

2. アプリ内で `SequenceConnect` プロバイダーの下に `SequenceCheckoutProvider` を配置する:

import { SequenceCheckoutProvider } from '@0xsequence/checkout'

import { SequenceConnect } from '@0xsequence/connect'

import { config } from './config'



const App = () => {

  return (

    <SequenceConnect config={config}>

      <SequenceCheckoutProvider>

        <Page />

      </SequenceCheckoutProvider>

    </SequenceConnect>

  )

}
4

3. クレジットカードで資金を追加する

triggerAddFunds 関数を呼び出してモーダルを表示します

  import { useAddFundsModal } from '@0xsequence/checkout'

  import { useAccount } from 'wagmi'



  const MyComponent = () => {

    const { address: recipientAddress } = useAccount()

    const { triggerAddFunds: toggleAddFunds } = useAddFundsModal()



    const onClick = () => {

      toggleAddFunds({

        walletAddress: recipientAddress,

      })

    }



    return (

      <button onClick={onClick}>Add Funds</button>

    )

  }

おめでとうございます!Web SDKを使ってウォレットに資金を追加する方法を学びました。

構成の概要

toggleAddFundsのパラメータで利用できる設定カスタマイズオプションは以下の通りです。

interface AddFundsSettings {

  walletAddress: string | Hex // Address of the wallet where funds will be added

  fiatAmount?: string // Specify the amount in fiat to add

  fiatCurrency?: string // Specify the fiat currency (e.g., USD, EUR)

  defaultFiatAmount?: string // Default amount in fiat to add

  defaultCryptoCurrency?: string // Default cryptocurrency to use (e.g., ETH, BTC)

  cryptoCurrencyList?: string // List of cryptocurrencies available for selection. Example: "USDT,BTC,USDC"

  networks?: string // Specify network(s) to use for the transaction. Example: "mainnet,ethereum"

  onClose?: () => void // Callback function to execute when the modal is closed

}