> For the complete documentation index, see [llms.txt](https://docs.usemeta.fi/react-sdk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usemeta.fi/react-sdk/sdk-reference/checkout.md).

# Checkout

{% hint style="info" %}
This function triggers a modal for the user to confirm the transfer
{% endhint %}

## Description

The checkout function is designed to be the simplest way for your users to purchase items on your website using crypto. Once users complete their purchase, you will receive a webhook at the URL that you configure.

## Details

### Signature

`Checkout(args)`

### Arguments

<table><thead><tr><th width="258">Parameter</th><th width="114">Type</th><th>Definition</th></tr></thead><tbody><tr><td><code>args.callback?</code></td><td>Function</td><td><p>Function to callback upon txhash, success or failed transfer. <br>Structure of result object passed into callback function:</p><pre class="language-json" data-line-numbers><code class="lang-json"><strong>{
</strong><strong>    "status": "TXHASH", // "TXHASH"/"SUCCESS"/"FAILED"
</strong><strong>    "errorMsg": "", 
</strong><strong>    "txHash": "0xec90b7c220b1d9550c202ed7adb7db97be2b8c8b9f422bb2d3c555498d95ef49",
</strong><strong>    "from": "0xb8E46105a6F11E3250837897b3A10450716b28d8",
</strong><strong>    "to": "0xfFEaf294116b610d0cdD4afaAfe861563c72BB76",
</strong><strong>    "amount": "0.1",
</strong><strong>    "currency": Object // type Currency class
</strong><strong>}
</strong></code></pre></td></tr><tr><td><code>args.treasuryAddress</code></td><td>String</td><td>Address to send funds to. This should be your treasury address.</td></tr><tr><td><code>args.cost</code></td><td>String</td><td>Amount to send in <strong>display units</strong> of the currency. So if you want the user to pay 0.5 ETH, pass in '0.5' to this field.</td></tr><tr><td><code>args.currency</code></td><td>asset (class)</td><td>Asset object of the currency you want to accept as the mode of payment. </td></tr><tr><td><code>args.itemDescription</code></td><td>String</td><td>Description of the item that you would like users to be shown on the Checkout screen.</td></tr><tr><td><code>args.webhookMetadata?</code></td><td>String</td><td><p>Metadata you want to be sent along with your webhook. Please validate this data on your webhook notification endpoint before using. Eg. </p><p><code>'{productName:"Crew T-shirt",sku:AX19281BN}'</code></p></td></tr></tbody></table>

### Return Value

None

### Webhook

You can configure a POST Webhook URL in the developer portal that will be invoked once the funds have been transferred to your treasury address.&#x20;

The following is the format of the webhook call body:

```json
{
    "webhookMetadata": "webhookMetadata",  // metadata passed in during function input
    "currencyMetadata": {
        "exchangeRate": 0.005,
        "fiatCurrency": "usd",
        "cryptoCurrency": "eth_eth"
    },
    "value": "1.5",
    "gasFees": "0.005",
    "from": "0x40562Cf2E90f23b3969d782B5c8f134A77069b49",
    "to": "0xfFEaf294106b610d0cdD4afaAfe861563c72BB76",  // your treasury wallet address
}
```

## Example

{% code lineNumbers="true" %}

```jsx
import { useMetafi } from '@metafi/react-sdk';

function App() {
    const { Checkout } = useMetafi();
    
    const checkout = () => {
        Checkout({
            userIdentifier:"12345",
            cost: '0.05',
            currency: assets.eth_eth,
            itemDescription:'Crew T-shirt',
            treasuryAddress:'0x40562Cf2E90f23b3969d782B5c8f134A77069b49',
            webhookMetadata: '{productName:"Crew T-shirt",sku:AX19281BN}',
            callback:(result)=>{
                console.log('callback result',result)
            }
        })
    };

    return (
        <>
            <button onClick={checkout}>Buy T-shirt</button>
        </>
    );
};
```

{% endcode %}