btcpayserver/BTCPayServer/Views/Invoice/Checkout-Body.cshtml

@model PaymentModel

<div class="top-header">
    <div class="header">
        <div class="header__icon">
            @if (Model.CustomLogoLink != null)
            {
                <img class="header__icon__img" src="@Model.CustomLogoLink" height="40">
            }
            else
            {
                <img class="header__icon__img" src="~/img/logo-white.png" height="40">
            }
        </div>
    </div>
    <div class="timer-row">
        <div class="timer-row__progress-bar" style="width: 0%;"></div>
        <div class="timer-row__spinner">
            <partial name="Checkout-Spinner" />
        </div>
        <div class="timer-row__message">
            <span v-if="srvModel.status === 'expired' || srvModel.status === 'invalid'">
                {{$t("Invoice expired")}}
            </span>
            <span v-else-if="expiringSoon">
                {{$t("Invoice expiring soon...")}}
            </span>
            <span v-else>
                {{$t("Awaiting Payment...")}}
            </span>
        </div>
        <div class="timer-row__time-left">@Model.TimeLeft</div>
    </div>
</div>
<div class="order-details">
    <div class="currency-selection">
        <div class="single-item-order__left">
            <div style="font-weight: 600;">
                {{$t("Pay with")}}
            </div>
        </div>
        <div class="single-item-order__right">
            @if (Model.AvailableCryptos.Count > 1)
            {
                <div class="payment__currencies cursorPointer" onclick="openPaymentMethodDialog()">
                    <img v-bind:src="srvModel.cryptoImage" />
                    <span class="clickable_underline">{{srvModel.paymentMethodName}} ({{srvModel.cryptoCode}})</span>
                    <span v-show="srvModel.isLightning">&#9889;</span>
                    <span class="clickable_indicator fa fa-angle-right"></span>
                </div>
                <div id="vexPopupDialog">
                    <ul class="vexmenu">
                        @foreach (var crypto in Model.AvailableCryptos)
                        {
                            <li class="vexmenuitem">
                                <a href="@crypto.Link" onclick="return closePaymentMethodDialog('@crypto.PaymentMethodId');">
                                    <img alt="@crypto.PaymentMethodName" src="@crypto.CryptoImage" />
                                    @crypto.PaymentMethodName
                                    @(crypto.IsLightning ? Html.Raw("&#9889;") : null)
                                    <span>@crypto.CryptoCode</span>
                                </a>
                            </li>
                        }
                    </ul>
                </div>
            }
            else
            {
                <div class="payment__currencies">
                    <img v-bind:src="srvModel.cryptoImage" />
                    <span>{{srvModel.paymentMethodName}} ({{srvModel.cryptoCode}})</span>
                    <span v-show="srvModel.isLightning">&#9889;</span>
                </div>

            }
            <div class="payment__spinner">
                <partial name="Checkout-Spinner" />
            </div>
        </div>
    </div>

    <div class="single-item-order buyerTotalLine">
        <div class="single-item-order__left">
            <div class="single-item-order__left__name">
                {{ srvModel.storeName }}
            </div>
            <div class="single-item-order__left__description">
                {{ srvModel.itemDesc }}
            </div>
        </div>
        <div class="single-item-order__right">
            <div class="single-item-order__right__btc-price" v-if="srvModel.status === 'paid'">
                <span>{{ srvModel.btcPaid }} {{ srvModel.cryptoCode }}</span>
            </div>
            <div class="single-item-order__right__btc-price" v-else>
                <span>{{ srvModel.btcDue }} {{ srvModel.cryptoCode }}</span>
            </div>

            <div class="single-item-order__right__ex-rate" v-if="srvModel.orderAmountFiat">
                1 {{ srvModel.cryptoCode }} = {{ srvModel.rate }}
            </div>
        </div>

        <span class="fa fa-angle-double-down"></span>
        <span class="fa fa-angle-double-up"></span>
    </div>
    <line-items>
        <div class="line-items">
            <div class="line-items__item">
                <div class="line-items__item__label">{{$t("Order Amount")}}</div>
                <div class="line-items__item__value">{{srvModel.orderAmount}} {{ srvModel.cryptoCode }}</div>
            </div>
            <div class="line-items__item line-items_fiatvalue" v-if="srvModel.orderAmountFiat">
                <div class="line-items__item__label">&nbsp;</div>
                <div class="line-items__item__value single-item-order__right__ex-rate">
                    {{srvModel.orderAmountFiat}}
                </div>
            </div>
            <div class="line-items__item">
                <div class="line-items__item__label">
                    <span>{{$t("Network Cost")}}</span>
                </div>
                <div class="line-items__item__value">
                    <span v-if="srvModel.IsMultiCurrency">
                        {{ srvModel.networkFee }} {{ srvModel.cryptoCode }}
                    </span>
                    <span v-else>
                        {{$t("txCount", {count: srvModel.txCount})}} x {{ srvModel.networkFee }} {{ srvModel.cryptoCode }}
                    </span>
                </div>
            </div>
            <div class="line-items__item">
                <div class="line-items__item__label">
                    <span>{{$t("Already Paid")}}</span>
                </div>
                <div class="line-items__item__value">-{{srvModel.btcPaid }} {{ srvModel.cryptoCode }}</div>
            </div>
            <div class="line-items__item line-items__item--total">
                <div class="line-items__item__label">{{$t("Due")}}</div>
                <div class="line-items__item__value">{{srvModel.btcDue}} {{ srvModel.cryptoCode }}</div>
            </div>
        </div>
    </line-items>
    <div class="payment-tabs">
        <div class="payment-tabs__tab active" id="scan-tab">
            <span>{{$t("Scan")}}</span>
        </div>
        <div class="payment-tabs__tab" id="copy-tab">
            <span>{{$t("Copy")}}</span>
        </div>
        @if (Model.AllowCoinConversion)
        {
            <div class="payment-tabs__tab" id="altcoins-tab">
                <span>{{$t("Conversion")}}</span>
            </div>
            <div id="tabsSlider" class="payment-tabs__slider three-tabs"></div>
        }
        else
        {
            <div id="tabsSlider" class="payment-tabs__slider"></div>
        }
    </div>
</div>

<div class="payment-box">
    <div class="bp-view payment manual-flow enter-contact-email active" id="emailAddressView">
        <form class="manual__step-one refund-address-form contact-email-form" id="emailAddressForm" name="emailAddressForm" novalidate="">
            <div class="manual__step-one__header">
                <span>{{$t("Contact and Refund Email")}}</span>
            </div>
            <div class="manual__step-one__instructions">
                <span class="initial-label">
                    <span>{{$t("Contact_Body")}}</span>
                </span>
                <span class="submission-error-label">{{$t("Please enter a valid email address")}}</span>
            </div>
            <div class="input-wrapper">
                <input class="bp-input email-input ng-pristine ng-invalid ng-touched" id="emailAddressFormInput" v-bind:placeholder="$t('Your email')" type="email">
                <bp-loading-button>
                    <button type="submit" class="action-button" style="margin-top: 15px;">
                        <span class="button-text">{{$t("Continue")}}</span>
                        <div class="loader-wrapper">
                            <partial name="Checkout-Spinner" />
                        </div>
                    </button>
                </bp-loading-button>
            </div>
        </form>
    </div>
    <div class="bp-view payment scan" id="scan">
        <div class="payment__scan">
            <img v-bind:src="srvModel.cryptoImage" class="qr_currency_icon" />
            <qrcode v-bind:val="srvModel.invoiceBitcoinUrlQR" v-bind:size="256" bg-color="#f5f5f7" fg-color="#000">
            </qrcode>
        </div>
        <div class="payment__details__instruction__open-wallet">
            <a class="payment__details__instruction__open-wallet__btn action-button" v-bind:href="srvModel.invoiceBitcoinUrl">
                <span>{{$t("Open in wallet")}}</span>
            </a>
        </div>
    </div>

    <div class="bp-view payment manual-flow" id="copy">
        <div class="manual__step-two__instructions">
            <span i18n="">{{$t("CompletePay_Body", srvModel)}}</span>
        </div>
        <div class="copyLabelPopup">
            <span>{{$t("Copied")}}</span>
        </div>
        <nav v-if="srvModel.isLightning" class="copyBox">
            <div class="copySectionBox bottomBorder">
                <label>{{$t("BOLT 11 Invoice")}}</label>
                <div class="inputWithIcon _copyInput">
                    <input type="text" class="checkoutTextbox" v-bind:value="srvModel.btcAddress" readonly="readonly" />
                    <img v-bind:src="srvModel.cryptoImage" />
                </div>
            </div>
            <div class="separatorGem"></div>
            <div class="copySectionBox">
                <label>{{$t("Node Info")}}</label>
                <div class="inputWithIcon _copyInput">
                    <input type="text" class="checkoutTextbox" v-bind:value="srvModel.peerInfo" readonly="readonly" />
                    <img v-bind:src="srvModel.cryptoImage" />
                </div>
            </div>
        </nav>
        <nav v-else class="copyBox">
            <div class="copySectionBox bottomBorder">
                <label>{{$t("Amount")}}</label>
                <div class="copyAmountText copy-cursor _copySpan">
                    <span>{{srvModel.btcDue}}</span> {{ srvModel.cryptoCode }}
                </div>
            </div>
            <div class="separatorGem"></div>
            <div class="copySectionBox">
                <label>{{$t("Address")}}</label>
                <div class="inputWithIcon _copyInput">
                    <input type="text" class="checkoutTextbox" v-bind:value="srvModel.btcAddress" readonly="readonly" />
                    <img v-bind:src="srvModel.cryptoImage" />
                </div>
            </div>
        </nav>
    </div>
    @if (Model.AllowCoinConversion)
    {
        <div id="altcoins" class="bp-view payment manual-flow">
            <nav v-if="srvModel.isLightning">
                <div class="manual__step-two__instructions">
                    <span>
                        {{$t("ConversionTab_Lightning")}}
                    </span>
                </div>
            </nav>
            <nav v-else>
                <div class="manual__step-two__instructions">
                    <span>
                        {{$t("ConversionTab_BodyTop", srvModel)}}
                        <br /><br />
                        {{$t("ConversionTab_BodyDesc", srvModel)}}
                    </span>
                </div>
                <center>
                    <script>function shapeshift_click(a, e) { e.preventDefault(); var link = a.href; var shapeshiftWindow = window.open(link, '1418115287605', 'width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=0,left=0,top=0'); shapeshiftWindow.focus(); return false; }</script>
                    <a onclick="shapeshift_click(this, event);" v-bind:href="srvModel.shapeshiftUrl">
                        <img src="https://shapeshift.io/images/shifty/xs_light_altcoins.png" class="ss-button">
                    </a>

                    @*Changelly doesn't have TO_AMOUNT support so we can't include it
                            <script type="text/javascript">function open_widget(a, e) { e.preventDefault(); var link = a.href; var changellyWindow = window.open(link, 'Changelly', 'width=600,height=470,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=0,left=0,top=0'); changellyWindow.focus(); return false; }</script>
                        <a onclick="open_widget(this, event);" href="https://changelly.com/widget/v1?auth=email&from=DASH&to=BTC&address=&amount=1&merchant_id=&ref_id=">
                            <img src="https://changelly.com/pay_button_pay_with.png" alt="Changelly" />
                        </a>*@
                </center>
            </nav>
        </div>
    }

    <div class="bp-view pad" id="paid">
        <div class="status-block">
            <div class="success-block">
                <div class="status-icon">
                    <div class="status-icon__wrapper">
                        <div class="inner-wrapper">
                            <div class="status-icon__wrapper__icon">
                                <img src="~/imlegacy/checkmark.svg">
                            </div>
                            <div class="status-icon__wrapper__outline"></div>
                        </div>
                    </div>
                </div>
                <div class="success-message">{{$t("This invoice has been paid")}}</div>
                <a class="action-button" :href="srvModel.merchantRefLink" v-show="srvModel.merchantRefLink">
                    <span>{{$t("Return to StoreName", srvModel)}}</span>
                </a>
            </div>
        </div>
        <div class="button-wrapper refund-address-form-container" id="refund-overpayment-button">
        </div>
    </div>

    <div class="bp-view expired" id="archived">
        <div class="expired-icon">
            <img src="~/imlegacy/archived.svg">
        </div>
        <div class="archived__message">
            <div class="archived__message__header">
                <span>{{$t("This invoice has been archived")}}</span>
            </div>
            <div>
                <span>{{$t("Archived_Body")}}</span>
            </div>
        </div>
    </div>

    <div class="bp-view expired" id="expired">
        <div>
            <div class="expired__body">
                <div class="expired__header">{{$t("What happened?")}}</div>
                <div class="expired__text" i18n="">
                    {{$t("InvoiceExpired_Body_1", {storeName: srvModel.storeName, maxTimeMinutes: @Model.MaxTimeMinutes})}}
                </div>
                <div class="expired__text">
                    {{$t("InvoiceExpired_Body_2")}}
                </div>
                <div class="expired__text">
                    {{$t("InvoiceExpired_Body_3")}}
                </div>
                <div class="expired__text expired__text__smaller">
                    <span class="expired__text__bullet">{{$t("Invoice ID")}}</span>:
                    {{srvModel.invoiceId}}
                    <br />
                    <span class="expired__text__bullet">{{$t("Order ID")}}</span>:
                    {{srvModel.orderId}}
                </div>
            </div>
            <a class="action-button" :href="srvModel.merchantRefLink" v-show="srvModel.merchantRefLink"
               style="margin-top: 20px;">
                <span>{{$t("Return to StoreName", srvModel)}}</span>
            </a>
        </div>
    </div>
</div>