Checkout

This function triggers a modal for the user to confirm the transfer

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

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

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.

The following is the format of the webhook call body:

{
    "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

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>
        </>
    );
};