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

ParameterTypeDefinition

args.callback?

Function

Function to callback upon txhash, success or failed transfer. Structure of result object passed into callback function:

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

Last updated