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

@using BTCPayServer.Plugins.SideShift
@using BTCPayServer.Payments
@inject BTCPayServer.Security.ContentSecurityPolicies csp
@inject SideShiftService SideShiftService
@model BTCPayServer.Models.InvoicingModels.CheckoutModel 
@{
    var settings = await SideShiftService.GetSideShiftForInvoice(Model.InvoiceId, Model.StoreId);
    PaymentMethodId preferredTargetPaymentMethodId = null;
    if(!PaymentMethodId.TryParse(settings?.PreferredTargetPaymentMethodId, out var preferredPMI))
    {
        preferredTargetPaymentMethodId = null;
    }
    else
    {
        preferredTargetPaymentMethodId = Model.AvailablePaymentMethods.FirstOrDefault(crypto =>
            crypto.PaymentMethodId == preferredPMI )?.PaymentMethodId;
    }
}
@if (settings?.Enabled is true)
{
    csp.Add("script-src", "https://sideshift.ai");
    csp.Add("script-src", "*.sideshift.ai");
    
    <template id="side-shift-checkout-template">
        <div class="payment-box">
            <p v-html="content"></p>
            <p v-if="!settleMethodId" class="text-danger">Lightning is not supported via Sideshift. Select another payment method first, then come back.</p>
            <button v-if="settleMethodId" type="button" v-on:click="openDialog" class="btn btn-primary rounded-pill w-100">{{$t("Pay with SideShift", {crryptoCode: settleMethodId})}}</button>
        </div>
    </template>
    <script>
        Vue.component("SideShiftCheckout", {
            template: "#side-shift-checkout-template",
            props: ["model"],
            data: function() {
                return {
                    explicitId: "",
                    preferredToCurrency: @Json.Serialize(preferredTargetPaymentMethodId),
                }
            },
            async created () {
                const self = this;
            	setInterval(function() {
            	    if ( self.explicitId === window.ssExplicitId) {
            	        return;
            	    }
            	    self.explicitId = window.ssExplicitId;            	 
                },200)
                
                if(this.preferredToCurrency && this.model.paymentMethodId !== this.preferredToCurrency){
                    if (this.model.onChainWithLnInvoiceFallback && this.model.paymentMethodId === "BTC-CHAIN"){
                       return;
                    }
                    this.$parent.paymentMethodId = this.preferredToCurrency;
                    await this.$parent.fetchData();
                    this.$parent.paymentMethodId = "SideShift";
                }
                
            },
            computed: {
    
                content () {
                    return this.$i18n.i18next.t("conversion_body", this.model).replace(/\n/ig, '<br>');
                },
                currency () {
                    return this.model.paymentMethodId;
                },
                settleMethodId () {
                    
                    const toCurrency = this.currency.toUpperCase();
                    
                    if (toCurrency === "lbtc") {
                        return 'liquid';
                    } else if (toCurrency === "usdt") {
                        return "usdtla";
                    } else if (toCurrency.endsWith('LN') || toCurrency.endsWith('LNURL')) {
                        return null;
                    } else {
                        return toCurrency.replace('-CHAIN', '').replace('_CHAIN', '').toLowerCase();
                    }
                },
                type () {
                    return this.model.isUnsetTopUp
                        ? undefined
                        : 'fixed';
                },
                amountDue () {
                    return this.model.isUnsetTopUp
                        ? undefined
                        : this.model.due * (1 + (@settings.AmountMarkupPercentage / 100));
                }
            },
            methods: {
                openDialog () {
                    if (!this.settleMethodId){
                        return;
                    }
                    window.__SIDESHIFT__ = {
                        parentAffiliateId: "qg0OrfHJV",
                        defaultDepositMethodId: this.explicitId || undefined,
                        defaultSettleMethodId: this.settleMethodId,
                        settleAddress: this.model.address,
                        settleAmount: this.amountDue,
                        type: this.type
                    };
                    console.log(window.__SIDESHIFT__);
                    window.sideshift.show();
                }
            },
            watch: {
                explicitId (val) {
                    this.openDialog();
                }
            }
        });
    </script>
    <script src="https://sideshift.ai/static/js/main.js" defer></script>
}