Create the Fees-Included Approximate quote for Buy trade and display the approximated amount the end-user will receive - Applicable only if it's part of your desired flow.
Pass the value the customer specified to spend in the buyAmount Trade Widget parameter and set isBuyAmountWithFees=true (see Supported Trade Widget query parameters).
Redirect your customer to the Trade Widget. See how to correctly embed the Trade Widget.

Example of the flow

Let's take an example of a customer who wants to buy 200 USD worth of Bitcoin with a credit card purchase. We'll go through the example by taking the above mentioned steps.

Here's an example of the Fees-Included cURL API request and response from the Approximate quote endpoint:

curl --location 'https://app-api.coinify.com/partners/your-partner-UUID-here/approximate-quote?sendAmount=-200&sendCurrency=USD&quoteCurrency=BTC&transferInMedium=card&transferOutMedium=blockchain' \
--data ''

{
    "baseAmount": -193.24,
    "baseCurrency": "USD",
    "sendAmount": -200,
    "sendCurrency": "USD",
    "quoteAmount": 0.00307436,
    "quoteCurrency": "BTC",
    "receiveAmount": 0.00287336, //the approximate amount the customer will receive. Usually shown to the end-user before redirection to Trade Widget.
    "receiveCurrency": "BTC",
    "transferIn": {
        "medium": "card",
        "feeAmount": 6.76,
        "currency": "USD"
    },
    "transferOut": {
        "medium": "blockchain",
        "feeAmount": 0.000201,
        "currency": "BTC"
    }
}

In this response example, the approximated amount the end-user will receive is specified as "receiveAmount": 0.00287336

📘
You must omit the - (minus) sign when fetching this value and passing it to the Trade Widget URL in the next step.

Here's the Trade Widget URL example with the sendAmount from the Approximate Quote passed to thebuyAmount on the Trade Widget URL and with isBuyAmountWithFees set to true.

<iframe src="https://trade-ui.coinify.com/widget/?partnerId=24d17a54-81e6-464b-aba8-30935fc0fd3f&buyAmount=200&isBuyAmountWithFees=true...</iframe>

Full example with all the necessary iframe attributes:

<iframe src="https://trade-ui.coinify.com/widget/?partnerId=24d17a54-81e6-464b-aba8-30935fc0fd3f&buyAmount=200&isBuyAmountWithFees=true&fiatCurrencies=USD&cryptoCurrencies=USDC&isBuyAmountFixed=true&transferInMedia=card&transferOutMedia=blockchain" width="100%" height="576px" allow="camera;fullscreen;accelerometer;gyroscope;magnetometer" allowfullscreen></iframe>

Partner ID used in the example is Coinify's own test sandbox account