From 91d7f8360fc9ba11493a3c2e201ec34f2d456948 Mon Sep 17 00:00:00 2001 From: samuelea Date: Wed, 3 Dec 2025 15:01:22 -0500 Subject: [PATCH 1/2] remove mentions of erc 1155 utility hook due to deprecation --- docs.json | 3 - .../hooks/useERC1155SaleContractCheckout.mdx | 142 ---------------- .../wallet-sdk/embedded/guides/checkout.mdx | 136 ++++++---------- es/solutions/payments/checkout-sdk.mdx | 24 --- ja/docs.json | 3 - .../hooks/useERC1155SaleContractCheckout.mdx | 142 ---------------- ja/sdk/web/guides/checkout.mdx | 42 ----- .../hooks/useERC1155SaleContractCheckout.mdx | 142 ---------------- .../wallet-sdk/embedded/guides/checkout.mdx | 136 ++++++---------- ja/solutions/payments/checkout-sdk.mdx | 24 --- .../hooks/useERC1155SaleContractCheckout.mdx | 152 ------------------ .../wallet-sdk/embedded/guides/checkout.mdx | 43 ----- solutions/payments/checkout-sdk.mdx | 24 --- 13 files changed, 94 insertions(+), 919 deletions(-) delete mode 100644 es/sdk/web/checkout-sdk/hooks/useERC1155SaleContractCheckout.mdx delete mode 100644 ja/sdk/web/checkout-sdk/hooks/useERC1155SaleContractCheckout.mdx delete mode 100644 ja/sdk/web/hooks/useERC1155SaleContractCheckout.mdx delete mode 100644 sdk/web/checkout-sdk/hooks/useERC1155SaleContractCheckout.mdx 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..c9eb1d6f 100644 --- a/es/sdk/web/wallet-sdk/embedded/guides/checkout.mdx +++ b/es/sdk/web/wallet-sdk/embedded/guides/checkout.mdx @@ -1,41 +1,41 @@ ---- -title: Modal de Checkout -description: El Modal de Checkout ofrece a los desarrolladores una forma sencilla de implementar pagos con criptomonedas. -sidebarTitle: Modal de Checkout ---- - -Sequence Checkout permite a los usuarios comprar fácilmente un token ERC721 o ERC1155 con un contrato de venta primaria o secundaria, como un marketplace, con las siguientes opciones de pago: -- Comprar con cualquier criptomoneda en el wallet. -- Recibir fondos desde otro wallet a un wallet de Sequence y comprar. -- Pagar usando una tarjeta de crédito o débito, que detectará automáticamente el proveedor correcto según la región, la red y la moneda. -- Pagar con otra criptomoneda en un wallet realizando un swap automático y la compra. - -Contamos con un flujo de checkout integrado que puede aprovechar instalando la librería dedicada `@0xsequence/checkout` y usándola junto con `@0xsequence/connect`. - - - ![](/images/kit/checkout-modal.png) - - - - Para habilitar pagos con tarjeta de crédito en el checkout, por favor, contacte al equipo de Sequence ya que la dirección de su contrato deberá estar permitida (allowlisted) y su organización deberá pasar por un proceso KYB (Know Your Business). Los pagos con tarjeta de crédito solo funcionan en las mainnets de varias redes. - - -# Instalación y configuración -Para integrar la función de checkout, siga estos pasos: - - - - ```bash +--- +title: Modal de Checkout +description: El Modal de Checkout ofrece a los desarrolladores una forma sencilla de implementar pagos con criptomonedas. +sidebarTitle: Modal de Checkout +--- + +Sequence Checkout permite a los usuarios comprar fácilmente un token ERC721 o ERC1155 con un contrato de venta primaria o secundaria, como un marketplace, con las siguientes opciones de pago: +- Comprar con cualquier criptomoneda en el wallet. +- Recibir fondos desde otro wallet a un wallet de Sequence y comprar. +- Pagar usando una tarjeta de crédito o débito, que detectará automáticamente el proveedor correcto según la región, la red y la moneda. +- Pagar con otra criptomoneda en un wallet realizando un swap automático y la compra. + +Contamos con un flujo de checkout integrado que puede aprovechar instalando la librería dedicada `@0xsequence/checkout` y usándola junto con `@0xsequence/connect`. + + + ![](/images/kit/checkout-modal.png) + + + + Para habilitar pagos con tarjeta de crédito en el checkout, por favor, contacte al equipo de Sequence ya que la dirección de su contrato deberá estar permitida (allowlisted) y su organización deberá pasar por un proceso KYB (Know Your Business). Los pagos con tarjeta de crédito solo funcionan en las mainnets de varias redes. + + +# Instalación y configuración +Para integrar la función de checkout, siga estos pasos: + + + + ```bash npm install @0xsequence/checkout # or pnpm install @0xsequence/checkout # or - yarn add @0xsequence/checkout - ``` - - - - ```jsx + yarn add @0xsequence/checkout + ``` + + + + ```jsx import { SequenceCheckoutProvider } from '@0xsequence/checkout' import { SequenceConnect } from '@0xsequence/connect' import { config } from './config' @@ -48,59 +48,17 @@ 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`. - -```tsx +Ahora que hemos realizado la configuración, veamos cómo usar el modal de checkout para diferentes casos de uso. + +## 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`. + +```tsx import { useAccount } from 'wagmi' import { useSelectPaymentModal, type SelectPaymentSettings } from '@0xsequence/checkout' import { toHex } from 'viem' @@ -189,7 +147,7 @@ const MyComponent = () => { } return -} -``` - +} +``` + ¡Felicidades! Ahora sabe cómo usar el Modal de Checkout con Web SDK. \ No newline at end of file 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..4e3ffe66 100644 --- a/ja/sdk/web/wallet-sdk/embedded/guides/checkout.mdx +++ b/ja/sdk/web/wallet-sdk/embedded/guides/checkout.mdx @@ -1,41 +1,41 @@ ---- -title: チェックアウトモーダル -description: チェックアウトモーダルは、暗号資産決済を簡単に実装できる開発者向けの機能です。 -sidebarTitle: チェックアウトモーダル ---- - -Sequence Checkoutを使うと、ユーザーはマーケットプレイスなどの一次・二次販売コントラクトで、ERC721またはERC1155トークンを以下の方法で簡単に購入できます： -- ウォレット内の任意の暗号資産で購入 -- 他のウォレットからSequenceウォレットに資金を受け取り、そのまま購入 -- クレジットカードやデビットカードで支払い（地域・チェーン・通貨ごとに最適なプロバイダーを自動判別） -- ウォレット内の他の暗号資産を自動スワップして購入 - -専用ライブラリ`@0xsequence/checkout`をインストールし、`@0xsequence/connect`と組み合わせて使うことで、統合されたチェックアウトフローを利用できます。 - - - ![](/images/kit/checkout-modal.png) - - - - チェックアウトでクレジットカード決済を有効にするには、Sequenceチームまでご連絡ください。コントラクトアドレスの許可リスト登録と、組織のKYB手続きが必要です。クレジットカード決済は一部ネットワークのメインネットのみ対応しています。 - - -# インストールとセットアップ -チェックアウト機能を統合するには、以下の手順に従ってください： - - - - ```bash +--- +title: チェックアウトモーダル +description: チェックアウトモーダルは、暗号資産決済を簡単に実装できる開発者向けの機能です。 +sidebarTitle: チェックアウトモーダル +--- + +Sequence Checkoutを使うと、ユーザーはマーケットプレイスなどの一次・二次販売コントラクトで、ERC721またはERC1155トークンを以下の方法で簡単に購入できます： +- ウォレット内の任意の暗号資産で購入 +- 他のウォレットからSequenceウォレットに資金を受け取り、そのまま購入 +- クレジットカードやデビットカードで支払い（地域・チェーン・通貨ごとに最適なプロバイダーを自動判別） +- ウォレット内の他の暗号資産を自動スワップして購入 + +専用ライブラリ`@0xsequence/checkout`をインストールし、`@0xsequence/connect`と組み合わせて使うことで、統合されたチェックアウトフローを利用できます。 + + + ![](/images/kit/checkout-modal.png) + + + + チェックアウトでクレジットカード決済を有効にするには、Sequenceチームまでご連絡ください。コントラクトアドレスの許可リスト登録と、組織のKYB手続きが必要です。クレジットカード決済は一部ネットワークのメインネットのみ対応しています。 + + +# インストールとセットアップ +チェックアウト機能を統合するには、以下の手順に従ってください： + + + + ```bash npm install @0xsequence/checkout # or pnpm install @0xsequence/checkout # or - yarn add @0xsequence/checkout - ``` - - - - ```jsx + yarn add @0xsequence/checkout + ``` + + + + ```jsx import { SequenceCheckoutProvider } from '@0xsequence/checkout' import { SequenceConnect } from '@0xsequence/connect' import { config } from './config' @@ -48,59 +48,17 @@ 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`ユーティリティを使用）。 - -```tsx +セットアップが完了したら、さまざまなユースケースでチェックアウトモーダルを使う方法を見てみましょう。 + +## カスタムコントラクト +`useSelectPaymentModal`フックを使ってチェックアウトモーダルを開き、設定オブジェクトを渡します。カスタムコントラクトの場合は、コントラクトABIやコールデータのエンコードも指定できます（この例では`ethers`や`viem`の`encodeFunctionData`ユーティリティを使用）。 + +```tsx import { useAccount } from 'wagmi' import { useSelectPaymentModal, type SelectPaymentSettings } from '@0xsequence/checkout' import { toHex } from 'viem' @@ -189,7 +147,7 @@ const MyComponent = () => { } return -} -``` - +} +``` + おめでとうございます！これでWeb SDKでチェックアウトモーダルを使う方法が習得できました。 \ No newline at end of file diff --git a/ja/solutions/payments/checkout-sdk.mdx b/ja/solutions/payments/checkout-sdk.mdx index 508446cf..46a48368 100644 --- a/ja/solutions/payments/checkout-sdk.mdx +++ b/ja/solutions/payments/checkout-sdk.mdx @@ -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 From b1262daa9590c28c7c0b53112ad71a50b4cba950 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 3 Dec 2025 20:03:00 +0000 Subject: [PATCH 2/2] chore(i18n): update translations [en] Sync file structure, format locales. Branch: 202/merge --- .../wallet-sdk/embedded/guides/checkout.mdx | 96 +++++++++---------- .../wallet-sdk/embedded/guides/checkout.mdx | 96 +++++++++---------- ja/solutions/payments/checkout-sdk.mdx | 6 +- 3 files changed, 99 insertions(+), 99 deletions(-) diff --git a/es/sdk/web/wallet-sdk/embedded/guides/checkout.mdx b/es/sdk/web/wallet-sdk/embedded/guides/checkout.mdx index c9eb1d6f..03ce3abf 100644 --- a/es/sdk/web/wallet-sdk/embedded/guides/checkout.mdx +++ b/es/sdk/web/wallet-sdk/embedded/guides/checkout.mdx @@ -1,41 +1,41 @@ ---- -title: Modal de Checkout -description: El Modal de Checkout ofrece a los desarrolladores una forma sencilla de implementar pagos con criptomonedas. -sidebarTitle: Modal de Checkout ---- - -Sequence Checkout permite a los usuarios comprar fácilmente un token ERC721 o ERC1155 con un contrato de venta primaria o secundaria, como un marketplace, con las siguientes opciones de pago: -- Comprar con cualquier criptomoneda en el wallet. -- Recibir fondos desde otro wallet a un wallet de Sequence y comprar. -- Pagar usando una tarjeta de crédito o débito, que detectará automáticamente el proveedor correcto según la región, la red y la moneda. -- Pagar con otra criptomoneda en un wallet realizando un swap automático y la compra. - -Contamos con un flujo de checkout integrado que puede aprovechar instalando la librería dedicada `@0xsequence/checkout` y usándola junto con `@0xsequence/connect`. - - - ![](/images/kit/checkout-modal.png) - - - - Para habilitar pagos con tarjeta de crédito en el checkout, por favor, contacte al equipo de Sequence ya que la dirección de su contrato deberá estar permitida (allowlisted) y su organización deberá pasar por un proceso KYB (Know Your Business). Los pagos con tarjeta de crédito solo funcionan en las mainnets de varias redes. - - -# Instalación y configuración -Para integrar la función de checkout, siga estos pasos: - - - - ```bash +--- +title: Modal de Checkout +description: El Modal de Checkout ofrece a los desarrolladores una forma sencilla de implementar pagos con criptomonedas. +sidebarTitle: Modal de Checkout +--- + +Sequence Checkout permite a los usuarios comprar fácilmente un token ERC721 o ERC1155 con un contrato de venta primaria o secundaria, como un marketplace, con las siguientes opciones de pago: +- Comprar con cualquier criptomoneda en el wallet. +- Recibir fondos desde otro wallet a un wallet de Sequence y comprar. +- Pagar usando una tarjeta de crédito o débito, que detectará automáticamente el proveedor correcto según la región, la red y la moneda. +- Pagar con otra criptomoneda en un wallet realizando un swap automático y la compra. + +Contamos con un flujo de checkout integrado que puede aprovechar instalando la librería dedicada `@0xsequence/checkout` y usándola junto con `@0xsequence/connect`. + + + ![](/images/kit/checkout-modal.png) + + + + Para habilitar pagos con tarjeta de crédito en el checkout, por favor, contacte al equipo de Sequence ya que la dirección de su contrato deberá estar permitida (allowlisted) y su organización deberá pasar por un proceso KYB (Know Your Business). Los pagos con tarjeta de crédito solo funcionan en las mainnets de varias redes. + + +# Instalación y configuración +Para integrar la función de checkout, siga estos pasos: + + + + ```bash npm install @0xsequence/checkout # or pnpm install @0xsequence/checkout # or - yarn add @0xsequence/checkout - ``` - - - - ```jsx + yarn add @0xsequence/checkout + ``` + + + + ```jsx import { SequenceCheckoutProvider } from '@0xsequence/checkout' import { SequenceConnect } from '@0xsequence/connect' import { config } from './config' @@ -48,17 +48,17 @@ 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. - -## 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`. - -```tsx + } + ``` + + + +Ahora que hemos realizado la configuración, veamos cómo usar el modal de checkout para diferentes casos de uso. + +## 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`. + +```tsx import { useAccount } from 'wagmi' import { useSelectPaymentModal, type SelectPaymentSettings } from '@0xsequence/checkout' import { toHex } from 'viem' @@ -147,7 +147,7 @@ const MyComponent = () => { } return -} -``` - +} +``` + ¡Felicidades! Ahora sabe cómo usar el Modal de Checkout con Web SDK. \ 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 4e3ffe66..21a4592e 100644 --- a/ja/sdk/web/wallet-sdk/embedded/guides/checkout.mdx +++ b/ja/sdk/web/wallet-sdk/embedded/guides/checkout.mdx @@ -1,41 +1,41 @@ ---- -title: チェックアウトモーダル -description: チェックアウトモーダルは、暗号資産決済を簡単に実装できる開発者向けの機能です。 -sidebarTitle: チェックアウトモーダル ---- - -Sequence Checkoutを使うと、ユーザーはマーケットプレイスなどの一次・二次販売コントラクトで、ERC721またはERC1155トークンを以下の方法で簡単に購入できます： -- ウォレット内の任意の暗号資産で購入 -- 他のウォレットからSequenceウォレットに資金を受け取り、そのまま購入 -- クレジットカードやデビットカードで支払い（地域・チェーン・通貨ごとに最適なプロバイダーを自動判別） -- ウォレット内の他の暗号資産を自動スワップして購入 - -専用ライブラリ`@0xsequence/checkout`をインストールし、`@0xsequence/connect`と組み合わせて使うことで、統合されたチェックアウトフローを利用できます。 - - - ![](/images/kit/checkout-modal.png) - - - - チェックアウトでクレジットカード決済を有効にするには、Sequenceチームまでご連絡ください。コントラクトアドレスの許可リスト登録と、組織のKYB手続きが必要です。クレジットカード決済は一部ネットワークのメインネットのみ対応しています。 - - -# インストールとセットアップ -チェックアウト機能を統合するには、以下の手順に従ってください： - - - - ```bash +--- +title: チェックアウトモーダル +description: チェックアウトモーダルは、暗号資産決済を簡単に実装できる開発者向けの機能です。 +sidebarTitle: チェックアウトモーダル +--- + +Sequence Checkoutを使うと、ユーザーはマーケットプレイスなどの一次・二次販売コントラクトで、ERC721またはERC1155トークンを以下の方法で簡単に購入できます： +- ウォレット内の任意の暗号資産で購入 +- 他のウォレットからSequenceウォレットに資金を受け取り、そのまま購入 +- クレジットカードやデビットカードで支払い（地域・チェーン・通貨ごとに最適なプロバイダーを自動判別） +- ウォレット内の他の暗号資産を自動スワップして購入 + +専用ライブラリ`@0xsequence/checkout`をインストールし、`@0xsequence/connect`と組み合わせて使うことで、統合されたチェックアウトフローを利用できます。 + + + ![](/images/kit/checkout-modal.png) + + + + チェックアウトでクレジットカード決済を有効にするには、Sequenceチームまでご連絡ください。コントラクトアドレスの許可リスト登録と、組織のKYB手続きが必要です。クレジットカード決済は一部ネットワークのメインネットのみ対応しています。 + + +# インストールとセットアップ +チェックアウト機能を統合するには、以下の手順に従ってください： + + + + ```bash npm install @0xsequence/checkout # or pnpm install @0xsequence/checkout # or - yarn add @0xsequence/checkout - ``` - - - - ```jsx + yarn add @0xsequence/checkout + ``` + + + + ```jsx import { SequenceCheckoutProvider } from '@0xsequence/checkout' import { SequenceConnect } from '@0xsequence/connect' import { config } from './config' @@ -48,17 +48,17 @@ Sequence Checkoutを使うと、ユーザーはマーケットプレイスなど ) - } - ``` - - - -セットアップが完了したら、さまざまなユースケースでチェックアウトモーダルを使う方法を見てみましょう。 - -## カスタムコントラクト -`useSelectPaymentModal`フックを使ってチェックアウトモーダルを開き、設定オブジェクトを渡します。カスタムコントラクトの場合は、コントラクトABIやコールデータのエンコードも指定できます（この例では`ethers`や`viem`の`encodeFunctionData`ユーティリティを使用）。 - -```tsx + } + ``` + + + +セットアップが完了したら、さまざまなユースケースでチェックアウトモーダルを使う方法を見てみましょう。 + +## カスタムコントラクト +`useSelectPaymentModal`フックを使ってチェックアウトモーダルを開き、設定オブジェクトを渡します。カスタムコントラクトの場合は、コントラクトABIやコールデータのエンコードも指定できます（この例では`ethers`や`viem`の`encodeFunctionData`ユーティリティを使用）。 + +```tsx import { useAccount } from 'wagmi' import { useSelectPaymentModal, type SelectPaymentSettings } from '@0xsequence/checkout' import { toHex } from 'viem' @@ -147,7 +147,7 @@ const MyComponent = () => { } return -} -``` - +} +``` + おめでとうございます！これでWeb SDKでチェックアウトモーダルを使う方法が習得できました。 \ No newline at end of file diff --git a/ja/solutions/payments/checkout-sdk.mdx b/ja/solutions/payments/checkout-sdk.mdx index 46a48368..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 ---