diff --git a/docs.json b/docs.json index c42a0b16..7ecb039b 100644 --- a/docs.json +++ b/docs.json @@ -342,7 +342,6 @@ "pages": [ "sdk/web/checkout-sdk/hooks/useAddFundsModal", "sdk/web/checkout-sdk/hooks/useCheckoutModal", - "sdk/web/checkout-sdk/hooks/useERC1155SaleContractCheckout", "sdk/web/checkout-sdk/hooks/useSelectPaymentModal", "sdk/web/checkout-sdk/hooks/useSwapModal", "sdk/web/checkout-sdk/hooks/useTransferFundsModal" @@ -1330,7 +1329,6 @@ "pages": [ "ja/sdk/web/checkout-sdk/hooks/useAddFundsModal", "ja/sdk/web/checkout-sdk/hooks/useCheckoutModal", - "ja/sdk/web/checkout-sdk/hooks/useERC1155SaleContractCheckout", "ja/sdk/web/checkout-sdk/hooks/useSelectPaymentModal", "ja/sdk/web/checkout-sdk/hooks/useSwapModal", "ja/sdk/web/checkout-sdk/hooks/useTransferFundsModal" @@ -2314,7 +2312,6 @@ "pages": [ "es/sdk/web/checkout-sdk/hooks/useAddFundsModal", "es/sdk/web/checkout-sdk/hooks/useCheckoutModal", - "es/sdk/web/checkout-sdk/hooks/useERC1155SaleContractCheckout", "es/sdk/web/checkout-sdk/hooks/useSelectPaymentModal", "es/sdk/web/checkout-sdk/hooks/useSwapModal", "es/sdk/web/checkout-sdk/hooks/useTransferFundsModal" diff --git a/es/sdk/web/checkout-sdk/hooks/useERC1155SaleContractCheckout.mdx b/es/sdk/web/checkout-sdk/hooks/useERC1155SaleContractCheckout.mdx deleted file mode 100644 index 56aa679f..00000000 --- a/es/sdk/web/checkout-sdk/hooks/useERC1155SaleContractCheckout.mdx +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: useERC1155SaleContractCheckout -description: Hook para gestionar el checkout del contrato de venta ERC-1155 -sidebarTitle: useERC1155SaleContractCheckout ---- - -## Importar - -```tsx -import { useERC1155SaleContractCheckout } from '@0xsequence/checkout' -``` - -## Uso - -```tsx -import { useERC1155SaleContractCheckout } from "@0xsequence/checkout" -import { useAccount } from "wagmi" - -function App() { - const { address: userAddress } = useAccount() - const { openCheckoutModal } = useERC1155SaleContractCheckout({ - chain: 80001, // chainId of the chain the collectible is on - contractAddress: "0x0327b2f274e04d292e74a06809bcd687c63a4ba4", // address of the contract handling the minting function - wallet: userAddress!, // address of the recipient - collectionAddress: "0x888a322db4b8033bac3ff84412738c096f87f9d0", // address of the collection contract - items: [ - // array of collectibles to purchase - { - tokenId: "0", - quantity: "1", - }, - ], - onSuccess: (txnHash: string) => { - console.log("success!", txnHash) - }, - onError: (error: Error) => { - console.error(error) - }, - }) - - const onClick = () => { - if (!userAddress) { - return - } - openCheckoutModal() - } - - return -} -``` - -## Tipo de retorno: `UseERC1155SaleContractCheckoutReturnType` -El hook retorna un objeto con las siguientes propiedades: - -```tsx -interface UseERC1155SaleContractCheckoutReturnType { - openCheckoutModal: () => void - closeCheckoutModal: () => void - selectPaymentSettings?: SelectPaymentSettings - isLoading: boolean - isError: boolean -} -``` - -### Propiedades - -#### openCheckoutModal -`() => void` - -Función para abrir el modal de checkout con la compra ERC-1155 configurada. - -#### closeCheckoutModal -`() => void` - -Función para cerrar el modal de checkout. - -#### selectPaymentSettings -`SelectPaymentSettings | undefined` - -```tsx -export interface SelectPaymentSettings { - collectibles: Collectible[] - chain: number | string - currencyAddress: string | Hex - price: string - targetContractAddress: string | Hex - txData: Hex - collectionAddress: string | Hex - recipientAddress: string | Hex - approvedSpenderAddress?: string - transactionConfirmations?: number - onSuccess?: (txHash: string) => void - onError?: (error: Error) => void - onClose?: () => void - enableMainCurrencyPayment?: boolean - enableSwapPayments?: boolean - enableTransferFunds?: boolean - creditCardProviders?: string[] - copyrightText?: string - customProviderCallback?: (onSuccess: (txHash: string) => void, onError: (error: Error) => void, onClose: () => void) => void - supplementaryAnalyticsInfo?: SupplementaryAnalyticsInfo -} -``` - -La configuración actual de pago para el modal. - -#### isLoading -`boolean` - -Indica si los datos del contrato aún se están cargando. - -#### isError -`boolean` - -Indica si hubo un error al cargar los datos del contrato. - -## Parámetros -El hook acepta un objeto de configuración con las siguientes propiedades: - -| Parámetro | Tipo | Descripción | -| ------------------- | -------------------------------------------- | ------------------------------------------------------------ | -| `chain` | `number` | ID de cadena donde está desplegado el contrato de venta | -| `contractAddress` | `string` | Dirección del contrato de venta ERC-1155 | -| `wallet` | `string` | Dirección del wallet que recibirá los NFTs | -| `collectionAddress` | `string` | Dirección del contrato de token ERC-1155 | -| `items` | `Array<{tokenId: string, quantity: string}>` | Lista de IDs de token y cantidades a comprar | -| `onSuccess` | `(txnHash: string) => void` | (Opcional) Función callback cuando la transacción es exitosa | -| `onError` | `(error: Error) => void` | (Opcional) Función callback cuando ocurre un error | -| `onClose` | `() => void` | (Opcional) Función callback cuando se cierra el modal | - -## Notas -Este hook simplifica el proceso de compra de tokens ERC-1155 al realizar automáticamente las siguientes acciones: -- Obtener información de precios desde el contrato de venta -- Determinar opciones de pago (cripto, tarjeta de crédito, etc.) -- Generar los datos de transacción adecuados -- Abrir y gestionar el modal de checkout - -## Aviso de Deprecación - - - El hook `useERC1155SaleContractPaymentModal` está obsoleto. Use `useERC1155SaleContractCheckout` en su lugar. - \ No newline at end of file diff --git a/es/sdk/web/wallet-sdk/embedded/guides/checkout.mdx b/es/sdk/web/wallet-sdk/embedded/guides/checkout.mdx index 7eb6ef39..03ce3abf 100644 --- a/es/sdk/web/wallet-sdk/embedded/guides/checkout.mdx +++ b/es/sdk/web/wallet-sdk/embedded/guides/checkout.mdx @@ -55,48 +55,6 @@ Para integrar la función de checkout, siga estos pasos: Ahora que hemos realizado la configuración, veamos cómo usar el modal de checkout para diferentes casos de uso. -## Checkout con un token ERC1155 -Disponemos de funciones utilitarias para tokens ERC1155 que hacen más sencilla la configuración del modal de checkout. - -Aquí hay una configuración con variables de ejemplo: - -```jsx - import { useERC1155SaleContractCheckout } from "@0xsequence/checkout"; - import { useAccount } from "wagmi"; - - const MyComponent = () => { - const { address: userAddress } = useAccount(); - const { openCheckoutModal } = useERC1155SaleContractCheckout({ - chain: 80002, // chainId of the chain the collectible is on - contractAddress: "0x0327b2f274e04d292e74a06809bcd687c63a4ba4", // address of the contract handling the minting function - wallet: userAddress!, // address of the recipient - collectionAddress: "0x888a322db4b8033bac3ff84412738c096f87f9d0", // address of the collection contract - items: [ - // array of collectibles to purchase - { - tokenId: "0", - quantity: "1", - }, - ], - onSuccess: (txnHash: string) => { - console.log("success!", txnHash); - }, - onError: (error: Error) => { - console.error(error); - }, - }); - - const onClick = () => { - if (!userAddress) { - return; - } - openCheckoutModal(); - }; - - return ; - }; -``` - ## Contrato personalizado Instanciamos el hook `useSelectPaymentModal` para abrir el modal de checkout y pasar un objeto de configuración. Además, para contratos personalizados, puede especificar un ABI de contrato junto con la codificación de los datos de la llamada; en este caso estamos usando la utilidad `encodeFunctionData` de `ethers` y `viem`. diff --git a/es/solutions/payments/checkout-sdk.mdx b/es/solutions/payments/checkout-sdk.mdx index 1f25d22f..dfd6f9ff 100644 --- a/es/solutions/payments/checkout-sdk.mdx +++ b/es/solutions/payments/checkout-sdk.mdx @@ -43,30 +43,6 @@ export default function App() { } ``` -## Ejemplo: venta primaria de ERC-1155 - -```tsx -import { useAccount } from 'wagmi' -import { useERC1155SaleContractCheckout } from '@0xsequence/checkout' - -export function BuyButton() { - const { address } = useAccount() - const { openCheckoutModal } = useERC1155SaleContractCheckout({ - chain: 137, // destination chainId - contractAddress: '0xSaleContract', // primary sale contract - collectionAddress: '0xERC1155', // collection - wallet: address!, // recipient - items: [{ tokenId: '1', quantity: '1' }], - // Optional: restrict card providers if your integration requires it - // creditCardProviders: ['transak', 'forte'], - onSuccess: (txHash) => console.log('success', txHash), - onError: (err) => console.error(err), - }) - - return -} -``` - ## Ejemplo: llamada personalizada a contrato ```tsx diff --git a/ja/docs.json b/ja/docs.json index c65cad2b..b109a549 100644 --- a/ja/docs.json +++ b/ja/docs.json @@ -244,7 +244,6 @@ "sdk/web/hooks/useChain", "sdk/web/hooks/useCheckoutModal", "sdk/web/hooks/useCheckWaasFeeOptions", - "sdk/web/hooks/useERC1155SaleContractCheckout", "sdk/web/hooks/useGetCoinPrices", "sdk/web/hooks/useGetCollectiblePrices", "sdk/web/hooks/useListAccounts", @@ -1052,7 +1051,6 @@ "ja/sdk/web/hooks/useChain", "ja/sdk/web/hooks/useCheckoutModal", "ja/sdk/web/hooks/useCheckWaasFeeOptions", - "ja/sdk/web/hooks/useERC1155SaleContractCheckout", "ja/sdk/web/hooks/useGetCoinPrices", "ja/sdk/web/hooks/useGetCollectiblePrices", "ja/sdk/web/hooks/useListAccounts", @@ -1877,7 +1875,6 @@ "es/sdk/web/hooks/useChain", "es/sdk/web/hooks/useCheckoutModal", "es/sdk/web/hooks/useCheckWaasFeeOptions", - "es/sdk/web/hooks/useERC1155SaleContractCheckout", "es/sdk/web/hooks/useGetCoinPrices", "es/sdk/web/hooks/useGetCollectiblePrices", "es/sdk/web/hooks/useListAccounts", diff --git a/ja/sdk/web/checkout-sdk/hooks/useERC1155SaleContractCheckout.mdx b/ja/sdk/web/checkout-sdk/hooks/useERC1155SaleContractCheckout.mdx deleted file mode 100644 index b9a9c9cb..00000000 --- a/ja/sdk/web/checkout-sdk/hooks/useERC1155SaleContractCheckout.mdx +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: useERC1155SaleContractCheckout -description: ERC-1155販売コントラクトのチェックアウトを管理するためのフック -sidebarTitle: useERC1155SaleContractCheckout ---- - -## インポート - -```tsx -import { useERC1155SaleContractCheckout } from '@0xsequence/checkout' -``` - -## 使い方 - -```tsx -import { useERC1155SaleContractCheckout } from "@0xsequence/checkout" -import { useAccount } from "wagmi" - -function App() { - const { address: userAddress } = useAccount() - const { openCheckoutModal } = useERC1155SaleContractCheckout({ - chain: 80001, // chainId of the chain the collectible is on - contractAddress: "0x0327b2f274e04d292e74a06809bcd687c63a4ba4", // address of the contract handling the minting function - wallet: userAddress!, // address of the recipient - collectionAddress: "0x888a322db4b8033bac3ff84412738c096f87f9d0", // address of the collection contract - items: [ - // array of collectibles to purchase - { - tokenId: "0", - quantity: "1", - }, - ], - onSuccess: (txnHash: string) => { - console.log("success!", txnHash) - }, - onError: (error: Error) => { - console.error(error) - }, - }) - - const onClick = () => { - if (!userAddress) { - return - } - openCheckoutModal() - } - - return -} -``` - -## 返り値の型: `UseERC1155SaleContractCheckoutReturnType` -このフックは以下のプロパティを持つオブジェクトを返します。 - -```tsx -interface UseERC1155SaleContractCheckoutReturnType { - openCheckoutModal: () => void - closeCheckoutModal: () => void - selectPaymentSettings?: SelectPaymentSettings - isLoading: boolean - isError: boolean -} -``` - -### プロパティ - -#### openCheckoutModal -`() => void` - -設定済みのERC-1155購入でチェックアウトモーダルを開く関数です。 - -#### closeCheckoutModal -`() => void` - -チェックアウトモーダルを閉じる関数です。 - -#### selectPaymentSettings -`SelectPaymentSettings | undefined` - -```tsx -export interface SelectPaymentSettings { - collectibles: Collectible[] - chain: number | string - currencyAddress: string | Hex - price: string - targetContractAddress: string | Hex - txData: Hex - collectionAddress: string | Hex - recipientAddress: string | Hex - approvedSpenderAddress?: string - transactionConfirmations?: number - onSuccess?: (txHash: string) => void - onError?: (error: Error) => void - onClose?: () => void - enableMainCurrencyPayment?: boolean - enableSwapPayments?: boolean - enableTransferFunds?: boolean - creditCardProviders?: string[] - copyrightText?: string - customProviderCallback?: (onSuccess: (txHash: string) => void, onError: (error: Error) => void, onClose: () => void) => void - supplementaryAnalyticsInfo?: SupplementaryAnalyticsInfo -} -``` - -モーダルの現在の支払い設定構成です。 - -#### isLoading -`boolean` - -コントラクトデータがまだ読み込み中かどうか。 - -#### isError -`boolean` - -コントラクトデータの読み込み時にエラーが発生したかどうか。 - -## パラメータ -このフックは、以下のプロパティを持つ設定オブジェクトを受け取ります: - -| パラメータ | 型 | 説明 | -| ------------------- | -------------------------------------------- | ------------------------------ | -| `chain` | `number` | 販売コントラクトがデプロイされているチェーンID | -| `contractAddress` | `string` | ERC-1155販売コントラクトのアドレス | -| `wallet` | `string` | NFTを受け取るウォレットのアドレス | -| `collectionAddress` | `string` | ERC-1155トークンコントラクトのアドレス | -| `items` | `Array<{tokenId: string, quantity: string}>` | 購入するトークンIDと数量の配列。 | -| `onSuccess` | `(txnHash: string) => void` | （オプション）トランザクションが成功した際のコールバック関数 | -| `onError` | `(error: Error) => void` | （オプション）エラー発生時のコールバック関数 | -| `onClose` | `() => void` | （オプション）モーダルが閉じられた際のコールバック関数 | - -## 補足 -このフックは、ERC-1155トークンの購入プロセスを自動化し、以下の作業を簡単にします。 -- 販売コントラクトから価格情報を取得。 -- 支払いオプション（暗号資産、クレジットカードなど）を判定。 -- 適切なトランザクションデータを生成。 -- チェックアウトモーダルの表示と管理。 - -## 非推奨のお知らせ - - - `useERC1155SaleContractPaymentModal`フックは非推奨です。代わりに`useERC1155SaleContractCheckout`をご利用ください。 - \ No newline at end of file diff --git a/ja/sdk/web/guides/checkout.mdx b/ja/sdk/web/guides/checkout.mdx index 37ba76a4..4e3ffe66 100644 --- a/ja/sdk/web/guides/checkout.mdx +++ b/ja/sdk/web/guides/checkout.mdx @@ -55,48 +55,6 @@ Sequence Checkoutを使うと、ユーザーはマーケットプレイスなど セットアップが完了したら、さまざまなユースケースでチェックアウトモーダルを使う方法を見てみましょう。 -## ERC1155トークンでのチェックアウト -ERC1155トークン用の便利なユーティリティ関数があり、チェックアウトモーダルの設定が簡単にできます。 - -以下はサンプル変数を使った設定例です： - -```jsx - import { useERC1155SaleContractCheckout } from "@0xsequence/checkout"; - import { useAccount } from "wagmi"; - - const MyComponent = () => { - const { address: userAddress } = useAccount(); - const { openCheckoutModal } = useERC1155SaleContractCheckout({ - chain: 80002, // chainId of the chain the collectible is on - contractAddress: "0x0327b2f274e04d292e74a06809bcd687c63a4ba4", // address of the contract handling the minting function - wallet: userAddress!, // address of the recipient - collectionAddress: "0x888a322db4b8033bac3ff84412738c096f87f9d0", // address of the collection contract - items: [ - // array of collectibles to purchase - { - tokenId: "0", - quantity: "1", - }, - ], - onSuccess: (txnHash: string) => { - console.log("success!", txnHash); - }, - onError: (error: Error) => { - console.error(error); - }, - }); - - const onClick = () => { - if (!userAddress) { - return; - } - openCheckoutModal(); - }; - - return ; - }; -``` - ## カスタムコントラクト `useSelectPaymentModal`フックを使ってチェックアウトモーダルを開き、設定オブジェクトを渡します。カスタムコントラクトの場合は、コントラクトABIやコールデータのエンコードも指定できます（この例では`ethers`や`viem`の`encodeFunctionData`ユーティリティを使用）。 diff --git a/ja/sdk/web/hooks/useERC1155SaleContractCheckout.mdx b/ja/sdk/web/hooks/useERC1155SaleContractCheckout.mdx deleted file mode 100644 index b9a9c9cb..00000000 --- a/ja/sdk/web/hooks/useERC1155SaleContractCheckout.mdx +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: useERC1155SaleContractCheckout -description: ERC-1155販売コントラクトのチェックアウトを管理するためのフック -sidebarTitle: useERC1155SaleContractCheckout ---- - -## インポート - -```tsx -import { useERC1155SaleContractCheckout } from '@0xsequence/checkout' -``` - -## 使い方 - -```tsx -import { useERC1155SaleContractCheckout } from "@0xsequence/checkout" -import { useAccount } from "wagmi" - -function App() { - const { address: userAddress } = useAccount() - const { openCheckoutModal } = useERC1155SaleContractCheckout({ - chain: 80001, // chainId of the chain the collectible is on - contractAddress: "0x0327b2f274e04d292e74a06809bcd687c63a4ba4", // address of the contract handling the minting function - wallet: userAddress!, // address of the recipient - collectionAddress: "0x888a322db4b8033bac3ff84412738c096f87f9d0", // address of the collection contract - items: [ - // array of collectibles to purchase - { - tokenId: "0", - quantity: "1", - }, - ], - onSuccess: (txnHash: string) => { - console.log("success!", txnHash) - }, - onError: (error: Error) => { - console.error(error) - }, - }) - - const onClick = () => { - if (!userAddress) { - return - } - openCheckoutModal() - } - - return -} -``` - -## 返り値の型: `UseERC1155SaleContractCheckoutReturnType` -このフックは以下のプロパティを持つオブジェクトを返します。 - -```tsx -interface UseERC1155SaleContractCheckoutReturnType { - openCheckoutModal: () => void - closeCheckoutModal: () => void - selectPaymentSettings?: SelectPaymentSettings - isLoading: boolean - isError: boolean -} -``` - -### プロパティ - -#### openCheckoutModal -`() => void` - -設定済みのERC-1155購入でチェックアウトモーダルを開く関数です。 - -#### closeCheckoutModal -`() => void` - -チェックアウトモーダルを閉じる関数です。 - -#### selectPaymentSettings -`SelectPaymentSettings | undefined` - -```tsx -export interface SelectPaymentSettings { - collectibles: Collectible[] - chain: number | string - currencyAddress: string | Hex - price: string - targetContractAddress: string | Hex - txData: Hex - collectionAddress: string | Hex - recipientAddress: string | Hex - approvedSpenderAddress?: string - transactionConfirmations?: number - onSuccess?: (txHash: string) => void - onError?: (error: Error) => void - onClose?: () => void - enableMainCurrencyPayment?: boolean - enableSwapPayments?: boolean - enableTransferFunds?: boolean - creditCardProviders?: string[] - copyrightText?: string - customProviderCallback?: (onSuccess: (txHash: string) => void, onError: (error: Error) => void, onClose: () => void) => void - supplementaryAnalyticsInfo?: SupplementaryAnalyticsInfo -} -``` - -モーダルの現在の支払い設定構成です。 - -#### isLoading -`boolean` - -コントラクトデータがまだ読み込み中かどうか。 - -#### isError -`boolean` - -コントラクトデータの読み込み時にエラーが発生したかどうか。 - -## パラメータ -このフックは、以下のプロパティを持つ設定オブジェクトを受け取ります: - -| パラメータ | 型 | 説明 | -| ------------------- | -------------------------------------------- | ------------------------------ | -| `chain` | `number` | 販売コントラクトがデプロイされているチェーンID | -| `contractAddress` | `string` | ERC-1155販売コントラクトのアドレス | -| `wallet` | `string` | NFTを受け取るウォレットのアドレス | -| `collectionAddress` | `string` | ERC-1155トークンコントラクトのアドレス | -| `items` | `Array<{tokenId: string, quantity: string}>` | 購入するトークンIDと数量の配列。 | -| `onSuccess` | `(txnHash: string) => void` | （オプション）トランザクションが成功した際のコールバック関数 | -| `onError` | `(error: Error) => void` | （オプション）エラー発生時のコールバック関数 | -| `onClose` | `() => void` | （オプション）モーダルが閉じられた際のコールバック関数 | - -## 補足 -このフックは、ERC-1155トークンの購入プロセスを自動化し、以下の作業を簡単にします。 -- 販売コントラクトから価格情報を取得。 -- 支払いオプション（暗号資産、クレジットカードなど）を判定。 -- 適切なトランザクションデータを生成。 -- チェックアウトモーダルの表示と管理。 - -## 非推奨のお知らせ - - - `useERC1155SaleContractPaymentModal`フックは非推奨です。代わりに`useERC1155SaleContractCheckout`をご利用ください。 - \ No newline at end of file diff --git a/ja/sdk/web/wallet-sdk/embedded/guides/checkout.mdx b/ja/sdk/web/wallet-sdk/embedded/guides/checkout.mdx index 4d56fa0d..21a4592e 100644 --- a/ja/sdk/web/wallet-sdk/embedded/guides/checkout.mdx +++ b/ja/sdk/web/wallet-sdk/embedded/guides/checkout.mdx @@ -55,48 +55,6 @@ Sequence Checkoutを使うと、ユーザーはマーケットプレイスなど セットアップが完了したら、さまざまなユースケースでチェックアウトモーダルを使う方法を見てみましょう。 -## ERC1155トークンでのチェックアウト -ERC1155トークン用の便利なユーティリティ関数があり、チェックアウトモーダルの設定が簡単にできます。 - -以下はサンプル変数を使った設定例です： - -```jsx - import { useERC1155SaleContractCheckout } from "@0xsequence/checkout"; - import { useAccount } from "wagmi"; - - const MyComponent = () => { - const { address: userAddress } = useAccount(); - const { openCheckoutModal } = useERC1155SaleContractCheckout({ - chain: 80002, // chainId of the chain the collectible is on - contractAddress: "0x0327b2f274e04d292e74a06809bcd687c63a4ba4", // address of the contract handling the minting function - wallet: userAddress!, // address of the recipient - collectionAddress: "0x888a322db4b8033bac3ff84412738c096f87f9d0", // address of the collection contract - items: [ - // array of collectibles to purchase - { - tokenId: "0", - quantity: "1", - }, - ], - onSuccess: (txnHash: string) => { - console.log("success!", txnHash); - }, - onError: (error: Error) => { - console.error(error); - }, - }); - - const onClick = () => { - if (!userAddress) { - return; - } - openCheckoutModal(); - }; - - return ; - }; -``` - ## カスタムコントラクト `useSelectPaymentModal`フックを使ってチェックアウトモーダルを開き、設定オブジェクトを渡します。カスタムコントラクトの場合は、コントラクトABIやコールデータのエンコードも指定できます（この例では`ethers`や`viem`の`encodeFunctionData`ユーティリティを使用）。 diff --git a/ja/solutions/payments/checkout-sdk.mdx b/ja/solutions/payments/checkout-sdk.mdx index 508446cf..584802d4 100644 --- a/ja/solutions/payments/checkout-sdk.mdx +++ b/ja/solutions/payments/checkout-sdk.mdx @@ -1,7 +1,7 @@ --- -title: "Checkout SDK（NFT向けカード決済）" -description: "@0xsequence/checkout を使って、パートナー（例：Transak、Forte）経由でNFT購入時にクレジット／デビットカード決済を追加できます。" -sidebarTitle: "Checkout SDK" +title: Checkout SDK（NFT向けカード決済） +description: @0xsequence/checkout を使って、パートナー（例：Transak、Forte）経由でNFT購入時にクレジット／デビットカード決済を追加できます。 +sidebarTitle: Checkout SDK --- @@ -43,30 +43,6 @@ export default function App() { } ``` -## 例：ERC-1155の一次販売 - -```tsx -import { useAccount } from 'wagmi' -import { useERC1155SaleContractCheckout } from '@0xsequence/checkout' - -export function BuyButton() { - const { address } = useAccount() - const { openCheckoutModal } = useERC1155SaleContractCheckout({ - chain: 137, // destination chainId - contractAddress: '0xSaleContract', // primary sale contract - collectionAddress: '0xERC1155', // collection - wallet: address!, // recipient - items: [{ tokenId: '1', quantity: '1' }], - // Optional: restrict card providers if your integration requires it - // creditCardProviders: ['transak', 'forte'], - onSuccess: (txHash) => console.log('success', txHash), - onError: (err) => console.error(err), - }) - - return -} -``` - ## 例：カスタムコントラクト呼び出し ```tsx diff --git a/sdk/web/checkout-sdk/hooks/useERC1155SaleContractCheckout.mdx b/sdk/web/checkout-sdk/hooks/useERC1155SaleContractCheckout.mdx deleted file mode 100644 index f2994802..00000000 --- a/sdk/web/checkout-sdk/hooks/useERC1155SaleContractCheckout.mdx +++ /dev/null @@ -1,152 +0,0 @@ ---- - -title: "useERC1155SaleContractCheckout" -description: Hook for managing the ERC-1155 sale contract checkout -sidebarTitle: useERC1155SaleContractCheckout ---- - -## Import - -```tsx -import { useERC1155SaleContractCheckout } from '@0xsequence/checkout' -``` - -## Usage - -```tsx -import { useERC1155SaleContractCheckout } from "@0xsequence/checkout" -import { useAccount } from "wagmi" - -function App() { - const { address: userAddress } = useAccount() - const { openCheckoutModal } = useERC1155SaleContractCheckout({ - chain: 80001, // chainId of the chain the collectible is on - contractAddress: "0x0327b2f274e04d292e74a06809bcd687c63a4ba4", // address of the contract handling the minting function - wallet: userAddress!, // address of the recipient - collectionAddress: "0x888a322db4b8033bac3ff84412738c096f87f9d0", // address of the collection contract - items: [ - // array of collectibles to purchase - { - tokenId: "0", - quantity: "1", - }, - ], - onSuccess: (txnHash: string) => { - console.log("success!", txnHash) - }, - onError: (error: Error) => { - console.error(error) - }, - }) - - const onClick = () => { - if (!userAddress) { - return - } - openCheckoutModal() - } - - return -} -``` - -## Return Type: `UseERC1155SaleContractCheckoutReturnType` - -The hook returns an object with the following properties: - -```tsx -interface UseERC1155SaleContractCheckoutReturnType { - openCheckoutModal: () => void - closeCheckoutModal: () => void - selectPaymentSettings?: SelectPaymentSettings - isLoading: boolean - isError: boolean -} -``` - -### Properties - -#### openCheckoutModal - -`() => void` - -Function to open the checkout modal with the configured ERC-1155 purchase. - -#### closeCheckoutModal - -`() => void` - -Function to close the checkout modal. - -#### selectPaymentSettings - -`SelectPaymentSettings | undefined` - -```tsx -export interface SelectPaymentSettings { - collectibles: Collectible[] - chain: number | string - currencyAddress: string | Hex - price: string - targetContractAddress: string | Hex - txData: Hex - collectionAddress: string | Hex - recipientAddress: string | Hex - approvedSpenderAddress?: string - transactionConfirmations?: number - onSuccess?: (txHash: string) => void - onError?: (error: Error) => void - onClose?: () => void - enableMainCurrencyPayment?: boolean - enableSwapPayments?: boolean - enableTransferFunds?: boolean - creditCardProviders?: string[] - copyrightText?: string - customProviderCallback?: (onSuccess: (txHash: string) => void, onError: (error: Error) => void, onClose: () => void) => void - supplementaryAnalyticsInfo?: SupplementaryAnalyticsInfo -} -``` - -The current payment settings configuration for the modal. - -#### isLoading - -`boolean` - -Whether the contract data is still loading. - -#### isError - -`boolean` - -Whether there was an error loading the contract data. - -## Parameters - -The hook accepts a configuration object with the following properties: - -| Parameter | Type | Description | -| --------- | ---- | ----------- | -| `chain` | `number` | Chain ID where the sale contract is deployed | -| `contractAddress` | `string` | Address of the ERC-1155 sale contract | -| `wallet` | `string` | Address of the wallet that will receive the NFTs | -| `collectionAddress` | `string` | Address of the ERC-1155 token contract | -| `items` | `Array<{tokenId: string, quantity: string}>` | Array of token IDs and quantities to purchase | -| `onSuccess` | `(txnHash: string) => void` | (Optional) Callback function when the transaction is successful | -| `onError` | `(error: Error) => void` | (Optional) Callback function when an error occurs | -| `onClose` | `() => void` | (Optional) Callback function when the modal is closed | - -## Notes - -This hook simplifies the process of purchasing ERC-1155 tokens by automatically: -- Fetching price information from the sale contract -- Determining payment options (crypto, credit card, etc.) -- Generating the proper transaction data -- Opening and managing the checkout modal - -## Deprecation Notice - - -The `useERC1155SaleContractPaymentModal` hook is deprecated. Use `useERC1155SaleContractCheckout` instead. - - diff --git a/sdk/web/wallet-sdk/embedded/guides/checkout.mdx b/sdk/web/wallet-sdk/embedded/guides/checkout.mdx index 330cf75b..199956f2 100644 --- a/sdk/web/wallet-sdk/embedded/guides/checkout.mdx +++ b/sdk/web/wallet-sdk/embedded/guides/checkout.mdx @@ -57,49 +57,6 @@ const App = () => { Now we have the setup done, let's see how to use the checkout modal for different use cases. -## Checkout with an ERC1155 Token - -We have convenient utility functions for ERC1155 tokens that make it easy to configure the checkout modal. - -Here's a configuration with example variables: - -```jsx - import { useERC1155SaleContractCheckout } from "@0xsequence/checkout"; - import { useAccount } from "wagmi"; - - const MyComponent = () => { - const { address: userAddress } = useAccount(); - const { openCheckoutModal } = useERC1155SaleContractCheckout({ - chain: 80002, // chainId of the chain the collectible is on - contractAddress: "0x0327b2f274e04d292e74a06809bcd687c63a4ba4", // address of the contract handling the minting function - wallet: userAddress!, // address of the recipient - collectionAddress: "0x888a322db4b8033bac3ff84412738c096f87f9d0", // address of the collection contract - items: [ - // array of collectibles to purchase - { - tokenId: "0", - quantity: "1", - }, - ], - onSuccess: (txnHash: string) => { - console.log("success!", txnHash); - }, - onError: (error: Error) => { - console.error(error); - }, - }); - - const onClick = () => { - if (!userAddress) { - return; - } - openCheckoutModal(); - }; - - return ; - }; - ``` - ## 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. diff --git a/solutions/payments/checkout-sdk.mdx b/solutions/payments/checkout-sdk.mdx index 7a5012fd..0ea0ad6d 100644 --- a/solutions/payments/checkout-sdk.mdx +++ b/solutions/payments/checkout-sdk.mdx @@ -43,30 +43,6 @@ export default function App() { } ``` -## Example: ERC-1155 primary sale - -```tsx -import { useAccount } from 'wagmi' -import { useERC1155SaleContractCheckout } from '@0xsequence/checkout' - -export function BuyButton() { - const { address } = useAccount() - const { openCheckoutModal } = useERC1155SaleContractCheckout({ - chain: 137, // destination chainId - contractAddress: '0xSaleContract', // primary sale contract - collectionAddress: '0xERC1155', // collection - wallet: address!, // recipient - items: [{ tokenId: '1', quantity: '1' }], - // Optional: restrict card providers if your integration requires it - // creditCardProviders: ['transak', 'forte'], - onSuccess: (txHash) => console.log('success', txHash), - onError: (err) => console.error(err), - }) - - return -} -``` - ## Example: custom contract call ```tsx