updated sections related to checkout

es/sdk/web/checkout-sdk/getting-started.mdx

@@ -52,6 +52,6 @@ sidebarTitle: Primeros pasos
   </Step>
 
   <Step title="Comience a usarlo">
-    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).
   </Step>
 </Steps>

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 (
+    <button onClick={handleCheckout}>
+      Checkout
+    </button>
+  )
+}
+
+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.

ja/sdk/web/checkout-sdk/getting-started.mdx

@@ -52,6 +52,6 @@ sidebarTitle: はじめに
   </Step>
 
   <Step title="使い始める">
-    これで、[useSelectPaymentModal](/sdk/web/checkout-sdk/hooks/useSelectPaymentModal)などのフックが利用できるようになります。
+    これで、[useCreditCardCheckoutModal](/sdk/web/checkout-sdk/hooks/useCreditCardCheckoutModal) のようなフックを使い始めることができます。
   </Step>
 </Steps>

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 (
+    <button onClick={handleCheckout}>
+      Checkout
+    </button>
+  )
+}
+
+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`
+
+クレジットカード決済モーダルの現在の設定構成です。
+
+## 補足
+このフックは、ユーザーがクレジットカードで購入を完了できるクレジットカード決済モーダルを制御するためのメソッドを提供します。

sdk/web/checkout-sdk/getting-started.mdx

@@ -53,6 +53,6 @@ sidebarTitle: Getting Started
     </Step>
 
     <Step title="Start using it">
-        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).
     </Step>
 </Steps>