path: root/template/users.html.j2

{% extends "common/base.j2" %} {% block head_content %}
<title>{% trans %}GNU Taler for Users{% endtrans %}</title>
<meta
  name="description"
  content="{% trans %}This page explains how to use GNU Taler to make payments.{% endtrans %}"
/>
<meta
  name="og:description"
  content="{% trans %}This page explains how to use GNU Taler to make payments.{% endtrans %}"
/>
{# <meta name="author" content="" /> #}
<script src="{{ url_static('js/group-selection.ts') }}" defer></script>
<link href="{{ url_static('scss/pages/users.scss') }}" rel="stylesheet" />
{% endblock %} {% block body_content %}
<main id="maincontent" class="users-page flex flex-col items-center gap-16">
  <div
    class="section show-on-js flex flex-col items-center justify-center w-max text-center min-h-max h-[60vh] max-h-[42rem]"
  >
    <div
      class="inner flex flex-col items-center justify-center w-max text-center p-12 bg-gray-100 rounded-3xl"
    >
      <h2 class="text-2xl font-semibold mb-3">Select your platform</h2>
      <div class="browser-selection card">
        <a
          href="javascript:selectGroup('android')"
          aria-label="{% trans %}Select instructions for Android{% endtrans %}"
          role="radio"
        >
          <svg
            role="img"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M18.4395 5.5586c-.675 1.1664-1.352 2.3318-2.0274 3.498-.0366-.0155-.0742-.0286-.1113-.043-1.8249-.6957-3.484-.8-4.42-.787-1.8551.0185-3.3544.4643-4.2597.8203-.084-.1494-1.7526-3.021-2.0215-3.4864a1.1451 1.1451 0 0 0-.1406-.1914c-.3312-.364-.9054-.4859-1.379-.203-.475.282-.7136.9361-.3886 1.5019 1.9466 3.3696-.0966-.2158 1.9473 3.3593.0172.031-.4946.2642-1.3926 1.0177C2.8987 12.176.452 14.772 0 18.9902h24c-.119-1.1108-.3686-2.099-.7461-3.0683-.7438-1.9118-1.8435-3.2928-2.7402-4.1836a12.1048 12.1048 0 0 0-2.1309-1.6875c.6594-1.122 1.312-2.2559 1.9649-3.3848.2077-.3615.1886-.7956-.0079-1.1191a1.1001 1.1001 0 0 0-.8515-.5332c-.5225-.0536-.9392.3128-1.0488.5449zm-.0391 8.461c.3944.5926.324 1.3306-.1563 1.6503-.4799.3197-1.188.0985-1.582-.4941-.3944-.5927-.324-1.3307.1563-1.6504.4727-.315 1.1812-.1086 1.582.4941zM7.207 13.5273c.4803.3197.5506 1.0577.1563 1.6504-.394.5926-1.1038.8138-1.584.4941-.48-.3197-.5503-1.0577-.1563-1.6504.4008-.6021 1.1087-.8106 1.584-.4941z"
              fill="#777"
              data-vendor-brand-path-element="android"
            />
          </svg>
        </a>
        <a
          href="javascript:selectGroup('ios')"
          aria-label="{% trans %}Select instructions for iOS{% endtrans %}"
          role="radio"
        >
          <svg
            role="img"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M1.1 6.05C.486 6.05 0 6.53 0 7.13A1.08 1.08 0 0 0 1.1 8.21C1.72 8.21 2.21 7.73 2.21 7.13C2.21 6.53 1.72 6.05 1.1 6.05M8.71 6.07C5.35 6.07 3.25 8.36 3.25 12C3.25 15.67 5.35 17.95 8.71 17.95C12.05 17.95 14.16 15.67 14.16 12C14.16 8.36 12.05 6.07 8.71 6.07M19.55 6.07C17.05 6.07 15.27 7.45 15.27 9.5C15.27 11.13 16.28 12.15 18.4 12.64L19.89 13C21.34 13.33 21.93 13.81 21.93 14.64C21.93 15.6 20.96 16.28 19.58 16.28C18.17 16.28 17.11 15.59 17 14.53H15C15.08 16.65 16.82 17.95 19.46 17.95C22.25 17.95 24 16.58 24 14.4C24 12.69 23 11.72 20.68 11.19L19.35 10.89C17.94 10.55 17.36 10.1 17.36 9.34C17.36 8.38 18.24 7.74 19.54 7.74C20.85 7.74 21.75 8.39 21.85 9.46H23.81C23.76 7.44 22.09 6.07 19.55 6.07M8.71 7.82C10.75 7.82 12.06 9.45 12.06 12C12.06 14.57 10.75 16.2 8.71 16.2C6.65 16.2 5.35 14.57 5.35 12C5.35 9.45 6.65 7.82 8.71 7.82M.111 9.31V17.76H2.1V9.31H.11Z"
              fill="#777"
              data-vendor-brand-path-element="ios"
            />
          </svg>
        </a>
        <a
          href="javascript:selectGroup('firefox')"
          aria-label="{% trans %}Select instructions for Firefox{% endtrans %}"
          role="radio"
        >
          <svg
            id="Assets"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 512 512"
          >
            <path
              d="M190.368 150.591c0.157 0.009 0.079 0.003 0 0zm-57.874-28.933c0.158 0.008 0.079 0.003 0 0zm346.228 44.674c-10.445-25.123-31.6-52.248-48.211-60.82 13.52 26.5 21.345 53.093 24.335 72.935 0 0.04 0.015 0.136 0.047 0.4-27.175-67.732-73.254-95.047-110.886-154.512-1.9-3.008-3.805-6.022-5.661-9.2a73.237 73.237 0 0 1-2.646-4.972 43.757 43.757 0 0 1-3.585-9.5 0.625 0.625 0 0 0-0.546-0.644 0.8 0.8 0 0 0-0.451 0c-0.033 0.011-0.084 0.051-0.119 0.065-0.053 0.02-0.12 0.069-0.176 0.095 0.026-0.036 0.083-0.117 0.1-0.135-53.437 31.3-75.587 86.093-81.282 120.97a128.057 128.057 0 0 0-47.624 12.153 6.144 6.144 0 0 0-3.041 7.63 6.034 6.034 0 0 0 8.192 3.525 116.175 116.175 0 0 1 41.481-10.826c0.468-0.033 0.937-0.062 1.405-0.1a117.624 117.624 0 0 1 5.932-0.211 120.831 120.831 0 0 1 34.491 4.777c0.654 0.192 1.295 0.414 1.946 0.616a120.15 120.15 0 0 1 5.539 1.842 121.852 121.852 0 0 1 3.992 1.564c1.074 0.434 2.148 0.868 3.206 1.331a118.453 118.453 0 0 1 4.9 2.307c0.743 0.368 1.485 0.735 2.217 1.117a120.535 120.535 0 0 1 4.675 2.587 107.785 107.785 0 0 1 2.952 1.776 123.018 123.018 0 0 1 42.028 43.477c-12.833-9.015-35.81-17.918-57.947-14.068 86.441 43.214 63.234 192.027-56.545 186.408a106.7 106.7 0 0 1-31.271-6.031 132.461 132.461 0 0 1-7.059-2.886c-1.356-0.618-2.711-1.243-4.051-1.935-29.349-15.168-53.583-43.833-56.611-78.643 0 0 11.093-41.335 79.433-41.335 7.388 0 28.508-20.614 28.9-26.593-0.09-1.953-41.917-18.59-58.223-34.656-8.714-8.585-12.851-12.723-16.514-15.829a71.7 71.7 0 0 0-6.225-4.7 111.335 111.335 0 0 1-0.675-58.733c-24.687 11.242-43.89 29.011-57.849 44.7h-0.111c-9.528-12.067-8.855-51.873-8.312-60.184-0.114-0.516-7.107 3.63-8.024 4.254a175.21 175.21 0 0 0-23.486 20.12 210.5 210.5 0 0 0-22.443 26.913c0 0.012-0.007 0.025-0.011 0.037 0-0.012 0.007-0.025 0.011-0.038a202.837 202.837 0 0 0-32.244 72.81c-0.058 0.265-2.29 10.054-3.92 22.147a265.794 265.794 0 0 0-0.769 5.651c-0.558 3.636-0.992 7.6-1.42 13.767-0.019 0.239-0.031 0.474-0.048 0.712a591.152 591.152 0 0 0-0.481 7.995c0 0.411-0.025 0.816-0.025 1.227 0 132.709 107.6 240.29 240.324 240.29 118.865 0 217.559-86.288 236.882-199.63 0.407-3.075 0.732-6.168 1.092-9.27 4.777-41.21-0.53-84.525-15.588-120.747zm-164.068 72.1z"
              fill="#777"
              data-vendor-brand-path-element="firefox"
            />
          </svg>
        </a>
        <a
          href="javascript:selectGroup('chrome')"
          aria-label="{% trans %}Select instructions for Chrome{% endtrans %}"
          role="radio"
        >
          <svg
            role="img"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12 0C8.21 0 4.831 1.757 2.632 4.501l3.953 6.848A5.454 5.454 0 0 1 12 6.545h10.691A12 12 0 0 0 12 0zM1.931 5.47A11.943 11.943 0 0 0 0 12c0 6.012 4.42 10.991 10.189 11.864l3.953-6.847a5.45 5.45 0 0 1-6.865-2.29zm13.342 2.166a5.446 5.446 0 0 1 1.45 7.09l.002.001h-.002l-5.344 9.257c.206.01.413.016.621.016 6.627 0 12-5.373 12-12 0-1.54-.29-3.011-.818-4.364zM12 16.364a4.364 4.364 0 1 1 0-8.728 4.364 4.364 0 0 1 0 8.728Z"
              fill="#777"
              data-vendor-brand-path-element="chrome"
            />
          </svg>
        </a>
      </div>
    </div>
  </div>
  <section id="prerequisites" data-is-first-section>
    <div class="step solo">
      <div class="text card bg-gray-100">
        <h2>{% trans %}Prerequisites{% endtrans %}</h2>
        <p>
          {% trans %}
          Here is what you need to get started paying with Taler:
          {% endtrans %}
        </p>
        <ul class="list-disc list-inside">
          <li>
            {% trans %}
            <b>Swiss bank account</b> with an IBAN beginning with "CH";
            {% endtrans %}
          </li>
          <li>
            {% trans %}
            <b>Mobile phone number</b> beginning with "+41" to receive P2P payments, and;
            {% endtrans %}
          </li>
          <li>
            {% trans %}
            <b>Installation</b> of a
            <a
              href="https://wallet.taler.net/"
              target="_blank"
              rel="noopener noreferrer"
              >Taler wallet.</a>
            {% endtrans %}
          </li>
        </ul>
      </div>
    </div>
  </section>
  <section id="select-provider">
    <div class="step graphic-left">
      <div class="text">
        <h2>
          <span class="step-prefix">{% trans %}Step{% endtrans %}</span>
          <span class="step-ctr">&#35;1:</span>
          <span class="step-description">
          {% trans %}Select provider{% endtrans %}
          </span>
        </h2>
        <p>
          {% trans %}
          As a first-time user, you need to add Taler Operations as a
          payment service provider. The easiest way to do so is to scan the QR
          code on the right which will also initiate the withdrawal process.
          {% endtrans %}
        </p>
        <p>
          {% trans %}
          If you already have a payment service provider for the
          "CHF" currency, you can withdraw digital cash by clicking the "add"
          button on the "CHF balance" screen.
          {% endtrans %}
        </p>
      </div>
      <div class="img">
        <img
          src="{{ url_static('images/unsorted/withdraw-qr.svg') }}"
          alt="QR code for 'taler://withdraw-exchange/exchange.taler-ops.ch/'"
          width="350px"
        />
      </div>
    </div>
  </section>
  <section id="enter-amount">
    <div class="step graphic-right">
      <div class="text">
        <h2>
          <span class="step-prefix">{% trans %}Step{% endtrans %}</span>
          <span class="step-ctr">&#35;2:</span>
          <span class="step-description">
            {% trans %}Enter amount{% endtrans %}
          </span>
        </h2>
        <p>
          {% trans %}
          Enter the desired amount to be withdrawn.
          {% endtrans %}
        </p>
        <p>
          {% trans %}
          Afterwards, select "Withdraw" from my bank account.
          {% endtrans %}
        </p>
      </div>
      <div class="img">
        <img
          class="group-android"
          src="{{ url_static('images/screenshots/cta-withdraw-firefox-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-chrome"
          src="{{ url_static('images/screenshots/cta-withdraw-chrome-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-firefox"
          src="{{ url_static('images/screenshots/cta-withdraw-firefox-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-ios"
          src="{{ url_static('images/screenshots/cta-withdraw-ios-latest.png') }}"
          alt=""
          width="350px"
        />
      </div>
    </div>
  </section>
  <section id="accept-terms">
    <div class="step graphic-left">
      <div class="text">
        <h2>
          <span class="step-prefix">{% trans %}Step{% endtrans %}</span>
          <span class="step-ctr">&#35;3:</span>
          <span class="step-description">
          {% trans %}Accept terms{% endtrans %}
          </span>
        </h2>
        <p>
          {% trans %}
          Please read the Terms of Service and accept them.
          {% endtrans %}
        </p>
        <p>
          {% trans %}
          You will only need to do so the first time, or when the terms have been updated.
          {% endtrans %}
        </p>
      </div>
      <div class="img">
        <img
          class="group-android"
          src="{{ url_static('images/screenshots/cta-accept-tos-android-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-chrome"
          src="{{ url_static('images/screenshots/cta-accept-tos-chrome-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-firefox"
          src="{{ url_static('images/screenshots/cta-accept-tos-firefox-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-ios"
          src="{{ url_static('images/screenshots/cta-accept-tos-ios-latest.png') }}"
          alt=""
          width="350px"
        />
      </div>
    </div>
  </section>
  <section id="review-operation">
    <div class="step graphic-right">
      <div class="text">
        <h2>
          <span class="step-prefix">{% trans %}Step{% endtrans %}</span>
          <span class="step-ctr">&#35;4:</span>
          <span class="step-description">
          {% trans %}Review Operation{% endtrans %}
          </span>
        </h2>
        <p>
        {% trans %}
        Review and confirm the operation.
        {% endtrans %}
        </p>
        <p>
          {% trans %}
          Depending on the payment service provider, you may be shown fees.
          {% endtrans %}
        </p>
      </div>
      <div class="img">
        <img
          class="group-android"
          src="{{ url_static('images/screenshots/cta-withdraw-2-android-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-chrome"
          src="{{ url_static('images/screenshots/cta-withdraw-2-chrome-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-firefox"
          src="{{ url_static('images/screenshots/cta-withdraw-2-firefox-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-ios"
          src="{{ url_static('images/screenshots/cta-withdraw-2-ios-latest.png') }}"
          alt=""
          width="350px"
        />
      </div>
    </div>
  </section>
  <section id="wire-transfer">
    <div class="step graphic-left">
      <div class="text">
        <h2>
          <span class="step-prefix">{% trans %}Step{% endtrans %}</span>
          <span class="step-ctr">&#35;5:</span>
          <span class="step-description">
          {% trans %}Wire Transfer{% endtrans %}
          </span>
        </h2>
        <p>
          {% trans %}
          The wallet will show you the subject, target account and amount to transfer.
          {% endtrans %}
        </p>
        <p>
          {% trans %}
          Copy the information into your online banking application
          and wire the funds to the payment service provider.
          {% endtrans %}
        </p>
      </div>
      <div class="img">
        <!-- FIXME: Dialog: "Withdraw screen (no good title!)" -->
        <img
          class="group-android"
          src="{{ url_static('images/screenshots/cta-wire-transfer-1-android-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-chrome"
          src="{{ url_static('images/screenshots/cta-wire-transfer-chrome-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-firefox"
          src="{{ url_static('images/screenshots/cta-wire-transfer-firefox-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-ios"
          src="{{ url_static('images/screenshots/cta-wire-transfer-1-ios-latest.png') }}"
          alt=""
          width="350px"
        />
      </div>
    </div>
  </section>
  <section id="wait-exclamationmark">
    <div class="step graphic-right">
      <div class="text">
        <h2>
          <span class="step-prefix">{% trans %}Step{% endtrans %}</span>
          <span class="step-ctr">&#35;6:</span>
          <span class="step-description">{% trans %}Wait!{% endtrans %}</span>
        </h2>
        <p>
          {% trans %}
          The wallet will automatically receive the digital cash
          once your wire transfer has arrived at the payment service provider.
          {% endtrans %}
        </p>
        <p>
          {% trans %}
          Depending on your bank, this may take a few days. You do
          not need to keep the wallet open.
          {% endtrans %}
        </p>
      </div>
      <div class="img">
        <img
          class="group-android"
          src="{{ url_static('images/screenshots/cta-withdraw-done-android-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-chrome"
          src="{{ url_static('images/screenshots/cta-withdraw-done-chrome-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-firefox"
          src="{{ url_static('images/screenshots/cta-withdraw-done-firefox-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-ios"
          src="{{ url_static('images/screenshots/cta-withdraw-done-ios-latest.png') }}"
          alt=""
          width="350px"
        />
      </div>
    </div>
  </section>
  <section id="shop">
    <div class="step graphic-left">
      <div class="text">
        <h2>
          <span class="step-prefix">{% trans %}Step{% endtrans %}</span>
          <span class="step-ctr">&#35;7:</span>
          <span class="step-description">{% trans %}Shop{% endtrans %}</span>
        </h2>
        <p>
          {% trans %}
          When shopping, the wallet may be launched automatically or
          you may need to click a link, scan a QR code or even select the wallet
          extension manually depending on the context.
          {% endtrans %}
        </p>
        <p>
          {% trans %}
          The QR code scanner button can also be held to manually
          enter a "<code>taler://</code>-URI", for example if you received one
          via text message.
          {% endtrans %}
        </p>
      </div>
      <div class="img">
        <img
          class="group-android"
          src="{{ url_static('images/screenshots/cta-url-entry-android-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-chrome"
          src="{{ url_static('images/screenshots/cta-url-entry-chrome-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-firefox"
          src="{{ url_static('images/screenshots/cta-url-entry-firefox-latest.png') }}"
          alt=""
          width="350px"
        />
        <!-- FIXME: Dialog: "QR code scan on iOS" -->
        <img
          class="group-ios"
          src="{{ url_static('images/unsorted/Screenshot_Withdrawal_Confirmation_1.png') }}"
          alt=""
          width="350px"
        />
      </div>
    </div>
  </section>
  <section id="pay">
    <div class="step graphic-right">
      <div class="text">
        <h2>
          <span class="step-prefix">{% trans %}Step{% endtrans %}</span>
          <span class="step-ctr">&#35;8:</span>
          <span class="step-description">{% trans %}Pay{% endtrans %}</span>
        </h2>
        <p>
          {% trans %} The wallet will show you details about what you are
          buying, including the price and applicable fees. {% endtrans %}
        </p>
        <p>
          {% trans %} Simply press "Pay" to make the payment. {% endtrans %}
        </p>
      </div>
      <div class="img">
        <img
          class="group-android"
          src="{{ url_static('images/screenshots/cta-payment-android-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-chrome"
          src="{{ url_static('images/screenshots/cta-payment-chrome-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-firefox"
          src="{{ url_static('images/screenshots/cta-payment-firefox-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-ios"
          src="{{ url_static('images/screenshots/cta-payment-ios-latest.png') }}"
          alt=""
          width="350px"
        />
      </div>
    </div>
  </section>
  <section id="manage">
    <div class="step graphic-left">
      <div class="text">
        <h2>
          <span class="step-prefix">{% trans %}Step{% endtrans %}</span>
          <span class="step-ctr">&#35;9:</span>
          <span class="step-description">{% trans %}Manage{% endtrans %}</span>
        </h2>
        <p>
          {% trans %} The wallet keeps track of your transaction history. {%
          endtrans %}
        </p>
        <p>
          {% trans %} You can delete transactions, erasing any trace that you
          were the buyer. {% endtrans %}
        </p>
      </div>
      <div class="img">
        <img
          class="group-android"
          src="{{ url_static('images/screenshots/cta-payment-paid-android-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-chrome"
          src="{{ url_static('images/screenshots/cta-payment-paid-chrome-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-firefox"
          src="{{ url_static('images/screenshots/cta-payment-paid-firefox-latest.png') }}"
          alt=""
          width="350px"
        />
        <img
          class="group-ios"
          src="{{ url_static('images/screenshots/cta-payment-paid-ios-latest.png') }}"
          alt=""
          width="350px"
        />
      </div>
    </div>
  </section>
  <section id="faq-link">
    <div class="flex items-center justify-center flex-col">
      <a
        class="button accent"
        href="https://taler.net/{{ url_localized('faq.html') }}"
        target="_blank"
        rel="noopener noreferrer"
        >{% trans %}Frequently Asked Questions{% endtrans %}</a
      >
    </div>
  </section>
</main>
{% endblock body_content %}