BTCPayServerPlugins/Plugins/BTCPayServer.Plugins.FixedFloat/Views/Shared/FixedFloat/CheckoutPaymentExtension.cshtml

@using BTCPayServer.Plugins.FixedFloat
@using Newtonsoft.Json
@using Newtonsoft.Json.Linq
@inject FixedFloatService FixedFloatService
@{
    var storeId = ((JObject)JObject.Parse(JsonConvert.SerializeObject(Model)))["StoreId"].Value<string>();
    var settings = await FixedFloatService.GetFixedFloatForStore(storeId);
}
@if (settings?.Enabled is true)
{
    <template id="fixed-float-checkout-template">
        <iframe :src="url" style="min-height:600px;width:100%;border:none" allowtransparency="true"></iframe>
    </template>
    <script>
        const markupPercentage = @settings.AmountMarkupPercentage;
        Vue.component("FixedFloatCheckout", {
            template: "#fixed-float-checkout-template",
            props: ["model"],
            computed: {
                url () {
                    return "https://widget.fixedfloat.com/?" +
                        `to=${this.settleMethodId}` + 
                        "&lockReceive=true&ref=fkbyt39c" +
                        `&address=${this.model.btcAddress}` +
                        this.amountQuery;
                },
                currency () {
                    return this.model.paymentMethodId;
                },
                settleMethodId () {
                    return this.currency.endsWith('LightningLike') || this.currency.endsWith('LNURLPay')
                        ? 'BTCLN'
                        : this.currency.replace('_BTCLike', '').replace('_MoneroLike', '').replace('_ZcashLike', '').toUpperCase();
                },
                amountQuery () {
                    return this.model.isUnsetTopUp
                        ? ''
                        : `&lockType=true&hideType=true&lockAmount=true&toAmount=${this.amountDue}`;
                },
                amountDue () {
                    return this.model.btcDue * (1 + (markupPercentage / 100));
                }
            }
        });
    </script>
}