> ## Documentation Index
> Fetch the complete documentation index at: https://frenglish.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# useSelectPaymentModal

> Hook para abrir el modal de selección de pago

## Importar

```tsx theme={null}
import { useSelectPaymentModal } from '@0xsequence/checkout'
```

## Uso

```tsx theme={null}
import { useSelectPaymentModal } from '@0xsequence/checkout'
import { encodeFunctionData, toHex } from 'viem'
import { useAccount } from 'wagmi'

function App() {
  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: ERC_1155_SALE_CONTRACT, // Your contract ABI
      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: ['sardine', 'transak'],
      transakConfig: {
        contractId: 'your-contract-id',
        apiKey: 'your-api-key'
      },
      copyrightText: 'ⓒ2024 Your Company',
      onSuccess: (txnHash: string) => {
        console.log('success!', txnHash)
      },
      onError: (error: Error) => {
        console.error(error)
      },
      onClose: () => {
        console.log('modal closed!')
      },
      txData: purchaseTransactionData
    })
  }
  
  return (
    <button onClick={handleCheckout}>
      Buy NFT with multiple payment options
    </button>
  )
}
```

## Tipo de retorno: `UseSelectPaymentModalReturnType`

El hook retorna un objeto con las siguientes propiedades:

```tsx theme={null}
type UseSelectPaymentModalReturnType = {
  openSelectPaymentModal: (settings: SelectPaymentSettings) => void
  closeSelectPaymentModal: () => void
  selectPaymentSettings: SelectPaymentSettings | undefined
}
```

### Propiedades

#### openSelectPaymentModal

`(settings: SelectPaymentSettings) => void`

Función para abrir el modal de Selección de Pago con la configuración especificada.

**Parámetros:**

El objeto `settings` puede incluir las siguientes propiedades:

| Parámetro               | Type                                         | Description                                                                               |
| ----------------------- | -------------------------------------------- | ----------------------------------------------------------------------------------------- |
| `collectibles`          | `Array<{tokenId: string, quantity: string}>` | Lista de coleccionables a comprar                                                         |
| `chain`                 | `number`                                     | ID de la red blockchain                                                                   |
| `price`                 | `string`                                     | Precio en la unidad más pequeña de la moneda                                              |
| `targetContractAddress` | `string`                                     | Dirección del contrato con el que interactuar                                             |
| `recipientAddress`      | `string`                                     | Dirección que recibirá los artículos comprados                                            |
| `currencyAddress`       | `string`                                     | Dirección del contrato del token de la moneda                                             |
| `collectionAddress`     | `string`                                     | Dirección del contrato de la colección NFT                                                |
| `creditCardProviders`   | `string[]`                                   | Lista de proveedores de tarjeta de crédito soportados (por ejemplo, 'sardine', 'transak') |
| `transakConfig`         | `object`                                     | Configuración para la integración con Transak                                             |
| `copyrightText`         | `string`                                     | Texto de derechos de autor para mostrar en el modal                                       |
| `onSuccess`             | `(txnHash: string) => void`                  | Callback cuando la transacción es exitosa                                                 |
| `onError`               | `(error: Error) => void`                     | Callback cuando ocurre un error                                                           |
| `onClose`               | `() => void`                                 | Callback cuando se cierra el modal                                                        |
| `txData`                | `string`                                     | Datos de transacción codificados para la compra                                           |

#### closeSelectPaymentModal

`() => void`

Función para cerrar el modal de Selección de Pago.

#### selectPaymentSettings

`SelectPaymentSettings | undefined`

La configuración actual para el modal de Selección de Pago.

## Notas

Este hook proporciona métodos para controlar el modal de Selección de Pago, que permite a los usuarios comprar activos digitales con múltiples opciones de pago. El modal ofrece varios métodos de pago, incluyendo:

* Pagar con criptomonedas desde la wallet del usuario
* Intercambiar tokens para pagar con otra criptomoneda
* Pagar con tarjeta de crédito/débito
* Recibir fondos desde otra wallet