btcpayserver/BTCPayServer/Views/Invoice/Checkout.cshtml

@addTagHelper *, Meziantou.AspNetCore.BundleTagHelpers
@inject BTCPayServer.Services.LanguageService langService
@model PaymentModel
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>BTCPay Invoice</title>

    <bundle name="wwwroot/bundles/checkout-bundle.min.css" />

    <script type="text/javascript">
        var srvModel = @Html.Raw(Json.Serialize(Model));
    </script>

    <bundle name="wwwroot/bundles/checkout-bundle.min.js" />


    @if(Model.CustomCSSLink != null)
    {
        <link href="@Model.CustomCSSLink" rel="stylesheet" />
    }
</head>
<body style="background: #E4E4E4">
    <noscript>
        <center style="padding: 2em">
            <h2>Javascript is currently disabled in your browser.</h2>
            <h5>Please enable Javascript and refresh this page for the best experience.</h5>

            <p>Alternatively, click below to continue to our HTML-only invoice.</p>

            <form action="/invoice-noscript" method="GET">
                <button style="text-decoration: underline; color: blue">Continue to javascript-disabled invoice &gt;</button>
            </form>
        </center>
    </noscript>

    <!--[if lte IE 8]>
    <center style="padding: 2em">
      <form action="/invoice-noscript" method="GET">
        <button style="text-decoration: underline; color: blue">Continue to legacy browser compatible invoice page
        </button>
      </form>
    </center>
    <![endif]-->

    <invoice>
        <div class="no-bounce" id="checkoutCtrl">
            <div class="modal page">
                <div class="modal-dialog open opened enter-purchaser-email" role="document">
                    <div class="modal-content long">
                        <div class="content">
                            <div class="invoice">
                                @Html.Partial("Checkout-Body")
                            </div>
                        </div>
                    </div>
                    <div style="margin-top: 10px; text-align: right;">
                        @* Not working because of nsSeparator: false, keySeparator: false,
                            {{$t("nested.lang")}} >>
                        *@
                        <select class="cmblang reverse invisible" onchange="changeLanguage($(this).val())">
                            @foreach(var lang in langService.GetLanguages())
                            {
                                <option value="@lang.Code">@lang.DisplayName</option>
                            }
                        </select>
                        <script>
                            $(function () {
                                var storeDefaultLang = '@Model.DefaultLang';
                                if (urlParams.lang) {
                                    $(".cmblang").val(urlParams.lang);
                                } else if (storeDefaultLang) {
                                    $(".cmblang").val(storeDefaultLang);
                                }

                                $('select').prettyDropdown({
                                    classic: false,
                                    height: 30,
                                    reverse: true,
                                    hoverIntent: 5000
                                });
                            });
                        </script>
                    </div>
                    <div style="margin-top: 10px; text-align: right;" class="form-text small text-muted">
                        <span>Powered by <a target="_blank" href="https://github.com/btcpayserver/btcpayserver">BTCPay Server</a></span>
                    </div>
                </div>
            </div>
        </div>
    </invoice>
    <script type="text/javascript">
        var storeDefaultLang = '@Model.DefaultLang';
        // initialization
        i18next.init({
            lng: storeDefaultLang,
            fallbackLng: 'en-US',
            nsSeparator: false,
            keySeparator: false,
            resources: {
                'en-US': { translation: locales_en },
                'de-DE': { translation: locales_de },
                'es-ES': { translation: locales_es },
                'ja-JP': { translation: locales_ja },
                'fr-FR': { translation: locales_fr },
                'pt': { translation: locales_pt },
                'pt-BR': { translation: locales_pt_br },
                'nl': { translation: locales_nl },
                'cs-CZ': { translation: locales_cs },
                'is-IS': { translation: locales_is },
                'hr-HR': { translation: locales_hr }
            },
        });

        function changeLanguage(lang) {
            i18next.changeLanguage(lang);
        }

        if (urlParams.lang) {
            changeLanguage(urlParams.lang);
        }
        else if (storeDefaultLang) {
            changeLanguage(storeDefaultLang);
        }

        const i18n = new VueI18next(i18next);

        // TODO: Move all logic from core.js to Vue controller
        Vue.config.ignoredElements = [
            'line-items',
            'low-fee-timeline',
            // Ignoring custom HTML5 elements, eg: bp-spinner
            /^bp-/
        ];
        var checkoutCtrl = new Vue({
            i18n: i18n,
            el: '#checkoutCtrl',
            components: {
                qrcode: VueQr
            },
            data: {
                srvModel: srvModel,
                expiringSoon: false
            }
        });
    </script>
</body>
</html>
Bundling JS and CSS files for Checkout.cshtml Now we'll finally have versioning so when those JS/CSS files update, clients will properly request new bundle 2018-03-03 07:32:51 +01:00			`@addTagHelper *, Meziantou.AspNetCore.BundleTagHelpers`
Can set store default language 2018-03-23 09:27:48 +01:00			`@inject BTCPayServer.Services.LanguageService langService`
Bundling JS and CSS files for Checkout.cshtml Now we'll finally have versioning so when those JS/CSS files update, clients will properly request new bundle 2018-03-03 07:32:51 +01:00			`@model PaymentModel`
Init 2017-09-13 08:47:34 +02:00			`@{`
Adding Vue.js and databinding checkout properties on clientside 2017-10-27 06:46:21 +02:00			`Layout = null;`
Init 2017-09-13 08:47:34 +02:00			`}`
			`<!DOCTYPE html>`
			`<html>`
			`<head>`
Adding Vue.js and databinding checkout properties on clientside 2017-10-27 06:46:21 +02:00			`<meta http-equiv="content-type" content="text/html; charset=UTF-8">`
Cleaning up JS/CSS references on Checkout page 2018-01-30 17:39:58 +01:00
Adding Vue.js and databinding checkout properties on clientside 2017-10-27 06:46:21 +02:00			`<meta charset="utf-8">`
			`<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">`
Put checkout title to BTCPay 2017-12-02 06:13:11 +01:00			`<title>BTCPay Invoice</title>`
Init 2017-09-13 08:47:34 +02:00
Bundling JS and CSS files for Checkout.cshtml Now we'll finally have versioning so when those JS/CSS files update, clients will properly request new bundle 2018-03-03 07:32:51 +01:00			`<bundle name="wwwroot/bundles/checkout-bundle.min.css" />`
Cleaning up JS/CSS references on Checkout page 2018-01-30 17:39:58 +01:00
Adding Vue.js and databinding checkout properties on clientside 2017-10-27 06:46:21 +02:00			`<script type="text/javascript">`
Make rate calculation scriptable 2018-05-03 18:46:52 +02:00			`var srvModel = @Html.Raw(Json.Serialize(Model));`
Adding Vue.js and databinding checkout properties on clientside 2017-10-27 06:46:21 +02:00			`</script>`
Bundling JS and CSS files for Checkout.cshtml Now we'll finally have versioning so when those JS/CSS files update, clients will properly request new bundle 2018-03-03 07:32:51 +01:00
			`<bundle name="wwwroot/bundles/checkout-bundle.min.js" />`
Allow merchant to customize their checkout page 2018-03-27 08:14:50 +02:00

			`@if(Model.CustomCSSLink != null)`
			`{`
			`<link href="@Model.CustomCSSLink" rel="stylesheet" />`
			`}`
Init 2017-09-13 08:47:34 +02:00			`</head>`
			`<body style="background: #E4E4E4">`
Adding Vue.js and databinding checkout properties on clientside 2017-10-27 06:46:21 +02:00			`<noscript>`
			`<center style="padding: 2em">`
			`<h2>Javascript is currently disabled in your browser.</h2>`
			`<h5>Please enable Javascript and refresh this page for the best experience.</h5>`
Init 2017-09-13 08:47:34 +02:00
Adding Vue.js and databinding checkout properties on clientside 2017-10-27 06:46:21 +02:00			`<p>Alternatively, click below to continue to our HTML-only invoice.</p>`
Init 2017-09-13 08:47:34 +02:00
Adding Vue.js and databinding checkout properties on clientside 2017-10-27 06:46:21 +02:00			`<form action="/invoice-noscript" method="GET">`
			`<button style="text-decoration: underline; color: blue">Continue to javascript-disabled invoice ></button>`
			`</form>`
			`</center>`
			`</noscript>`
Init 2017-09-13 08:47:34 +02:00
Adding Vue.js and databinding checkout properties on clientside 2017-10-27 06:46:21 +02:00			`<!--[if lte IE 8]>`
			`<center style="padding: 2em">`
			`<form action="/invoice-noscript" method="GET">`
			`<button style="text-decoration: underline; color: blue">Continue to legacy browser compatible invoice page`
			`</button>`
			`</form>`
			`</center>`
			`<![endif]-->`
Init 2017-09-13 08:47:34 +02:00
Adding Vue.js and databinding checkout properties on clientside 2017-10-27 06:46:21 +02:00			`<invoice>`
			`<div class="no-bounce" id="checkoutCtrl">`
			`<div class="modal page">`
Removing flicker on invoice load 2018-03-23 05:15:54 +01:00			`<div class="modal-dialog open opened enter-purchaser-email" role="document">`
Adding Vue.js and databinding checkout properties on clientside 2017-10-27 06:46:21 +02:00			`<div class="modal-content long">`
			`<div class="content">`
			`<div class="invoice">`
Extracting complex Checkout body structure for easier navigation 2018-03-22 18:08:49 +01:00			`@Html.Partial("Checkout-Body")`
Adding Vue.js and databinding checkout properties on clientside 2017-10-27 06:46:21 +02:00			`</div>`
			`</div>`
			`</div>`
Integrating dropdown for language selection So hard to find good jquery alternative that drops up 2018-03-22 06:07:30 +01:00			`<div style="margin-top: 10px; text-align: right;">`
Translating few items and testing how it works 2018-03-20 20:30:37 +01:00			`@* Not working because of nsSeparator: false, keySeparator: false,`
Bugfix: Pressing enter no longer reloads page when providing email 2018-03-22 06:21:26 +01:00			`{{$t("nested.lang")}} >>`
Translating few items and testing how it works 2018-03-20 20:30:37 +01:00			`*@`
Faster language selection on page load 2018-03-23 05:16:38 +01:00			`<select class="cmblang reverse invisible" onchange="changeLanguage($(this).val())">`
Can set store default language 2018-03-23 09:27:48 +01:00			`@foreach(var lang in langService.GetLanguages())`
			`{`
			`<option value="@lang.Code">@lang.DisplayName</option>`
			`}`
Integrating dropdown for language selection So hard to find good jquery alternative that drops up 2018-03-22 06:07:30 +01:00			`</select>`
			`<script>`
			`$(function () {`
Can set store default language 2018-03-23 09:27:48 +01:00			`var storeDefaultLang = '@Model.DefaultLang';`
Detecting language from querystring 2018-03-23 05:02:53 +01:00			`if (urlParams.lang) {`
			`$(".cmblang").val(urlParams.lang);`
Can set store default language 2018-03-23 09:27:48 +01:00			`} else if (storeDefaultLang) {`
			`$(".cmblang").val(storeDefaultLang);`
Detecting language from querystring 2018-03-23 05:02:53 +01:00			`}`
Integrating dropdown for language selection So hard to find good jquery alternative that drops up 2018-03-22 06:07:30 +01:00
			`$('select').prettyDropdown({`
			`classic: false,`
			`height: 30,`
			`reverse: true,`
			`hoverIntent: 5000`
			`});`
			`});`
			`</script>`
Translating few items and testing how it works 2018-03-20 20:30:37 +01:00			`</div>`
Powered by BTCPay Server 2018-03-27 08:22:48 +02:00			`<div style="margin-top: 10px; text-align: right;" class="form-text small text-muted">`
			`<span>Powered by <a target="_blank" href="https://github.com/btcpayserver/btcpayserver">BTCPay Server</a></span>`
			`</div>`
Adding Vue.js and databinding checkout properties on clientside 2017-10-27 06:46:21 +02:00			`</div>`
			`</div>`
			`</div>`
			`</invoice>`
Refactoring core.js in preparation for bundling Moving Vue registration to body for quick update of page Removing defer dependancy for core.js 2018-03-03 07:32:04 +01:00			`<script type="text/javascript">`
Can set store default language 2018-03-23 09:27:48 +01:00			`var storeDefaultLang = '@Model.DefaultLang';`
Reorganizing file structure for i18n support 2018-03-22 17:12:15 +01:00			`// initialization`
			`i18next.init({`
use full language code 2018-03-23 16:58:37 +01:00			`lng: storeDefaultLang,`
			`fallbackLng: 'en-US',`
Reorganizing file structure for i18n support 2018-03-22 17:12:15 +01:00			`nsSeparator: false,`
			`keySeparator: false,`
			`resources: {`
use full language code 2018-03-23 16:58:37 +01:00			`'en-US': { translation: locales_en },`
			`'de-DE': { translation: locales_de },`
Activate spanish 2018-03-24 06:35:49 +01:00			`'es-ES': { translation: locales_es },`
plug japanese translation 2018-03-24 15:02:41 +01:00			`'ja-JP': { translation: locales_ja },`
Plug portugeuse to language service 2018-03-23 17:04:05 +01:00			`'fr-FR': { translation: locales_fr },`
fix js 2018-04-16 04:38:10 +02:00			`'pt': { translation: locales_pt },`
Plug Dutch to LanguageService 2018-03-23 17:10:19 +01:00			`'pt-BR': { translation: locales_pt_br },`
Czech language support 2018-03-25 17:17:38 +02:00			`'nl': { translation: locales_nl },`
Add Icelandic 2018-03-29 10:19:07 +02:00			`'cs-CZ': { translation: locales_cs },`
fix broken checkout 2018-04-29 17:29:34 +02:00			`'is-IS': { translation: locales_is },`
Update Checkout.cshtml 2018-04-28 18:13:44 +02:00			`'hr-HR': { translation: locales_hr }`
Reorganizing file structure for i18n support 2018-03-22 17:12:15 +01:00			`},`
			`});`

Faster language selection on page load 2018-03-23 05:16:38 +01:00			`function changeLanguage(lang) {`
			`i18next.changeLanguage(lang);`
			`}`

			`if (urlParams.lang) {`
			`changeLanguage(urlParams.lang);`
			`}`
Can set store default language 2018-03-23 09:27:48 +01:00			`else if (storeDefaultLang) {`
			`changeLanguage(storeDefaultLang);`
			`}`
Faster language selection on page load 2018-03-23 05:16:38 +01:00
Reorganizing file structure for i18n support 2018-03-22 17:12:15 +01:00			`const i18n = new VueI18next(i18next);`

Refactoring core.js in preparation for bundling Moving Vue registration to body for quick update of page Removing defer dependancy for core.js 2018-03-03 07:32:04 +01:00			`// TODO: Move all logic from core.js to Vue controller`
			`Vue.config.ignoredElements = [`
			`'line-items',`
			`'low-fee-timeline',`
			`// Ignoring custom HTML5 elements, eg: bp-spinner`
			`/^bp-/`
			`];`
			`var checkoutCtrl = new Vue({`
Bugfixing IExplorer bug Doesn't allow i18n without key:value format 2018-03-22 06:06:56 +01:00			`i18n: i18n,`
Refactoring core.js in preparation for bundling Moving Vue registration to body for quick update of page Removing defer dependancy for core.js 2018-03-03 07:32:04 +01:00			`el: '#checkoutCtrl',`
			`components: {`
			`qrcode: VueQr`
			`},`
			`data: {`
Detecting language from querystring 2018-03-23 05:02:53 +01:00			`srvModel: srvModel,`
			`expiringSoon: false`
Refactoring core.js in preparation for bundling Moving Vue registration to body for quick update of page Removing defer dependancy for core.js 2018-03-03 07:32:04 +01:00			`}`
			`});`
			`</script>`
Init 2017-09-13 08:47:34 +02:00			`</body>`
Adopt dotnet core editorconfig, big reformating 2017-10-27 10:53:04 +02:00			`</html>`