From ededcb5bf57014d3088514488b084c411f4e1889 Mon Sep 17 00:00:00 2001 From: samuelea Date: Fri, 12 Dec 2025 15:31:43 -0500 Subject: [PATCH 1/2] updated sections related to checkout --- sdk/web/checkout-sdk/getting-started.mdx | 2 +- .../checkout-sdk/hooks/useAddFundsModal.mdx | 116 ---------- .../checkout-sdk/hooks/useCheckoutModal.mdx | 127 ----------- .../hooks/useCreditCardCheckoutModal.mdx | 102 +++++++++ .../hooks/useSelectPaymentModal.mdx | 200 ------------------ sdk/web/checkout-sdk/hooks/useSwapModal.mdx | 130 ------------ sdk/web/hooks-sdk/hooks/useGetSwapQuote.mdx | 152 ------------- sdk/web/hooks-sdk/hooks/useGetSwapRoutes.mdx | 172 --------------- .../wallet-sdk/embedded/guides/checkout.mdx | 156 -------------- .../embedded/guides/on-ramp-and-swap.mdx | 120 ----------- .../wallet-sdk/embedded/guides/on-ramp.mdx | 95 --------- .../embedded/guides/smart-swaps.mdx | 119 ----------- 12 files changed, 103 insertions(+), 1388 deletions(-) delete mode 100644 sdk/web/checkout-sdk/hooks/useAddFundsModal.mdx delete mode 100644 sdk/web/checkout-sdk/hooks/useCheckoutModal.mdx create mode 100644 sdk/web/checkout-sdk/hooks/useCreditCardCheckoutModal.mdx delete mode 100644 sdk/web/checkout-sdk/hooks/useSelectPaymentModal.mdx delete mode 100644 sdk/web/checkout-sdk/hooks/useSwapModal.mdx delete mode 100644 sdk/web/hooks-sdk/hooks/useGetSwapQuote.mdx delete mode 100644 sdk/web/hooks-sdk/hooks/useGetSwapRoutes.mdx delete mode 100644 sdk/web/wallet-sdk/embedded/guides/checkout.mdx delete mode 100644 sdk/web/wallet-sdk/embedded/guides/on-ramp-and-swap.mdx delete mode 100644 sdk/web/wallet-sdk/embedded/guides/on-ramp.mdx delete mode 100644 sdk/web/wallet-sdk/embedded/guides/smart-swaps.mdx diff --git a/sdk/web/checkout-sdk/getting-started.mdx b/sdk/web/checkout-sdk/getting-started.mdx index c3f3b496..636a6135 100644 --- a/sdk/web/checkout-sdk/getting-started.mdx +++ b/sdk/web/checkout-sdk/getting-started.mdx @@ -53,6 +53,6 @@ sidebarTitle: Getting Started - Now you can start using hooks like [useSelectPaymentModal](/sdk/web/checkout-sdk/hooks/useSelectPaymentModal). + Now you can start using hooks like [useCreditCardCheckoutModal](/sdk/web/checkout-sdk/hooks/useCreditCardCheckoutModal). \ No newline at end of file diff --git a/sdk/web/checkout-sdk/hooks/useAddFundsModal.mdx b/sdk/web/checkout-sdk/hooks/useAddFundsModal.mdx deleted file mode 100644 index 46b1feb9..00000000 --- a/sdk/web/checkout-sdk/hooks/useAddFundsModal.mdx +++ /dev/null @@ -1,116 +0,0 @@ ---- - -title: "useAddFundsModal" -description: Hook for managing the add on-ramp modal -sidebarTitle: useAddFundsModal ---- - -## Import - -```tsx -import { useAddFundsModal } from '@0xsequence/checkout' -``` - -## Usage - -```tsx -import { useAddFundsModal } from '@0xsequence/checkout' - -function App() { - const { triggerAddFunds } = useAddFundsModal() - const walletAddress = '0x123...' // User's wallet address - - const handleAddFunds = () => { - triggerAddFunds({ - walletAddress, - defaultFiatAmount: '50', - defaultCryptoCurrency: 'USDC', - onOrderSuccessful: (data) => { - console.log('Order successful!', data) - } - }) - } - - return ( - - ) -} -``` - - - If you receive a 403 error when trying to load Transak's URL, it means your domain needs to be whitelisted. - Please contact us for assistance in resolving this issue. - - -## Return Type: `UseAddFundsModalReturnType` - -The hook returns an object with the following properties: - -```tsx -type UseAddFundsModalReturnType = { - triggerAddFunds: (settings: AddFundsSettings) => void - closeAddFunds: () => void - addFundsSettings: AddFundsSettings | undefined -} -``` - -### Properties - -#### triggerAddFunds - -`(settings: AddFundsSettings) => void` - -Opens the On-ramp modal with the specified parameters. - -**Parameters:** - -| Parameter | Type | Description | -| --------- | ---- | ----------- | -| `walletAddress` | `string \| Hex` | The address of the wallet to receive funds | -| `fiatAmount` | `string` | (Optional) The exact fiat amount to be used | -| `fiatCurrency` | `string` | (Optional) The currency for the fiat amount (e.g., 'USD', 'EUR') | -| `defaultFiatAmount` | `string` | (Optional) The default fiat amount to display | -| `defaultCryptoCurrency` | `string` | (Optional) The default cryptocurrency to purchase | -| `cryptoCurrencyList` | `string` | (Optional) Comma-separated list of available cryptocurrencies | -| `networks` | `string` | (Optional) Comma-separated list of available networks | -| `onClose` | `() => void` | (Optional) Callback when the modal is closed | -| `onOrderCreated` | `(data: any) => void` | (Optional) Callback when a new order is created | -| `onOrderSuccessful` | `(data: any) => void` | (Optional) Callback when order completes successfully | -| `onOrderFailed` | `(data: any) => void` | (Optional) Callback when order fails | - -#### closeAddFunds - -`() => void` - -Closes the On-ramp modal. - -#### addFundsSettings - -`AddFundsSettings | undefined` - -**AddFundsSettings Interface:** - -```tsx -interface AddFundsSettings { - walletAddress: string | Hex - fiatAmount?: string - fiatCurrency?: string - defaultFiatAmount?: string - defaultCryptoCurrency?: string - cryptoCurrencyList?: string - networks?: string - onClose?: () => void - onOrderCreated?: (data: any) => void - onOrderSuccessful?: (data: any) => void - onOrderFailed?: (data: any) => void -} -``` - -The current settings configuration for the On-ramp modal. - -## Notes - -This hook provides methods to control the On-ramp modal powered by Transak, allowing users to buy cryptocurrency with a credit/debit card directly within your application. - diff --git a/sdk/web/checkout-sdk/hooks/useCheckoutModal.mdx b/sdk/web/checkout-sdk/hooks/useCheckoutModal.mdx deleted file mode 100644 index 4c5cab6b..00000000 --- a/sdk/web/checkout-sdk/hooks/useCheckoutModal.mdx +++ /dev/null @@ -1,127 +0,0 @@ ---- - -title: "useCheckoutModal" -description: Hook for managing a simple checkout modal -sidebarTitle: useCheckoutModal ---- - -## Import - -```tsx -import { useCheckoutModal } from '@0xsequence/checkout' -``` - -## Usage - -```tsx -import { useCheckoutModal } from '@0xsequence/checkout' -import { polygon } from 'viem/chains' -import { useAccount } from 'wagmi' - -function Home() { - const { address } = useAccount() - const { triggerCheckout, closeCheckout, settings } = useCheckoutModal() - - const handleCheckout = () => { - // NFT purchase settings - const chainId = polygon.id - const orderbookAddress = '0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712' - const nftQuantity = '1' - const tokenContractAddress = '0xabcdef...' // NFT contract address - const tokenId = '123' // NFT token ID - - triggerCheckout({ - creditCardCheckout: { - chainId, - contractAddress: orderbookAddress, - recipientAddress: address || '', - currencyQuantity: '100000', - currencySymbol: 'USDC', - currencyAddress: '0x3c499c542cef5e3811e1192ce70d8cc03d5c3359', - currencyDecimals: '6', - nftId: tokenId, - nftAddress: tokenContractAddress, - nftQuantity, - approvedSpenderAddress: orderbookAddress, - calldata: "0x...", - onSuccess: (txHash) => console.log('Success!', txHash) - }, - orderSummaryItems: [ - { - chainId: chainId, - contractAddress: orderbookAddress, - quantityRaw: nftQuantity, - tokenId: tokenId, - } - ] - }) - } - - return ( - - ) -} - -export default Home -``` - -### Properties - -#### triggerCheckout - -`(settings: CheckoutSettings) => void` - -Opens the Checkout modal with the specified parameters. - -**Parameters:** - -The `settings` object can include the following properties: - -| Property | Type | Description | -| -------- | ---- | ----------- | -| `creditCardCheckout` | `object` | Settings for credit card checkout flow | -| `orderSummaryItems` | `array` | Items to display in the order summary | - -The `creditCardCheckout` object includes: - -| Parameter | Type | Description | -| --------- | ---- | ----------- | -| `chainId` | `number` | The blockchain network ID | -| `contractAddress` | `string` | The address of the contract to interact with | -| `recipientAddress` | `string` | The address to receive the purchased item | -| `currencyQuantity` | `string` | The quantity of currency to use for payment | -| `currencySymbol` | `string` | The symbol of the currency (e.g., 'USDC') | -| `currencyAddress` | `string` | The address of the currency token contract | -| `currencyDecimals` | `string` | The number of decimals for the currency | -| `nftId` | `string` | The ID of the NFT being purchased | -| `nftAddress` | `string` | The address of the NFT contract | -| `nftQuantity` | `string` | The quantity of NFTs to purchase | -| `approvedSpenderAddress` | `string` | The address allowed to spend tokens | -| `calldata` | `string` | The encoded function call data for the transaction | -| `onSuccess` | `(txHash: string) => void` | Callback when transaction succeeds | - -The `orderSummaryItems` array contains objects with: - -| Parameter | Type | Description | -| --------- | ---- | ----------- | -| `title` | `string` | The title of the item | -| `subtitle` | `string` | The subtitle of the item | -| `imageUrl` | `string` | URL of the item's image | - -#### closeCheckout - -`() => void` - -Closes the Checkout modal. - -#### settings - -`CheckoutSettings | undefined` - -The current settings configuration for the Checkout modal. - -## Notes - -This hook provides methods to control the Checkout modal that allows users to complete purchases using various payment methods. Checkout supports credit card payments and crypto payments for purchasing digital assets. diff --git a/sdk/web/checkout-sdk/hooks/useCreditCardCheckoutModal.mdx b/sdk/web/checkout-sdk/hooks/useCreditCardCheckoutModal.mdx new file mode 100644 index 00000000..7dac8703 --- /dev/null +++ b/sdk/web/checkout-sdk/hooks/useCreditCardCheckoutModal.mdx @@ -0,0 +1,102 @@ +--- + +title: "useCreditCardCheckoutModal" +description: Hook for managing a credit card checout flow +sidebarTitle: useCreditCardCheckoutModal +--- + +## Import + +```tsx +import { useCreditCardCheckoutModal } from '@0xsequence/checkout' +``` + +## Usage + +```tsx +import { useCreditCardCheckoutModal } from '@0xsequence/checkout' +import { polygon } from 'viem/chains' +import { useAccount } from 'wagmi' + +function Home() { + const { address } = useAccount() + const { initiateCreditCardCheckout, closeCreditCardCheckout, settings } = useCheckoutModal() + + const handleCheckout = () => { + // NFT purchase settings + const chainId = polygon.id + const orderbookAddress = '0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712' + const nftQuantity = '1' + const tokenContractAddress = '0xabcdef...' // NFT contract address + const tokenId = '123' // NFT token ID + + initiateCreditCardCheckout({ + chainId, + contractAddress: orderbookAddress, + recipientAddress: address || '', + currencyQuantity: '100000', + currencySymbol: 'USDC', + currencyAddress: '0x3c499c542cef5e3811e1192ce70d8cc03d5c3359', + currencyDecimals: '6', + nftId: tokenId, + nftAddress: tokenContractAddress, + nftQuantity, + approvedSpenderAddress: orderbookAddress, + calldata: "0x...", + onSuccess: (txHash) => console.log('Success!', txHash) + }) + } + + return ( + + ) +} + +export default Home +``` + +### Properties + +#### initiateCreditCardCheckout + +`(settings: CreditCardCheckoutSettings) => void` + +Opens the Credit Card Checkout modal with the specified parameters. + +**Parameters:** + +The `settings` object can include the following properties: + +| Parameter | Type | Description | +| --------- | ---- | ----------- | +| `chainId` | `number` | The blockchain network ID | +| `contractAddress` | `string` | The address of the contract to interact with | +| `recipientAddress` | `string` | The address to receive the purchased item | +| `currencyQuantity` | `string` | The quantity of currency to use for payment | +| `currencySymbol` | `string` | The symbol of the currency (e.g., 'USDC') | +| `currencyAddress` | `string` | The address of the currency token contract | +| `currencyDecimals` | `string` | The number of decimals for the currency | +| `nftId` | `string` | The ID of the NFT being purchased | +| `nftAddress` | `string` | The address of the NFT contract | +| `nftQuantity` | `string` | The quantity of NFTs to purchase | +| `approvedSpenderAddress` | `string` | The address allowed to spend tokens | +| `calldata` | `string` | The encoded function call data for the transaction | +| `onSuccess` | `(txHash: string) => void` | Callback when transaction succeeds | + +#### closeCreditCardCheckout + +`() => void` + +Closes the Credit Card Checkout modal. + +#### settings + +`CreditCardCheckoutSettings | undefined` + +The current settings configuration for the Credit Card Checkout modal. + +## Notes + +This hook provides methods to control the Credit Card Checkout modal that allows users to complete purchases using a credit card. diff --git a/sdk/web/checkout-sdk/hooks/useSelectPaymentModal.mdx b/sdk/web/checkout-sdk/hooks/useSelectPaymentModal.mdx deleted file mode 100644 index 0b663d1f..00000000 --- a/sdk/web/checkout-sdk/hooks/useSelectPaymentModal.mdx +++ /dev/null @@ -1,200 +0,0 @@ ---- - -title: "useSelectPaymentModal" -description: Hook for opening the payment selection modal -sidebarTitle: useSelectPaymentModal ---- - -## Import - -```tsx -import { useSelectPaymentModal } from '@0xsequence/checkout' -``` - -## Usage - -```typescript [abis/mintFunctionAbi.ts] -const mintFunctionAbi = { - type: 'function', - name: 'mint', - inputs: [ - { - name: 'to', - type: 'address', - internalType: 'address' - }, - { - name: 'tokenIds', - type: 'uint256[]', - internalType: 'uint256[]' - }, - { - name: 'amounts', - type: 'uint256[]', - internalType: 'uint256[]' - }, - { - name: 'data', - type: 'bytes', - internalType: 'bytes' - }, - { - name: 'expectedPaymentToken', - type: 'address', - internalType: 'address' - }, - { - name: 'maxTotal', - type: 'uint256', - internalType: 'uint256' - }, - { - name: 'proof', - type: 'bytes32[]', - internalType: 'bytes32[]' - } - ], - outputs: [], - stateMutability: 'payable' - } -``` - -```tsx [components/BuyNFT.tsx] -import { useSelectPaymentModal } from '@0xsequence/checkout' -import { encodeFunctionData, toHex } from 'viem' -import { useAccount } from 'wagmi' -import { mintFunctionAbi } from '../abis/erc1155' - -function BuyNFT() { - const { address } = useAccount() - const { openSelectPaymentModal } = useSelectPaymentModal() - - const handleCheckout = () => { - if (!address) return - - // ERC-20 payment settings - const currencyAddress = '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359' // USDC on Polygon - const salesContractAddress = '0xe65b75eb7c58ffc0bf0e671d64d0e1c6cd0d3e5b' - const collectionAddress = '0xdeb398f41ccd290ee5114df7e498cf04fac916cb' - const price = '20000' // Price in smallest unit (0.02 USDC) - const chainId = 137 // Polygon - - // NFT details - const collectibles = [ - { - tokenId: '1', - quantity: '1' - } - ] - - // Transaction data for the ERC-1155 mint function - const purchaseTransactionData = encodeFunctionData({ - abi: [mintFunctionAbi], - functionName: 'mint', - args: [ - address, - collectibles.map(c => BigInt(c.tokenId)), - collectibles.map(c => BigInt(c.quantity)), - toHex(0), - currencyAddress, - price, - [toHex(0, { size: 32 })] - ] - }) - - // Open the payment selection modal - openSelectPaymentModal({ - collectibles, - chain: chainId, - price, - targetContractAddress: salesContractAddress, - recipientAddress: address, - currencyAddress, - collectionAddress, - creditCardProviders: ['transak'], - onSuccess: (txnHash: string) => { - console.log('success!', txnHash) - }, - onError: (error: Error) => { - console.error(error) - }, - onClose: () => { - console.log('modal closed!') - }, - txData: purchaseTransactionData - }) - } - - return ( - - ) -} - -export default BuyNFT -``` - -Payment Selection Modal - -## Return Type: `UseSelectPaymentModalReturnType` - -The hook returns an object with the following properties: - -```tsx -type UseSelectPaymentModalReturnType = { - openSelectPaymentModal: (settings: SelectPaymentSettings) => void - closeSelectPaymentModal: () => void - selectPaymentSettings: SelectPaymentSettings | undefined -} -``` - -### Properties - -#### openSelectPaymentModal - -`(settings: SelectPaymentSettings) => void` - -Function to open the Payment Selection modal with the specified settings. - -**Parameters:** - -The `settings` object can include the following properties: - -| Parameter | Type | Description | -| --------- | ---- | ----------- | -| `collectibles` | `Array<{tokenId: string, quantity: string}>` | Array of collectibles to purchase | -| `chain` | `number` | Blockchain network ID | -| `price` | `string` | Price in smallest unit of the currency | -| `targetContractAddress` | `string` | Address of the contract to interact with | -| `recipientAddress` | `string` | Address to receive the purchased items | -| `currencyAddress` | `string` | Address of the currency token contract | -| `collectionAddress` | `string` | Address of the NFT collection contract | -| `creditCardProviders` | `string[]` | List of supported credit card providers (e.g., 'transak') | -| `copyrightText` | `string` | Copyright text to display in the modal | -| `onSuccess` | `(txnHash: string) => void` | Callback when transaction succeeds | -| `onError` | `(error: Error) => void` | Callback when an error occurs | -| `onClose` | `() => void` | Callback when the modal is closed | -| `txData` | `string` | Encoded transaction data for the purchase | - -#### closeSelectPaymentModal - -`() => void` - -Function to close the Payment Selection modal. - -#### selectPaymentSettings - -`SelectPaymentSettings | undefined` - -The current settings configuration for the Payment Selection modal. - -## Notes - -This hook provides methods to control the Payment Selection modal that allows users to purchase digital assets with multiple payment options. The modal offers various payment methods including: -- Pay with cryptocurrency from the user's wallet -- Swap tokens to pay with a different cryptocurrency -- Pay with credit/debit card -- Receive funds from another wallet - - diff --git a/sdk/web/checkout-sdk/hooks/useSwapModal.mdx b/sdk/web/checkout-sdk/hooks/useSwapModal.mdx deleted file mode 100644 index cd6623ab..00000000 --- a/sdk/web/checkout-sdk/hooks/useSwapModal.mdx +++ /dev/null @@ -1,130 +0,0 @@ ---- - -title: "useSwapModal" -description: Hook for opening the swap modal -sidebarTitle: useSwapModal ---- - -## Import - -```tsx -import { useSwapModal } from '@0xsequence/checkout' -``` - -## Usage - -```tsx -import { useSwapModal } from '@0xsequence/checkout' -import { encodeFunctionData, parseAbi } from 'viem' - -function App() { - const { openSwapModal } = useSwapModal() - - const handleSwap = () => { - // Target token information - const chainId = 137 // Polygon - const toTokenAddress = '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359' // USDC on Polygon - const toTokenAmount = '20000' // 0.02 USDC (in smallest units) - - // Optional: Transaction to execute after swap is completed - const data = encodeFunctionData({ - abi: parseAbi(['function demo()']), - functionName: 'demo', - args: [] - }) - - // Open the swap modal - openSwapModal({ - onSuccess: () => { - console.log('swap successful!') - }, - chainId, - toTokenAddress, - toTokenAmount, - postSwapTransactions: [ - { - to: '0x37470dac8a0255141745906c972e414b1409b470', - data - } - ], - title: 'Swap and Pay', - description: 'Select a token in your wallet to swap to 0.2 USDC.' - }) - } - - return ( - - ) -} -``` - -## Return Type: `UseSwapModalReturnType` - -The hook returns an object with the following properties: - -```tsx -type UseSwapModalReturnType = { - openSwapModal: (settings: SwapModalSettings) => void - closeSwapModal: () => void - swapModalSettings: SwapModalSettings | undefined -} -``` - -### Properties - -#### openSwapModal - -`(settings: SwapModalSettings) => void` - -Function to open the Swap modal with the specified settings. - -**Parameters:** - -The `settings` object can include the following properties: - -| Parameter | Type | Description | -| --------- | ---- | ----------- | -| `chainId` | `number` | Blockchain network ID where the swap will occur | -| `toTokenAddress` | `string` | Address of the target token contract | -| `toTokenAmount` | `string` | Amount of the target token in smallest units | -| `postSwapTransactions` | `Array<{to: string, data: string}>` | (Optional) Transactions to execute after the swap completes | -| `disableMainCurrency` | `boolean` | (Optional) If true, disables swapping using the main currency of the chain | -| `title` | `string` | (Optional) Custom title for the swap modal | -| `description` | `string` | (Optional) Custom description for the swap modal | -| `onSuccess` | `() => void` | (Optional) Callback when swap is successful | -| `onError` | `(error: Error) => void` | (Optional) Callback when an error occurs | -| `onClose` | `() => void` | (Optional) Callback when the modal is closed | -| `blockConfirmations` | `number` | (Optional) Number of block confirmations to wait for the swap to complete | - -#### closeSwapModal - -`() => void` - -Function to close the Swap modal. - -#### swapModalSettings - -`SwapModalSettings | undefined` - -The current settings configuration for the Swap modal. - -```tsx -export interface SwapModalSettings { - chainId: number - toTokenAddress: string - toTokenAmount: string - title?: string - description?: string - disableMainCurrency?: boolean - postSwapTransactions?: Transaction[] - blockConfirmations?: number - onSuccess?: (txHash: string) => void -} -``` - -## Notes - -This hook provides methods to control the Swap modal that allows users to swap tokens in their wallet to a target currency. The Swap modal enables users to select tokens from their wallet to swap to a specified target token, with the option to execute additional transactions after the swap completes. - diff --git a/sdk/web/hooks-sdk/hooks/useGetSwapQuote.mdx b/sdk/web/hooks-sdk/hooks/useGetSwapQuote.mdx deleted file mode 100644 index 4c2b9f12..00000000 --- a/sdk/web/hooks-sdk/hooks/useGetSwapQuote.mdx +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: "useGetSwapQuote" -description: Hook for fetching quotes for a swap -sidebarTitle: useGetSwapQuote ---- - -## Import - -```tsx -import { useGetSwapQuote } from '@0xsequence/hooks' -``` - -## Usage - -```tsx -import { useGetSwapQuote } from '@0xsequence/hooks' - -function SwapComponent() { - const { data: swapQuote, isLoading } = useGetSwapQuote({ - params: { - walletAddress: '0x123...', - fromTokenAddress: '0x456...', - toTokenAddress: '0x789...', - toTokenAmount: '1000000000000000000', // amount to buy in wei - chainId: 1, - includeApprove: true, - slippageBps: 100 // 1% slippage - } - }) - - if (isLoading) return
Loading...
- - return ( -
- {swapQuote && ( -
- Price: {swapQuote.price} - Max Price: {swapQuote.maxPrice} - Transaction Value: {swapQuote.transactionValue} - -
- )} -
- ) -} -``` - -## Return Type: `UseQueryResult` - -The hook returns all properties from React Query's `UseQueryResult` with swap quote data. Here's the detailed structure of the swapQuote. - -```tsx -interface LifiSwapQuote { - currencyAddress: string; - currencyBalance: string; - price: string; - maxPrice: string; - to: string; - transactionData: string; - transactionValue: string; - approveData: string; - amount: string; - amountMin: string; -} -``` - -### Properties - -#### data - -`SwapQuote | undefined` - -The swap quote object containing: - -- `currencyAddress`: Address of the currency to be swapped -- `currencyBalance`: Balance of the currency in the user's wallet -- `price`: The current price for the swap -- `maxPrice`: Maximum price allowed for the swap (includes slippage) -- `to`: The target contract address that handles the swap -- `transactionData`: Encoded transaction data for executing the swap -- `transactionValue`: The value to be sent with the transaction (for native tokens) -- `approveData`: Encoded approval transaction data (if includeApprove is true and needed) -- `amount`: The amount of currency to be received -- `amountMin`: The minimum amount to be received after slippage - -#### isLoading - -`boolean` - -Loading state for the data fetch. - -#### isError - -`boolean` - -Error state indicating if the query failed. - -#### error - -`Error | null` - -Any error that occurred during data fetching. - -## Parameters - -The hook accepts two parameters: - -### args: `GetLifiSwapQuoteArgs` - -```tsx -interface GetLifiSwapQuoteArgs { - params: GetLifiSwapQuoteParams -} - -interface GetLifiSwapQuoteParams { - chainId: number; - walletAddress: string; - fromTokenAddress: string; - toTokenAddress: string; - fromTokenAmount?: string; - toTokenAmount?: string; - includeApprove: boolean; - slippageBps: number; -} -``` - -| Parameter | Type | Description | -| --------- | ---- | ----------- | -| `params.chainId` | `number` | The chain ID where the swap will occur | -| `params.walletAddress` | `string` | The address of the user's wallet | -| `params.fromTokenAddress` | `string` | The address of the token to sell | -| `params.toTokenAddress` | `string` | The address of the token to buy | -| `params.fromTokenAmount` | `string` | (Optional) The amount of token to sell (in wei) | -| `params.toTokenAmount` | `string` | (Optional) The amount of token to buy (in wei) | -| `params.includeApprove` | `boolean` | Whether to include approval transaction data | -| `params.slippageBps` | `number` | Maximum allowed slippage in basis points (100 = 1%) | - -**Note**: You must provide either `fromTokenAmount` or `toTokenAmount`, but not both. - -### options: `HooksOptions` - -```tsx -interface HooksOptions { - disabled?: boolean - retry?: boolean -} -``` - -| Parameter | Type | Description | -| --------- | ---- | ----------- | -| `disabled` | `boolean` | (Optional) Disable the query from automatically running | -| `retry` | `boolean` | (Optional) Whether to retry failed queries (defaults to true) | \ No newline at end of file diff --git a/sdk/web/hooks-sdk/hooks/useGetSwapRoutes.mdx b/sdk/web/hooks-sdk/hooks/useGetSwapRoutes.mdx deleted file mode 100644 index 30db1980..00000000 --- a/sdk/web/hooks-sdk/hooks/useGetSwapRoutes.mdx +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: "useGetSwapRoutes" -description: Hook for fetching available routes for a swap -sidebarTitle: useGetSwapRoutes ---- - -## Import - -```tsx -import { useGetSwapRoutes } from '@0xsequence/hooks' -``` - - -This hook replaces the `useGetSwapPrices` hook which was removed in v5.2.3. - - -## Usage - -```tsx -import { useGetSwapRoutes } from '@0xsequence/hooks' -import { useState } from 'react' - -function SwapList() { - const [selectedCurrency, setSelectedCurrency] = useState('') - - const toTokenAddress = '0x...' - const toTokenAmount = '1000000000' - const walletAddress = '0x...' - const chainId = 137 - - const { - data: swapRoutes = [], - isLoading, - isError - } = useGetSwapRoutes({ - walletAddress, - toTokenAddress, - toTokenAmount, - chainId - }) - - if (isLoading) return
Loading swap options...
- - if (isError) return
Error loading swap options
- - const noOptionsFound = swapRoutes.flatMap(route => route.fromTokens).length === 0 - - if (noOptionsFound) return
No swap options found
- - return ( -
- {swapRoutes.flatMap(route => route.fromTokens).map(token => ( -
setSelectedCurrency(token.address)} - style={{ - border: selectedCurrency === token.address ? '2px solid blue' : '1px solid gray', - padding: '10px', - margin: '5px', - cursor: 'pointer' - }} - > - {token.symbol} - {token.symbol}: {token.name} -
Required: {token.price}
-
- ))} -
- ) -} - -export default SwapList -``` - -## Return Type: `UseQueryResult` - -The hook returns all properties from React Query's `UseQueryResult` with swap routes data. Here's the detailed structure of the `LifiSwapRoute` object: - -```tsx -interface LifiToken { - chainId: number; - address: string; - symbol: string; - name: string; - decimals: number; - priceUsd: number; - price?: string; - coinKey: string; - logoUri: string; -} - -interface LifiSwapRoute { - fromChainId: number; - toChainId: number; - fromTokens: Array; - toTokens: Array; -} -``` - -### Properties - -#### data - -`LifiSwapRoute[] | undefined` - -Array of swap route objects containing: - -##### route -- `fromChainId`: The chain ID of the token to sell -- `toChainId`: The chain ID of the token to buy -- `fromTokens`: Array of tokens that can be used to pay for the swap -- `toTokens`: Array of tokens that can be received from the swap - -#### isLoading - -`boolean` - -Loading state for the data fetch. - -#### isError - -`boolean` - -Error state indicating if the query failed. - -#### error - -`Error | null` - -Any error that occurred during data fetching. - -## Parameters - -The hook accepts two parameters: - -### args: `UseGetSwapRoutesArgs` - -```tsx -interface UseGetSwapRoutesArgs { - walletAddress: string - toTokenAddress: string - chainId: number - toTokenAmount: string -} -``` - -| Parameter | Type | Description | -| --------- | ---- | ----------- | -| `walletAddress` | `string` | The address of the user's wallet | -| `toTokenAddress` | `string` | The address of the token to buy | -| `chainId` | `number` | The chain ID where the swap will occur | -| `toTokenAmount` | `string` | The amount of token to buy (in wei) | - -### options: `HooksOptions` - -```tsx -interface HooksOptions { - disabled?: boolean - retry?: boolean -} -``` - -| Parameter | Type | Description | -| --------- | ---- | ----------- | -| `disabled` | `boolean` | (Optional) Disable the query from automatically running | -| `retry` | `boolean` | (Optional) Whether to retry failed queries (defaults to true) | - -## Additional Notes - -- This hook uses React Query to fetch and cache swap routes from the Sequence API. -- Stale time is set to one hour by default to avoid refreshing quotes while the user is completing transactions. -- This hook will not return "fromTokens" that the user does not have in their wallet. diff --git a/sdk/web/wallet-sdk/embedded/guides/checkout.mdx b/sdk/web/wallet-sdk/embedded/guides/checkout.mdx deleted file mode 100644 index 199956f2..00000000 --- a/sdk/web/wallet-sdk/embedded/guides/checkout.mdx +++ /dev/null @@ -1,156 +0,0 @@ ---- - -title: "Checkout Modal" -description: The Checkout Modal provides developers with an easy way to implement cryptocurrency payments. -sidebarTitle: Checkout Modal ---- - -Sequence Checkout allows users to easily purchase an ERC721 or ERC1155 token with a primary or secondary sales contract such as a marketplace, with the following payment options: - - Purchase with any cryptocurrency in the wallet. - - Receive funds from another wallet to a Sequence wallet and purchase. - - Pay using a credit or debit card which will intelligently detect the correct provider for each region, chain and currency. - - Pay with another cryptocurrency in a wallet by doing an automated swap and purchase. - -We have an integrated checkout flow that you can leverage by installing the dedicated library `@0xsequence/checkout` and using it in conjunction with `@0xsequence/connect`. - -![](/images/kit/checkout-modal.png) - - - -In order to enable credit card payments for checkout, please get in touch with the Sequence team as your contract address will need to be allowlisted and go through a KYB process for your organization. Credit card payments only work on various networks mainnets - - -# Installation and Setup -To integrate the checkout feature, follow these steps: - - - - -```bash -npm install @0xsequence/checkout -# or -pnpm install @0xsequence/checkout -# or -yarn add @0xsequence/checkout -``` - - - - -```jsx -import { SequenceCheckoutProvider } from '@0xsequence/checkout' -import { SequenceConnect } from '@0xsequence/connect' -import { config } from './config' - -const App = () => { - return ( - - - - - - ) -} -``` - - - -Now we have the setup done, let's see how to use the checkout modal for different use cases. - - ## Custom Contract - We instantiate the `useSelectPaymentModal` hook to open the checkout modal and pass a settings object. In addition, for custom contracts, you can specify a contract ABI along with encoding the call data, in this case we are using `ethers` and `viem`'s `encodeFunctionData` utility. - - ```tsx - import { useAccount } from 'wagmi' - import { useSelectPaymentModal, type SelectPaymentSettings } from '@0xsequence/checkout' - import { toHex } from 'viem' - import { encodeFunctionData } from 'viem' - - const MyComponent = () => { - const { address } = useAccount() - const { openSelectPaymentModal } = useSelectPaymentModal() - - const onClick = () => { - if (!address) { - return - } - - const currencyAddress = '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359' - const salesContractAddress = '0xe65b75eb7c58ffc0bf0e671d64d0e1c6cd0d3e5b' - const collectionAddress = '0xdeb398f41ccd290ee5114df7e498cf04fac916cb' - const price = '20000' - - const chainId = 137 - - const erc1155SalesContractAbi = [ - { - type: 'function', - name: 'mint', - inputs: [ - { name: 'to', type: 'address', internalType: 'address' }, - { name: 'tokenIds', type: 'uint256[]', internalType: 'uint256[]' }, - { name: 'amounts', type: 'uint256[]', internalType: 'uint256[]' }, - { name: 'data', type: 'bytes', internalType: 'bytes' }, - { name: 'expectedPaymentToken', type: 'address', internalType: 'address' }, - { name: 'maxTotal', type: 'uint256', internalType: 'uint256' }, - { name: 'proof', type: 'bytes32[]', internalType: 'bytes32[]' } - ], - outputs: [], - stateMutability: 'payable' - } - ] - - const collectibles = [ - { - tokenId: '1', - quantity: '1' - } - ] - - const purchaseTransactionData = encodeFunctionData({ - abi: erc1155SalesContractAbi, - functionName: 'mint', - args: [ - address, - collectibles.map(c => BigInt(c.tokenId)), - collectibles.map(c => BigInt(c.quantity)), - toHex(0), - currencyAddress, - price, - [toHex(0, { size: 32 })] - ] - }) - - const selectPaymentModalSettings: SelectPaymentSettings = { - collectibles: [ - { - tokenId: '1', - quantity: '1' - } - ], - chain: chainId, - price, - targetContractAddress: salesContractAddress, - recipientAddress: address, - currencyAddress, - collectionAddress, - creditCardProviders: ['transak'], - copyrightText: 'ⓒ2024 Sequence', - onSuccess: (txnHash: string) => { - console.log('success!', txnHash) - }, - onError: (error: Error) => { - console.error(error) - }, - txData: purchaseTransactionData, - } - - openSelectPaymentModal(selectPaymentModalSettings) - } - - return - } -``` - -Congratulations! You’ve just learned how to use the Checkout Modal with Web SDK. - diff --git a/sdk/web/wallet-sdk/embedded/guides/on-ramp-and-swap.mdx b/sdk/web/wallet-sdk/embedded/guides/on-ramp-and-swap.mdx deleted file mode 100644 index eb387bb2..00000000 --- a/sdk/web/wallet-sdk/embedded/guides/on-ramp-and-swap.mdx +++ /dev/null @@ -1,120 +0,0 @@ ---- - -title: "On-ramp and Swap to a custom token" -description: On-ramp to a supported token and swap to your own custom token. -sidebarTitle: On-ramp and Swap to a custom token ---- - -Most of the well known tokens are already supported but for some cases you might want your users to be able to swap to a custom token. -This example will show you how to do that in two steps using our web SDK. - -## Integration -To integrate the on-ramp and swap to a custom token, follow these steps: - - - - - Make sure you completed the [Getting Started](/sdk/web/wallet-sdk/embedded/getting-started) guide. - - - - Complete the [On-ramp](/sdk/web/wallet-sdk/embedded/guides/on-ramp) guide - - - -After the on-ramp is successful, we can use the `onOrderSuccessful` callback to update the state of the app. - -```tsx - import { useState } from 'react' - import { useAddFundsModal } from '@0xsequence/checkout' - import { useAccount } from 'wagmi' - - export const OnRampAndSwap = () => { - const { triggerAddFunds: toggleAddFunds } = useAddFundsModal() - const { address: smartWalletAddress } = useAccount() - const [canSwap, setCanSwap] = useState(true) - - const onTriggerAddFunds = () => { - if (smartWalletAddress) { - toggleAddFunds({ - walletAddress: smartWalletAddress, - onOrderSuccessful(data) { - console.log('Order successful', data) - setCanSwap(true) - }, - }) - } - } - - return ( - <> - - - ) - } -``` - - - -Once the on-ramp is successful, we can use the `useSwapModal` hook to swap the purchased token to your own custom token. - -It will take a few minutes (1-3 minutes) for the on-ramped token to be available in the smart wallet so make sure to check the balance before opening the swap modal. -If you have enough balance of a supported payment token, the modal will display it as a payment option, you don't need to specify a payment token. - - - Make sure your custom token has enough liquidity on the chain you are executing the swap on. - - -```tsx - import { useState } from 'react' - import { SwapModalSettings, useAddFundsModal, useSwapModal } from '@0xsequence/checkout' - import { useAccount } from 'wagmi' - - export const OnRampAndSwap = () => { - const { triggerAddFunds: toggleAddFunds } = useAddFundsModal() - const { openSwapModal } = useSwapModal() - const { address: smartWalletAddress, chainId } = useAccount() - const [canSwap, setCanSwap] = useState(true) - - const toTokenAmount = '10000000000' // amount in wei - const toTokenAddress = '0x...' // custom token address - - const onTriggerAddFunds = () => { - if (smartWalletAddress) { - toggleAddFunds({ - walletAddress: smartWalletAddress, - onOrderSuccessful(data) { - console.log('Order successful', data) - setCanSwap(true) - }, - }) - } - } - - const onSwap = () => { - const swapModalSettings: SwapModalSettings = { - onSuccess: () => { - console.log('Swap successful') - }, - chainId, - toTokenAddress, - toTokenAmount, - title: `Buy our custom token`, - description: 'Choose your payment method' - } - - openSwapModal(swapModalSettings) - } - - return ( - <> - {canSwap ? : } - - ) - } -``` - - - -Congratulations! You’ve just learned how to on-ramp and swap to a custom token using Web SDK. - diff --git a/sdk/web/wallet-sdk/embedded/guides/on-ramp.mdx b/sdk/web/wallet-sdk/embedded/guides/on-ramp.mdx deleted file mode 100644 index fd024731..00000000 --- a/sdk/web/wallet-sdk/embedded/guides/on-ramp.mdx +++ /dev/null @@ -1,95 +0,0 @@ ---- - -title: "On-ramp Overview" -description: The checkout on-ramp modal in Web SDK allows developers to easily onboard users with fiat currency into cryptocurrency using a credit card. -sidebarTitle: On-ramp ---- - -With this integration, one can use a credit card to purchase tokens across many different networks. - -![](/images/kit/kit-on-ramp.png) - - - -## Integration -To integrate the on-ramp feature, follow these steps: - - - - - Make sure you completed the [Getting Started](/sdk/web/wallet-sdk/embedded/getting-started) guide. - - - - -```bash -npm install @0xsequence/checkout -# or -pnpm install @0xsequence/checkout -# or -yarn add @0xsequence/checkout -``` - - - - -```jsx -import { SequenceCheckoutProvider } from '@0xsequence/checkout' -import { SequenceConnect } from '@0xsequence/connect' -import { config } from './config' - -const App = () => { - return ( - - - - - - ) -} -``` - - - -Call the `triggerAddFunds` function to cause a modal to appear - -```js - 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 ( - - ) - } -``` - - - -Congratulations! You’ve just learned how to add funds to your wallet using Web SDK. - -# Configuration Overview - -The following is the available configuration customization options for toggleAddFunds params - -```ts -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 -} -``` \ No newline at end of file diff --git a/sdk/web/wallet-sdk/embedded/guides/smart-swaps.mdx b/sdk/web/wallet-sdk/embedded/guides/smart-swaps.mdx deleted file mode 100644 index 8ee01fa2..00000000 --- a/sdk/web/wallet-sdk/embedded/guides/smart-swaps.mdx +++ /dev/null @@ -1,119 +0,0 @@ ---- - -title: "Smart Swaps" -description: Sequence Smart Swaps auto detects eligible currencies in the user's wallet and swaps them to the target currency. Developers can define the target currency and Sequence will handle everything, including the UI and flow through Web SDK. -sidebarTitle: Smart Swaps ---- - -The power of smart swaps is intelligently detecting the currencies available to the user as well as batching multiple transactions together to if the user is utilizing a Sequence wallet to simplify the UX. You can say goodbye to separate `approve` and `transfer` transactions! - -![](/images/kit/swap-modal.png) - - - -If you intend to use smart swaps with your custom token, please ensure you provide sufficient liquidity for your token (preferably USDC, USDT, or ETH) on a supported DEX such as Uniswap. - - -Smart Swaps are only supported on mainnets, such as: - -- Ethereum -- Arbitrum -- Avalanche -- Base -- Blast -- BSC -- Optimism -- Polygon -- ... - -Here are some of our supported liquidity pool providers: - -`UniSwap` `SushiSwap` `Pancake Swap` `Curve` `Balancer` `Bancor` `Synapse` `Solidly` - -# Installation and Setup -To integrate the Swap feature with Web SDK, follow these steps: - - - - -```bash -npm install @0xsequence/checkout -# or -pnpm install @0xsequence/checkout -# or -yarn add @0xsequence/checkout -``` - - - - -```jsx -import { SequenceCheckoutProvider } from '@0xsequence/checkout' -import { SequenceConnect } from '@0xsequence/connect' -import { config } from './config' - -const App = () => { - return ( - - - - - - ) -} -``` - - - - -- `toTokenAddress`: The target currency address, this is the token the user will receive after the swap. -- `toTokenAmount`: The target currency amount, this is the amount the user will receive after the swap. -- `postSwapTransactions`: An optional array of transactions to be executed after the swap, using the swapped tokens. -- `title`: The modal's title. -- `description`: A description of the swap and payment process. -- `chainId`: The chain id of the target currency. -- `onSuccess`: A callback function that is called when the swap is successful. - -```jsx -import { useSwapModal, type SwapModalSettings } from '@0xsequence/checkout' - -const MyComponent = () => { - const { openSwapModal } = useSwapModal() - - const onClick = () => { - const chainId = 137 - const toTokenAddress = '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359' - const toTokenAmount = '20000' - - const contractAbiInterface = new ethers.Interface(['function demo()']) // Optionally, replace with your contract's abi interface - - const data = contractAbiInterface.encodeFunctionData('demo', []) as `0x${string}` // Optionally, replace 'demo' with the function you want to call, - - const swapModalSettings: SwapModalSettings = { - onSuccess: () => { - console.log('swap successful!') - }, - chainId, - toTokenAddress, - toTokenAmount, - postSwapTransactions: [ // Optionally, replace with the transaction you would like to execute after the swap has taken place. - { - to: '0x37470dac8a0255141745906c972e414b1409b470', - data - } - ], - title: 'Swap and Pay', - description: 'Select a token in your wallet to swap to 0.2 USDC.' - } - - openSwapModal(swapModalSettings) - } - - return -} -``` - - - -Congratulations! You’ve just learned how to use smart swaps with Web SDK. - From 4bb09e4dfca34a0d78c0ea65699d651c5e1d8ce2 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 12 Dec 2025 20:32:48 +0000 Subject: [PATCH 2/2] chore(i18n): update translations [en] Sync file structure, format locales. Branch: 205/merge --- es/sdk/web/checkout-sdk/getting-started.mdx | 2 +- .../hooks/useCreditCardCheckoutModal.mdx | 97 +++++++++++++++++++ ja/sdk/web/checkout-sdk/getting-started.mdx | 2 +- .../hooks/useCreditCardCheckoutModal.mdx | 97 +++++++++++++++++++ 4 files changed, 196 insertions(+), 2 deletions(-) create mode 100644 es/sdk/web/checkout-sdk/hooks/useCreditCardCheckoutModal.mdx create mode 100644 ja/sdk/web/checkout-sdk/hooks/useCreditCardCheckoutModal.mdx diff --git a/es/sdk/web/checkout-sdk/getting-started.mdx b/es/sdk/web/checkout-sdk/getting-started.mdx index 20797dd8..8f6c663a 100644 --- a/es/sdk/web/checkout-sdk/getting-started.mdx +++ b/es/sdk/web/checkout-sdk/getting-started.mdx @@ -52,6 +52,6 @@ sidebarTitle: Primeros pasos - Ahora puede comenzar a usar hooks como [useSelectPaymentModal](/sdk/web/checkout-sdk/hooks/useSelectPaymentModal). + Ahora puede comenzar a usar hooks como [useCreditCardCheckoutModal](/sdk/web/checkout-sdk/hooks/useCreditCardCheckoutModal). \ No newline at end of file diff --git a/es/sdk/web/checkout-sdk/hooks/useCreditCardCheckoutModal.mdx b/es/sdk/web/checkout-sdk/hooks/useCreditCardCheckoutModal.mdx new file mode 100644 index 00000000..2e0be43a --- /dev/null +++ b/es/sdk/web/checkout-sdk/hooks/useCreditCardCheckoutModal.mdx @@ -0,0 +1,97 @@ +--- +title: useCreditCardCheckoutModal +description: Hook para gestionar el flujo de pago con tarjeta de crédito +sidebarTitle: useCreditCardCheckoutModal +--- + +## Importar + +```tsx +import { useCreditCardCheckoutModal } from '@0xsequence/checkout' +``` + +## Uso + +```tsx +import { useCreditCardCheckoutModal } from '@0xsequence/checkout' +import { polygon } from 'viem/chains' +import { useAccount } from 'wagmi' + +function Home() { + const { address } = useAccount() + const { initiateCreditCardCheckout, closeCreditCardCheckout, settings } = useCheckoutModal() + + const handleCheckout = () => { + // NFT purchase settings + const chainId = polygon.id + const orderbookAddress = '0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712' + const nftQuantity = '1' + const tokenContractAddress = '0xabcdef...' // NFT contract address + const tokenId = '123' // NFT token ID + + initiateCreditCardCheckout({ + chainId, + contractAddress: orderbookAddress, + recipientAddress: address || '', + currencyQuantity: '100000', + currencySymbol: 'USDC', + currencyAddress: '0x3c499c542cef5e3811e1192ce70d8cc03d5c3359', + currencyDecimals: '6', + nftId: tokenId, + nftAddress: tokenContractAddress, + nftQuantity, + approvedSpenderAddress: orderbookAddress, + calldata: "0x...", + onSuccess: (txHash) => console.log('Success!', txHash) + }) + } + + return ( + + ) +} + +export default Home +``` + +### Propiedades + +#### initiateCreditCardCheckout +`(settings: CreditCardCheckoutSettings) => void` + +Abre el modal de pago con tarjeta de crédito con los parámetros especificados. + +**Parámetros:** + +El objeto `settings` puede incluir las siguientes propiedades: + +| Parámetro | Tipo | Descripción | +| ------------------------ | -------------------------- | ----------------------------------------------------------------- | +| `chainId` | `number` | El ID de la red blockchain | +| `contractAddress` | `string` | La dirección del contrato con el que interactuar | +| `recipientAddress` | `string` | La dirección que recibirá el artículo comprado | +| `currencyQuantity` | `string` | La cantidad de moneda a usar para el pago | +| `currencySymbol` | `string` | El símbolo de la moneda (por ejemplo, 'USDC') | +| `currencyAddress` | `string` | La dirección del contrato del token de la moneda | +| `currencyDecimals` | `string` | El número de decimales de la moneda | +| `nftId` | `string` | El ID del NFT que se está comprando | +| `nftAddress` | `string` | La dirección del contrato NFT | +| `nftQuantity` | `string` | La cantidad de NFTs a comprar | +| `approvedSpenderAddress` | `string` | La dirección autorizada para gastar tokens | +| `calldata` | `string` | Los datos codificados de la llamada a función para la transacción | +| `onSuccess` | `(txHash: string) => void` | Callback cuando la transacción es exitosa | + +#### closeCreditCardCheckout +`() => void` + +Cierra el modal de pago con tarjeta de crédito. + +#### settings +`CreditCardCheckoutSettings | undefined` + +La configuración actual para el modal de pago con tarjeta de crédito. + +## Notas +Este hook proporciona métodos para controlar el modal de pago con tarjeta de crédito que permite a los usuarios completar compras usando una tarjeta de crédito. \ No newline at end of file diff --git a/ja/sdk/web/checkout-sdk/getting-started.mdx b/ja/sdk/web/checkout-sdk/getting-started.mdx index 3d616ef8..eb68a6e8 100644 --- a/ja/sdk/web/checkout-sdk/getting-started.mdx +++ b/ja/sdk/web/checkout-sdk/getting-started.mdx @@ -52,6 +52,6 @@ sidebarTitle: はじめに - これで、[useSelectPaymentModal](/sdk/web/checkout-sdk/hooks/useSelectPaymentModal)などのフックが利用できるようになります。 + これで、[useCreditCardCheckoutModal](/sdk/web/checkout-sdk/hooks/useCreditCardCheckoutModal) のようなフックを使い始めることができます。 \ No newline at end of file diff --git a/ja/sdk/web/checkout-sdk/hooks/useCreditCardCheckoutModal.mdx b/ja/sdk/web/checkout-sdk/hooks/useCreditCardCheckoutModal.mdx new file mode 100644 index 00000000..20d48ad9 --- /dev/null +++ b/ja/sdk/web/checkout-sdk/hooks/useCreditCardCheckoutModal.mdx @@ -0,0 +1,97 @@ +--- +title: useCreditCardCheckoutModal +description: クレジットカード決済フローを管理するためのフック +sidebarTitle: useCreditCardCheckoutModal +--- + +## インポート + +```tsx +import { useCreditCardCheckoutModal } from '@0xsequence/checkout' +``` + +## 使い方 + +```tsx +import { useCreditCardCheckoutModal } from '@0xsequence/checkout' +import { polygon } from 'viem/chains' +import { useAccount } from 'wagmi' + +function Home() { + const { address } = useAccount() + const { initiateCreditCardCheckout, closeCreditCardCheckout, settings } = useCheckoutModal() + + const handleCheckout = () => { + // NFT purchase settings + const chainId = polygon.id + const orderbookAddress = '0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712' + const nftQuantity = '1' + const tokenContractAddress = '0xabcdef...' // NFT contract address + const tokenId = '123' // NFT token ID + + initiateCreditCardCheckout({ + chainId, + contractAddress: orderbookAddress, + recipientAddress: address || '', + currencyQuantity: '100000', + currencySymbol: 'USDC', + currencyAddress: '0x3c499c542cef5e3811e1192ce70d8cc03d5c3359', + currencyDecimals: '6', + nftId: tokenId, + nftAddress: tokenContractAddress, + nftQuantity, + approvedSpenderAddress: orderbookAddress, + calldata: "0x...", + onSuccess: (txHash) => console.log('Success!', txHash) + }) + } + + return ( + + ) +} + +export default Home +``` + +### プロパティ + +#### initiateCreditCardCheckout +`(settings: CreditCardCheckoutSettings) => void` + +指定したパラメータでクレジットカード決済モーダルを開きます。 + +**パラメータ：** + +`settings`オブジェクトには以下のプロパティを含めることができます: + +| パラメータ | 型 | 説明 | +| ------------------------ | -------------------------- | ------------------------- | +| `chainId` | `number` | ブロックチェーンネットワークID | +| `contractAddress` | `string` | 操作対象となるコントラクトのアドレス | +| `recipientAddress` | `string` | 購入したアイテムの受取先アドレス | +| `currencyQuantity` | `string` | 支払いに使用する通貨の数量 | +| `currencySymbol` | `string` | 通貨のシンボル（例: 'USDC'） | +| `currencyAddress` | `string` | 通貨トークンコントラクトのアドレス | +| `currencyDecimals` | `string` | 通貨の小数点以下の桁数 | +| `nftId` | `string` | 購入するNFTのID | +| `nftAddress` | `string` | NFTコントラクトのアドレス | +| `nftQuantity` | `string` | 購入するNFTの数量 | +| `approvedSpenderAddress` | `string` | トークンの支払いを許可されたアドレス | +| `calldata` | `string` | トランザクションのエンコード済み関数呼び出しデータ | +| `onSuccess` | `(txHash: string) => void` | トランザクションが成功した際のコールバック | + +#### closeCreditCardCheckout +`() => void` + +クレジットカード決済モーダルを閉じます。 + +#### settings +`CreditCardCheckoutSettings | undefined` + +クレジットカード決済モーダルの現在の設定構成です。 + +## 補足 +このフックは、ユーザーがクレジットカードで購入を完了できるクレジットカード決済モーダルを制御するためのメソッドを提供します。 \ No newline at end of file