From 91ea334cf4033a81600605e9ce7103b3e7b73afb Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Thu, 14 Sep 2023 14:29:05 +0200
Subject: [PATCH] Add payment widget to home page

---
 res/static/img/payment_providers/Voucher.svg  | 59 ++++++++++++
 res/static/img/payment_providers/applepay.svg |  1 +
 .../img/payment_providers/bancontact.svg      | 15 +++
 .../img/payment_providers/banktransfer.svg    |  1 +
 res/static/img/payment_providers/belfius.svg  |  1 +
 .../img/payment_providers/creditcard.svg      |  1 +
 .../img/payment_providers/directdebit.svg     |  1 +
 res/static/img/payment_providers/eps.svg      |  1 +
 res/static/img/payment_providers/giftcard.svg |  1 +
 res/static/img/payment_providers/giropay.svg  |  1 +
 res/static/img/payment_providers/ideal.svg    | 12 +++
 res/static/img/payment_providers/in3.svg      | 14 +++
 res/static/img/payment_providers/kbc.svg      |  1 +
 res/static/img/payment_providers/klarna.svg   |  5 +
 res/static/img/payment_providers/mybank.svg   | 10 ++
 res/static/img/payment_providers/paypal.svg   |  1 +
 .../img/payment_providers/paysafecard.svg     |  1 +
 res/static/img/payment_providers/postepay.svg |  4 +
 .../img/payment_providers/przelewy24.svg      |  1 +
 res/static/img/payment_providers/sofort.svg   |  5 +
 res/static/style/layout.css                   | 27 ++++--
 res/template/fragments/page_wrap.html         |  2 +
 svelte/src/home_page/ForCreators.svelte       | 71 +++++++++-----
 svelte/src/home_page/HomePage.svelte          | 10 +-
 svelte/src/layout/Footer.svelte               | 10 --
 svelte/src/user_home/DepositCredit.svelte     |  9 +-
 svelte/src/user_home/MollieDeposit.svelte     | 80 +++++++++++++---
 svelte/src/user_home/Subscription.svelte      | 13 ++-
 webcontroller/user_account.go                 | 95 +++++++++++++------
 29 files changed, 359 insertions(+), 94 deletions(-)
 create mode 100644 res/static/img/payment_providers/Voucher.svg
 create mode 100644 res/static/img/payment_providers/applepay.svg
 create mode 100644 res/static/img/payment_providers/bancontact.svg
 create mode 100644 res/static/img/payment_providers/banktransfer.svg
 create mode 100644 res/static/img/payment_providers/belfius.svg
 create mode 100644 res/static/img/payment_providers/creditcard.svg
 create mode 100644 res/static/img/payment_providers/directdebit.svg
 create mode 100644 res/static/img/payment_providers/eps.svg
 create mode 100644 res/static/img/payment_providers/giftcard.svg
 create mode 100644 res/static/img/payment_providers/giropay.svg
 create mode 100644 res/static/img/payment_providers/ideal.svg
 create mode 100644 res/static/img/payment_providers/in3.svg
 create mode 100644 res/static/img/payment_providers/kbc.svg
 create mode 100644 res/static/img/payment_providers/klarna.svg
 create mode 100644 res/static/img/payment_providers/mybank.svg
 create mode 100644 res/static/img/payment_providers/paypal.svg
 create mode 100644 res/static/img/payment_providers/paysafecard.svg
 create mode 100644 res/static/img/payment_providers/postepay.svg
 create mode 100644 res/static/img/payment_providers/przelewy24.svg
 create mode 100644 res/static/img/payment_providers/sofort.svg

diff --git a/res/static/img/payment_providers/Voucher.svg b/res/static/img/payment_providers/Voucher.svg
new file mode 100644
index 0000000..d04256e
--- /dev/null
+++ b/res/static/img/payment_providers/Voucher.svg
@@ -0,0 +1,59 @@
+<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="24" rx="4" fill="#FBB427"/>
+<g filter="url(#filter0_d)">
+<path d="M4.34066 11.5804H12.382C12.5702 11.5804 12.7228 11.4279 12.7228 11.2397V10.5028C12.7228 10.3146 12.5702 10.162 12.382 10.162H4.34066C4.15247 10.162 3.99992 10.3146 3.99992 10.5028V11.2397C3.99992 11.4279 4.15247 11.5804 4.34066 11.5804Z" fill="white"/>
+</g>
+<g filter="url(#filter1_d)">
+<path d="M4.80165 16.5059H11.9211C12.1093 16.5059 12.2618 16.3534 12.2618 16.1652V11.1871H4.46092V16.1652C4.46092 16.3534 4.61347 16.5059 4.80165 16.5059Z" fill="white"/>
+</g>
+<path d="M12.2618 11.5804H4.46092V12.006H12.2618V11.5804Z" fill="#FBB427"/>
+<path d="M8.05786 16.5059L8.05786 10.162L7.63235 10.162L7.63235 16.5059L8.05786 16.5059Z" fill="#FBB427"/>
+<path d="M9.15442 16.5059L9.15442 10.162L8.72891 10.162L8.72891 16.5059L9.15442 16.5059Z" fill="#FBB427"/>
+<path d="M8.36129 10.162C8.30691 10.162 8.25516 10.1388 8.21954 10.0972C8.18391 10.0563 8.16779 10.0019 8.17566 9.94829C8.17979 9.92016 8.59904 7.16205 10.7988 7.16205C11.7678 7.16205 12.1116 7.68555 12.1116 8.13367C12.1116 8.97591 10.948 10.162 8.36129 10.162ZM10.7988 7.53705C9.25678 7.53705 8.73104 9.18141 8.59041 9.78329C10.645 9.71954 11.7366 8.80229 11.7366 8.13367C11.7366 7.96717 11.6665 7.82992 11.5289 7.7268C11.3639 7.60267 11.1111 7.53705 10.7988 7.53705Z" fill="white"/>
+<path d="M8.36169 10.162C5.77495 10.162 4.61133 8.97591 4.61133 8.13367C4.61133 7.85092 4.73845 7.59967 4.9687 7.4268C5.19933 7.25355 5.5297 7.16205 5.9242 7.16205C8.12394 7.16205 8.54318 9.92016 8.54731 9.94829C8.55518 10.0023 8.53906 10.0563 8.50343 10.0972C8.46781 10.1388 8.41606 10.162 8.36169 10.162ZM5.9242 7.53705C5.34557 7.53705 4.98633 7.76542 4.98633 8.13367C4.98633 8.80267 6.0787 9.71991 8.13444 9.78366C7.99831 9.17804 7.48569 7.53705 5.9242 7.53705Z" fill="white"/>
+<line x1="15.5282" y1="2.5" x2="15.5282" y2="21.168" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="4 4"/>
+<g filter="url(#filter2_d)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.0001 8.01114C27.0001 7.49547 26.6057 7.0448 26.0916 7.0844C26.0373 7.08858 25.9849 7.09421 25.936 7.10159C24.429 7.32904 24.2865 10.8347 24.308 12.5522C24.3146 13.0787 24.7489 13.4864 25.2754 13.4864H26.0001C26.5524 13.4864 27.0001 13.0387 27.0001 12.4864V8.01114ZM27.0001 14.0407C27.0001 13.7346 26.752 13.4865 26.4459 13.4865C26.1577 13.4865 25.9176 13.7074 25.8936 13.9946L25.7275 15.9885C25.6965 16.3602 25.9898 16.6789 26.3627 16.6789C26.7147 16.6789 27.0001 16.3935 27.0001 16.0415V14.0407Z" fill="white"/>
+</g>
+<g filter="url(#filter3_d)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.3986 7.55912C21.3986 7.24432 21.1434 6.98914 20.8286 6.98914C20.5138 6.98914 20.2586 7.24432 20.2586 7.55912V9.55405C20.2586 9.71145 20.131 9.83904 19.9736 9.83904C19.8162 9.83904 19.6886 9.71145 19.6886 9.55405V7.55915C19.6886 7.24434 19.4334 6.98914 19.1186 6.98914C18.8038 6.98914 18.5486 7.24434 18.5486 7.55915V9.94522C18.5486 10.0626 18.5688 10.1753 18.606 10.2799C18.7092 10.6679 18.9455 11.0017 19.263 11.2294C19.7225 11.559 20.2067 12.0169 20.1784 12.5817L20.0163 15.825C19.993 16.2896 20.3634 16.6789 20.8286 16.6789C21.2937 16.6789 21.6641 16.2895 21.6408 15.825L21.4787 12.5817C21.4504 12.0169 21.9347 11.559 22.3941 11.2294C22.7117 11.0017 22.948 10.6678 23.0512 10.2797C23.0883 10.1751 23.1085 10.0625 23.1085 9.94522V9.84537L23.1085 9.83906C23.1085 9.83905 23.1085 9.83905 23.1085 9.83904C23.1085 9.83904 23.1085 9.83903 23.1085 9.83903V7.55911C23.1085 7.24432 22.8533 6.98914 22.5385 6.98914C22.2237 6.98914 21.9685 7.24432 21.9685 7.55911V9.55405C21.9685 9.71145 21.8409 9.83904 21.6835 9.83904C21.5261 9.83904 21.3986 9.71145 21.3986 9.55405V7.55912Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d" x="2.99988" y="10.162" width="10.7229" height="3.41835" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter1_d" x="3.46094" y="11.1871" width="9.80092" height="7.31881" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter2_d" x="23.3062" y="7.08197" width="4.69398" height="11.5969" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter3_d" x="17.5486" y="6.98914" width="6.55991" height="11.6898" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/res/static/img/payment_providers/applepay.svg b/res/static/img/payment_providers/applepay.svg
new file mode 100644
index 0000000..38e14ee
--- /dev/null
+++ b/res/static/img/payment_providers/applepay.svg
@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 32 24" width="32" xmlns="http://www.w3.org/2000/svg"><path d="m4.12903.5h23.74197c1.9991 0 3.629 1.63976 3.629 3.67391v15.65219c0 2.0341-1.6299 3.6739-3.629 3.6739h-23.74197c-1.99917 0-3.62903-1.6398-3.62903-3.6739v-15.65219c0-2.03415 1.62986-3.67391 3.62903-3.67391z" fill="#fff" stroke="#000"/><path clip-rule="evenodd" d="m8.66996 8.97799c.255-.317.427-.743.381-1.178-.371.018-.824.245-1.086.562-.236.272-.444.716-.39 1.133.417.036.833-.209 1.096-.517zm.376.599c-.605-.037-1.12.343-1.409.343s-.731-.325-1.21-.316c-.623.009-1.201.36-1.517.92101-.65 1.12-.172 2.783.46 3.696.308.452.678.949 1.165.931.46-.018.642-.298 1.202-.298s.722.298 1.21.29c.505-.01.822-.453 1.12904-.905.352-.515.496-1.012.505-1.039-.009-.01-.97504-.38-.98404-1.491-.01-.93.75904-1.373.79504-1.4-.43404-.64201-1.11104-.71401-1.34604-.73201zm4.54404 2.32001h1.207c.916 0 1.437-.493 1.437-1.348 0-.85501-.521-1.34401-1.433-1.34401h-1.211zm1.488-3.58001c1.316 0 2.232.907 2.232 2.22701 0 1.325-.935 2.236-2.264 2.236h-1.457v2.316h-1.052v-6.77901zm5.687 4.93701v-.38l-1.17.075c-.658.042-1 .286-1 .714 0 .413.356.681.915.681.714 0 1.255-.456 1.255-1.09zm-3.195.437c0-.869.663-1.367 1.884-1.442l1.31-.08v-.376c0-.55-.361-.85-1.005-.85-.53 0-.916.272-.996.69h-.949c.029-.878.855-1.517 1.974-1.517 1.202 0 1.987.63 1.987 1.607v3.373h-.973v-.813h-.023c-.277.53-.888.864-1.55.864-.977 0-1.659-.582-1.659-1.456zm5.1 3.219v-.813c.066.009.226.018.31.018.465 0 .728-.197.888-.704l.094-.3-1.78-4.933h1.099l1.24 4.002h.024l1.24-4.002h1.07l-1.845 5.181c-.423 1.189-.907 1.579-1.931 1.579-.08 0-.338-.01-.409-.029z" fill="#111" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/res/static/img/payment_providers/bancontact.svg b/res/static/img/payment_providers/bancontact.svg
new file mode 100644
index 0000000..9e2154d
--- /dev/null
+++ b/res/static/img/payment_providers/bancontact.svg
@@ -0,0 +1,15 @@
+<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.096 0.5H27.904C29.8862 0.5 31.5 2.12098 31.5 4.12903V19.871C31.5 21.879 29.8862 23.5 27.904 23.5H4.096C2.11376 23.5 0.5 21.879 0.5 19.871V4.12903C0.5 2.12098 2.11376 0.5 4.096 0.5Z" fill="white" stroke="#E6E6E6"/>
+<path d="M9 17C12.6164 17 14.1918 14.411 16 12H4V17H9Z" fill="url(#paint0_linear)"/>
+<path d="M23 7C19.3836 7 17.8082 9.58904 16 12H28V7H23Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="6.42722" y1="14.4555" x2="15.2057" y2="11.1949" gradientUnits="userSpaceOnUse">
+<stop stop-color="#005AB9"/>
+<stop offset="1" stop-color="#1E3764"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="16.7265" y1="12.2401" x2="26.0475" y2="9.06004" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FBA900"/>
+<stop offset="1" stop-color="#FFD800"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/res/static/img/payment_providers/banktransfer.svg b/res/static/img/payment_providers/banktransfer.svg
new file mode 100644
index 0000000..8a88323
--- /dev/null
+++ b/res/static/img/payment_providers/banktransfer.svg
@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 32 24" width="32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><mask id="a" height="7" maskUnits="userSpaceOnUse" width="6" x="6" y="9"><path d="m0 0v5.34729h4.45531v-5.34729z" fill="#fff" transform="translate(6.70969 9.74527)"/></mask><mask id="b" height="7" maskUnits="userSpaceOnUse" width="6" x="16" y="9"><path d="m4.47353 0h-4.47353v5.37565h4.47353z" fill="#fff" transform="translate(16.7716 9.68002)"/></mask><mask id="c" height="7" maskUnits="userSpaceOnUse" width="7" x="20" y="9"><path d="m0 5.37567h5.33854v-5.37567h-5.33854z" fill="#fff" transform="translate(20.681 9.68002)"/></mask><path d="m4.12903.5h23.74197c1.9991 0 3.629 1.63976 3.629 3.67391v15.65219c0 2.0341-1.6299 3.6739-3.629 3.6739h-23.74197c-1.99917 0-3.62903-1.6398-3.62903-3.6739v-15.65219c0-2.03415 1.62986-3.67391 3.62903-3.67391z" fill="#fff" stroke="#e6e6e6"/><g mask="url(#a)"><path clip-rule="evenodd" d="m4.29492 1.68639h-1.32273c0-.22089-.02545-.36906-.07621-.44452-.07876-.11172-.29596-.16761-.65152-.16761-.34538 0-.57424.03215-.68595.09652-.11164.06457-.16759.20498-.16759.42118 0 .19571.04954.32458.14875.38634.07101.04383.16497.06959.28199.07729l.26674.01917c.57167.03861.92871.06581 1.07112.08133.45214.04637.77983.16865.98325.36698.15996.15463.25539.3568.2859.60645.01775.14935.02666.31839.02666.50615 0 .43272-.04063.74968-.12183.95055-.14728.36854-.47811.60137-.99293.69913-.21566.04128-.54553.06195-.98928.06195-.7408 0-1.25697-.04487-1.548449-.13506-.357744-.11048-.593591-.33424-.7077331-.67128-.0635762-.18763-.0951079-.50009-.0951079-.9375h1.32267c0 .04878.00019.08602.00019.11171 0 .23348.06588.38355.19752.45046.0912.04611.2013.07031.3307.07317h.48631c.24808 0 .40651-.01297.47477-.03893.12164-.04865.20143-.12691.23956-.2353.02025-.06679.03025-.15314.03025-.25879 0-.23667-.08485-.38067-.25443-.43232-.06339-.02042-.35826-.04885-.88469-.08492-.42279-.03071-.71645-.06026-.88083-.08889-.433052-.08237-.721644-.25193-.865652-.50928-.1266393-.21867-.18989502-.54952-.18989502-.99209 0-.33704.03415932-.607302.10260602-.810584.068447-.203283.178744-.357718.330955-.463239.222965-.162131.508225-.2572831.855526-.2857179.28904-.0256304.60961-.0387391.96223-.0387391.55513 0 .95076.0325435 1.1866.0968478.57558.1574352.86328.5982392.86328 1.3225422 0 .05941-.00423.14831-.01275.267z" fill="#0054a5" fill-rule="evenodd" transform="translate(6.70969 9.74527)"/></g><g mask="url(#b)"><path clip-rule="evenodd" d="m1.42175 2.74076h.88635c.28103-.0103.45195-.03235.51348-.06672.08402-.04702.14042-.14119.16849-.28232.01794-.09398.02691-.23374.02691-.41929 0-.22741-.01781-.39593-.05364-.50595-.05114-.15418-.17362-.24809-.36761-.2822-.03833-.00515-.13017-.00789-.27565-.00789h-.89833zm-1.42175 2.63491v-5.37567h2.07219.32525.25142c.36332 0 .64057.0301957.83104.0905217.43567.1389133.72798.4233263.87776.8531743.07723.225584.11587.565234.11587 1.018764 0 .54528-.04287.93717-.12766 1.17574-.1699.47178-.51957.74354-1.04773.81397-.06204.01057-.32628.02003-.79271.02759l-.23598.00802h-.8477v1.38789z" fill="#0054a5" fill-rule="evenodd" transform="translate(16.7716 9.68002)"/></g><g mask="url(#c)"><path clip-rule="evenodd" d="m3.34493 3.39939-.66621-2.33022-.6464 2.33022zm.28231 1.04733h-1.90088l-.25539.92902h-1.47097l1.58716-5.37574h2.14473l1.60665 5.37574h-1.44001z" fill="#0054a5" fill-rule="evenodd" transform="translate(20.681 9.68002)"/></g><path clip-rule="evenodd" d="m3.51335.708457c.58635 0 1.1097.274891 1.45379.705453l.30648-.668671c-.47939-.461022-1.13168-.745239-1.85121-.745239-1.12027 0-2.07866.6885-2.471908 1.66311h-.597629l-.352873.76982h.76881c-.005768.07142-.009549.1429-.009549.21581 0 .08824.00455.17543.013074.26159h-.386328l-.3528088.77008h.9356328c.404469.94996 1.350869 1.61687 2.453579 1.61687.55571 0 1.07137-.16943 1.49833-.45887v-.94376c-.34383.39835-.84674.65009-1.40739.65009-.65543 0-1.23191-.34389-1.56755-.86433h1.9592l.35287-.77008h-2.60034c-.01339-.09268-.02057-.18737-.02057-.28383 0-.06522.00327-.12978.00948-.19357h2.8301l.35281-.76982h-2.93822c.325-.57065.92961-.954653 1.62222-.954653z" fill="#fec10e" fill-rule="evenodd" transform="translate(11.3548 9.65216)"/></svg>
\ No newline at end of file
diff --git a/res/static/img/payment_providers/belfius.svg b/res/static/img/payment_providers/belfius.svg
new file mode 100644
index 0000000..eb9eafa
--- /dev/null
+++ b/res/static/img/payment_providers/belfius.svg
@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 32 24" width="32" xmlns="http://www.w3.org/2000/svg"><path d="m28 0h-24c-2.20914 0-4 1.79086-4 4v16c0 2.2091 1.79086 4 4 4h24c2.2091 0 4-1.7909 4-4v-16c0-2.20914-1.7909-4-4-4z" fill="#d50043"/><path clip-rule="evenodd" d="m0 1.78118c0-.983718.789207-1.78118 1.78118-1.78118h6.93764c.98372 0 1.78118.789207 1.78118 1.78118v8.71882h-8.71882c-.983718 0-1.78118-.78921-1.78118-1.78118zm2.25 1.88111v.17542c0 .37307.29774.66229.66503.66229h4.66994c.37564 0 .66503-.29652.66503-.66229v-.17542c0-.37307-.29774-.66229-.66503-.66229h-4.66994c-.37564 0-.66503.29652-.66503.66229zm0 3v.17542c0 .37307.29774.66229.66503.66229h4.66994c.37564 0 .66503-.29652.66503-.66229v-.17542c0-.37307-.29774-.66229-.66503-.66229h-4.66994c-.37564 0-.66503.29652-.66503.66229z" fill="#fff" fill-rule="evenodd" transform="translate(10.75 6.75)"/></svg>
\ No newline at end of file
diff --git a/res/static/img/payment_providers/creditcard.svg b/res/static/img/payment_providers/creditcard.svg
new file mode 100644
index 0000000..a22e26c
--- /dev/null
+++ b/res/static/img/payment_providers/creditcard.svg
@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 32 24" width="32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="7" width="9" x="3" y="7"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 255 0"/><feOffset dy="1"/><feGaussianBlur stdDeviation=".5"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" mode="normal" result="shape"/></filter><linearGradient id="b" gradientTransform="matrix(31.99997596 -23.99998197 31.99997596 23.99998197 -16 12)" gradientUnits="userSpaceOnUse" x2="1"><stop offset="0" stop-color="#060b0e"/><stop offset="1" stop-color="#254764"/></linearGradient><linearGradient id="c"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="d" gradientTransform="matrix(-3.17876039 -8.70897134 8.70897134 -3.17876039 13.0557 17.6392)" gradientUnits="userSpaceOnUse" x2="1" xlink:href="#c"/><linearGradient id="e" gradientTransform="matrix(-3.64877962 -14.67591437 14.67591437 -3.64877962 9.16207 34.8244)" gradientUnits="userSpaceOnUse" x2="1" xlink:href="#c"/><linearGradient id="f" gradientTransform="matrix(5.86034935 23.57028621 -23.57028621 5.86034935 32.4248 26.4995)" gradientUnits="userSpaceOnUse" x2="1" xlink:href="#c"/><linearGradient id="g" gradientTransform="matrix(0 5 -7 0 7 0)" gradientUnits="userSpaceOnUse" x2="1"><stop offset="0" stop-color="#fad961"/><stop offset="1" stop-color="#f7955d"/></linearGradient><mask id="h" height="24" maskUnits="userSpaceOnUse" width="32" x="0" y="0"><path d="m28 0h-24c-2.20914 0-4 1.79086-4 4v16c0 2.2091 1.79086 4 4 4h24c2.2091 0 4-1.7909 4-4v-16c0-2.20914-1.7909-4-4-4z" fill="#fff"/></mask><g mask="url(#h)"><path d="m28 0h-24c-2.20914 0-4 1.79086-4 4v16c0 2.2091 1.79086 4 4 4h24c2.2091 0 4-1.7909 4-4v-16c0-2.20914-1.7909-4-4-4z" fill="url(#b)"/><path d="m31.5 63c17.397 0 31.5-14.103 31.5-31.5s-14.103-31.5-31.5-31.5-31.5 14.103-31.5 31.5 14.103 31.5 31.5 31.5z" fill="url(#d)" opacity=".1" transform="translate(6 6)"/><path d="m16.5 33c9.1127 0 16.5-7.3873 16.5-16.5s-7.3873-16.5-16.5-16.5-16.5 7.3873-16.5 16.5 7.3873 16.5 16.5 16.5z" fill="url(#e)" opacity=".1" transform="translate(-10 12)"/><path d="m26.5 53c14.6355 0 26.5-11.8645 26.5-26.5s-11.8645-26.5-26.5-26.5-26.5 11.8645-26.5 26.5 11.8645 26.5 26.5 26.5z" fill="url(#f)" opacity=".1" transform="translate(16 -31)"/><g filter="url(#a)"><path d="m6 0h-5c-.552285 0-1 .447715-1 1v3c0 .55228.447715 1 1 1h5c.55228 0 1-.44772 1-1v-3c0-.552285-.44772-1-1-1z" fill="#000" transform="translate(4 7)"/></g><path d="m6 0h-5c-.552285 0-1 .447715-1 1v3c0 .55228.447715 1 1 1h5c.55228 0 1-.44772 1-1v-3c0-.552285-.44772-1-1-1z" fill="url(#g)" transform="translate(4 7)"/><path d="m1 0h-1v3h1z" fill="#7a3802" opacity=".3" transform="translate(5 8)"/><path d="m1 0h-1v3h1z" fill="#7a3802" opacity=".3" transform="translate(7 8)"/><path d="m1 0h-1v3h1z" fill="#7a3802" opacity=".3" transform="translate(9 8)"/><g fill="#fff" fill-opacity=".8"><path d="m5 0h-5v1h5z" transform="translate(4 15)"/><path d="m3 0h-3v1h3z" transform="translate(4 17)"/><path d="m3 0h-3v1h3z" transform="translate(8 17)"/><path d="m3 0h-3v1h3z" transform="translate(12 17)"/><path d="m5 0h-5v1h5z" transform="translate(10 15)"/><path d="m5 0h-5v1h5z" transform="translate(16 15)"/><path d="m5 0h-5v1h5z" transform="translate(22 15)"/></g></g></svg>
\ No newline at end of file
diff --git a/res/static/img/payment_providers/directdebit.svg b/res/static/img/payment_providers/directdebit.svg
new file mode 100644
index 0000000..8a88323
--- /dev/null
+++ b/res/static/img/payment_providers/directdebit.svg
@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 32 24" width="32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><mask id="a" height="7" maskUnits="userSpaceOnUse" width="6" x="6" y="9"><path d="m0 0v5.34729h4.45531v-5.34729z" fill="#fff" transform="translate(6.70969 9.74527)"/></mask><mask id="b" height="7" maskUnits="userSpaceOnUse" width="6" x="16" y="9"><path d="m4.47353 0h-4.47353v5.37565h4.47353z" fill="#fff" transform="translate(16.7716 9.68002)"/></mask><mask id="c" height="7" maskUnits="userSpaceOnUse" width="7" x="20" y="9"><path d="m0 5.37567h5.33854v-5.37567h-5.33854z" fill="#fff" transform="translate(20.681 9.68002)"/></mask><path d="m4.12903.5h23.74197c1.9991 0 3.629 1.63976 3.629 3.67391v15.65219c0 2.0341-1.6299 3.6739-3.629 3.6739h-23.74197c-1.99917 0-3.62903-1.6398-3.62903-3.6739v-15.65219c0-2.03415 1.62986-3.67391 3.62903-3.67391z" fill="#fff" stroke="#e6e6e6"/><g mask="url(#a)"><path clip-rule="evenodd" d="m4.29492 1.68639h-1.32273c0-.22089-.02545-.36906-.07621-.44452-.07876-.11172-.29596-.16761-.65152-.16761-.34538 0-.57424.03215-.68595.09652-.11164.06457-.16759.20498-.16759.42118 0 .19571.04954.32458.14875.38634.07101.04383.16497.06959.28199.07729l.26674.01917c.57167.03861.92871.06581 1.07112.08133.45214.04637.77983.16865.98325.36698.15996.15463.25539.3568.2859.60645.01775.14935.02666.31839.02666.50615 0 .43272-.04063.74968-.12183.95055-.14728.36854-.47811.60137-.99293.69913-.21566.04128-.54553.06195-.98928.06195-.7408 0-1.25697-.04487-1.548449-.13506-.357744-.11048-.593591-.33424-.7077331-.67128-.0635762-.18763-.0951079-.50009-.0951079-.9375h1.32267c0 .04878.00019.08602.00019.11171 0 .23348.06588.38355.19752.45046.0912.04611.2013.07031.3307.07317h.48631c.24808 0 .40651-.01297.47477-.03893.12164-.04865.20143-.12691.23956-.2353.02025-.06679.03025-.15314.03025-.25879 0-.23667-.08485-.38067-.25443-.43232-.06339-.02042-.35826-.04885-.88469-.08492-.42279-.03071-.71645-.06026-.88083-.08889-.433052-.08237-.721644-.25193-.865652-.50928-.1266393-.21867-.18989502-.54952-.18989502-.99209 0-.33704.03415932-.607302.10260602-.810584.068447-.203283.178744-.357718.330955-.463239.222965-.162131.508225-.2572831.855526-.2857179.28904-.0256304.60961-.0387391.96223-.0387391.55513 0 .95076.0325435 1.1866.0968478.57558.1574352.86328.5982392.86328 1.3225422 0 .05941-.00423.14831-.01275.267z" fill="#0054a5" fill-rule="evenodd" transform="translate(6.70969 9.74527)"/></g><g mask="url(#b)"><path clip-rule="evenodd" d="m1.42175 2.74076h.88635c.28103-.0103.45195-.03235.51348-.06672.08402-.04702.14042-.14119.16849-.28232.01794-.09398.02691-.23374.02691-.41929 0-.22741-.01781-.39593-.05364-.50595-.05114-.15418-.17362-.24809-.36761-.2822-.03833-.00515-.13017-.00789-.27565-.00789h-.89833zm-1.42175 2.63491v-5.37567h2.07219.32525.25142c.36332 0 .64057.0301957.83104.0905217.43567.1389133.72798.4233263.87776.8531743.07723.225584.11587.565234.11587 1.018764 0 .54528-.04287.93717-.12766 1.17574-.1699.47178-.51957.74354-1.04773.81397-.06204.01057-.32628.02003-.79271.02759l-.23598.00802h-.8477v1.38789z" fill="#0054a5" fill-rule="evenodd" transform="translate(16.7716 9.68002)"/></g><g mask="url(#c)"><path clip-rule="evenodd" d="m3.34493 3.39939-.66621-2.33022-.6464 2.33022zm.28231 1.04733h-1.90088l-.25539.92902h-1.47097l1.58716-5.37574h2.14473l1.60665 5.37574h-1.44001z" fill="#0054a5" fill-rule="evenodd" transform="translate(20.681 9.68002)"/></g><path clip-rule="evenodd" d="m3.51335.708457c.58635 0 1.1097.274891 1.45379.705453l.30648-.668671c-.47939-.461022-1.13168-.745239-1.85121-.745239-1.12027 0-2.07866.6885-2.471908 1.66311h-.597629l-.352873.76982h.76881c-.005768.07142-.009549.1429-.009549.21581 0 .08824.00455.17543.013074.26159h-.386328l-.3528088.77008h.9356328c.404469.94996 1.350869 1.61687 2.453579 1.61687.55571 0 1.07137-.16943 1.49833-.45887v-.94376c-.34383.39835-.84674.65009-1.40739.65009-.65543 0-1.23191-.34389-1.56755-.86433h1.9592l.35287-.77008h-2.60034c-.01339-.09268-.02057-.18737-.02057-.28383 0-.06522.00327-.12978.00948-.19357h2.8301l.35281-.76982h-2.93822c.325-.57065.92961-.954653 1.62222-.954653z" fill="#fec10e" fill-rule="evenodd" transform="translate(11.3548 9.65216)"/></svg>
\ No newline at end of file
diff --git a/res/static/img/payment_providers/eps.svg b/res/static/img/payment_providers/eps.svg
new file mode 100644
index 0000000..d56e47c
--- /dev/null
+++ b/res/static/img/payment_providers/eps.svg
@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 32 24" width="32" xmlns="http://www.w3.org/2000/svg"><path d="m28 0h-24c-2.20914 0-4 1.79086-4 4v16c0 2.2091 1.79086 4 4 4h24c2.2091 0 4-1.7909 4-4v-16c0-2.20914-1.7909-4-4-4z" fill="#de378c"/><g clip-rule="evenodd" fill="#fff" fill-rule="evenodd"><path d="m1.19848 5.42947s-.1052-.50537-.1052-.83809c0-.33276.09958-.84329.09958-.84329.36659-1.52463 1.70996-2.65993 3.30718-2.65993 1.87848 0 3.41996 1.56711 3.41996 3.49487v.8478h-4.99086c.29473.59111.89078.92361 1.57817.92361h4.48653l.00616-4.99928c0-.745355-.59422-1.35516-1.32052-1.35516h-6.35896c-.726268 0-1.32052.591333-1.32052 1.33669v6.52579c0 .74535.594252 1.37363 1.32052 1.37363h6.35896c.65182 0 1.19553-.48028 1.30054-1.10833h-4.47271c-1.59984 0-2.94487-1.16992-3.30883-2.69831z" transform="translate(11.5 9.51389)"/><path d="m1.54282 0c-.670254 0-1.253151.4613-1.54282 1.05556h3.08571c-.28966-.59426-.87256-1.05556-1.54289-1.05556z" transform="translate(14.3286 12.1528)"/><path d="m5.65714 2.92875c0-1.61751-1.26673-2.92875-2.82928-2.92875-1.53668 0-2.7864716 1.26836-2.82751976 2.8488-.00067176.00668-.0001415.01317-.0001415.02003v.88014c0 .10528.08078826.20936.18247226.20936h1.040909c.10169 0 .19085-.10408.19085-.20936v-.82022c0-.80772.63394-1.46488 1.41424-1.46488.78031 0 1.41424.65716 1.41424 1.46488v.82022c0 .10528.08248.20936.18417.20936h1.04094c.10169 0 .18912-.10408.18912-.20936z" transform="translate(13.0428 4.5)"/></g></svg>
\ No newline at end of file
diff --git a/res/static/img/payment_providers/giftcard.svg b/res/static/img/payment_providers/giftcard.svg
new file mode 100644
index 0000000..7f70179
--- /dev/null
+++ b/res/static/img/payment_providers/giftcard.svg
@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 32 24" width="32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="9.23511" width="7.25" x="9.5" y="8.76489"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 255 0"/><feOffset dy="1"/><feGaussianBlur stdDeviation=".5"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" mode="normal" result="shape"/></filter><filter id="b" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="11.0331" width="8.46154" x="11.6201" y="5"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 255 0"/><feOffset dy="1"/><feGaussianBlur stdDeviation=".5"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" mode="normal" result="shape"/></filter><filter id="c" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="11.0331" width="8.46154" x="5.46155" y="5"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 255 0"/><feOffset dy="1"/><feGaussianBlur stdDeviation=".5"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" mode="normal" result="shape"/></filter><filter id="d" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="9.21632" width="8.46154" x="8.69238" y="6.81046"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 255 0"/><feOffset dy="1"/><feGaussianBlur stdDeviation=".5"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" mode="normal" result="shape"/></filter><linearGradient id="e" gradientTransform="matrix(32 24 -32 42.6667 16 -21.3333)" gradientUnits="userSpaceOnUse" x2="1"><stop offset="0" stop-color="#00b2ff"/><stop offset=".806094" stop-color="#007eff"/><stop offset="1" stop-color="#0072ff"/></linearGradient><path d="m28 0h-24c-2.20914 0-4 1.79086-4 4v16c0 2.2091 1.79086 4 4 4h24c2.2091 0 4-1.7909 4-4v-16c0-2.20914-1.7909-4-4-4z" fill="url(#e)"/><path d="m32 0h-32v3h32z" fill="#fff" transform="translate(0 8)"/><g filter="url(#a)"><path d="m0 .0187923 5.25-.0187923v7.23511l-2.625-1.97321-2.625 1.97321z" fill="#fff" transform="translate(10.5 8.76489)"/></g><g filter="url(#b)"><path d="m.467432 2.59818 4.846158-2.5140137c.40456-.2098723.88486-.0137359 1.07278.4380827.04952.119052.07517.248739.07517.380007v7.228834c0 .49818-.36162.90204-.80769.90204-.11754 0-.23366-.02865-.34026-.08395l-4.846158-2.51401c-.285074-.14789-.467432-.46705-.467432-.81809v-2.20081c0-.35105.182358-.67021.467432-.81809z" fill="#fff" transform="translate(12.6201 5)"/></g><g filter="url(#c)"><path d="m.467432 2.59818 4.846158-2.5140137c.40456-.2098723.88486-.0137359 1.07278.4380827.04951.119052.07517.248739.07517.380007v7.228834c0 .49818-.36162.90204-.80769.90204-.11754 0-.23366-.02865-.34026-.08395l-4.846158-2.51401c-.285074-.14789-.467432-.46705-.467432-.81809v-2.20081c0-.35105.182358-.67021.467432-.81809z" fill="#fff" transform="matrix(-1 0 0 1 12.9231 5)"/></g><g filter="url(#d)"><path d="m3.23077 7.21632c1.7843 0 3.23077-1.61543 3.23077-3.60816s-1.44647-3.60816-3.23077-3.60816c-1.78431 0-3.23077 1.61543-3.23077 3.60816s1.44646 3.60816 3.23077 3.60816z" fill="#fff" transform="translate(9.69238 6.81046)"/></g></svg>
\ No newline at end of file
diff --git a/res/static/img/payment_providers/giropay.svg b/res/static/img/payment_providers/giropay.svg
new file mode 100644
index 0000000..9113803
--- /dev/null
+++ b/res/static/img/payment_providers/giropay.svg
@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 32 24" width="32" xmlns="http://www.w3.org/2000/svg"><path d="m28 0h-24c-2.20914 0-4 1.79086-4 4v16c0 2.2091 1.79086 4 4 4h24c2.2091 0 4-1.7909 4-4v-16c0-2.20914-1.7909-4-4-4z" fill="#0f4ca1"/><g clip-rule="evenodd" fill="#fffffe" fill-rule="evenodd"><path d="m0 9.75h2.25v-3.71323c.43608.81356 1.3912 1.11493 2.19875 1.11493 1.98724 0 3.05125-1.67966 3.05125-3.70071 0-1.65306-1.01206-3.45099-2.85852-3.45099-1.05135 0-1.93008.43305-2.39148 1.39104v-1.39104h-2.25zm5.11575-6.24625c0 1.08944-.52578 1.83705-1.39707 1.83705-.76958 0-1.41126-.74761-1.41126-1.74539 0-1.02327.56464-1.78451 1.41126-1.78451.89704 0 1.39707.78695 1.39707 1.69285z" transform="translate(16.75 7.5)"/><path d="m7.5.154884h-2.11918v1.213556h-.02545c-.49411-.826125-1.30023-1.36844-2.30085-1.36844-2.105459 0-3.05452 1.49758-3.05452 3.49941 0 1.98952 1.15684 3.38303 3.0158 3.38303.93578 0 1.71557-.36059 2.27407-1.14931h.02634v.36235c0 1.31718-.72757 1.94969-2.07957 1.94969-.97496 0-1.57285-.20636-2.287579-.55507l-.117277 1.83397c.546116.19294 1.469066.42593 2.586746.42593 2.72968 0 4.08147-.89146 4.08147-3.65452zm-5.08232 3.305586c0-.91654.45495-1.67842 1.3259-1.67842 1.05262 0 1.49474.83866 1.49474 1.588 0 1.03359-.66317 1.73079-1.49474 1.73079-.70189 0-1.3259-.59468-1.3259-1.64037z" transform="translate(7.75 7.5)"/></g></svg>
\ No newline at end of file
diff --git a/res/static/img/payment_providers/ideal.svg b/res/static/img/payment_providers/ideal.svg
new file mode 100644
index 0000000..ff5727e
--- /dev/null
+++ b/res/static/img/payment_providers/ideal.svg
@@ -0,0 +1,12 @@
+<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.871 0H4.12903C1.84863 0 0 1.86872 0 4.17391V19.8261C0 22.1313 1.84863 24 4.12903 24H27.871C30.1514 24 32 22.1313 32 19.8261V4.17391C32 1.86872 30.1514 0 27.871 0Z" fill="#E664A5"/>
+<path d="M8.5 6.3871V17.6452C8.5 18.1936 8.95161 18.6129 9.46774 18.6129H16.2097C21.3065 18.6129 23.5 15.7742 23.5 12C23.5 8.22581 21.3065 5.3871 16.2097 5.3871H9.5C8.95161 5.41936 8.5 5.87097 8.5 6.3871Z" fill="white"/>
+<path d="M13.0162 8.19354V16.5161H16.6291C19.9195 16.5161 21.3388 14.6452 21.3388 12.0323C21.3388 9.51612 19.9195 7.58064 16.6291 7.58064H13.6291C13.3066 7.54838 13.0162 7.8387 13.0162 8.19354Z" fill="#CC0066"/>
+<path d="M16.2097 17.7419H10.371C9.8549 17.7419 9.43555 17.3226 9.43555 16.8065V7.25807C9.43555 6.74194 9.8549 6.32259 10.371 6.32259H16.2097C21.7581 6.32259 22.5968 9.90323 22.5968 12.0323C22.5968 15.7097 20.3388 17.7419 16.2097 17.7419ZM10.371 6.64517C10.0162 6.64517 9.75813 6.93549 9.75813 7.25807V16.8065C9.75813 17.1613 10.0485 17.4194 10.371 17.4194H16.2097C20.113 17.4194 22.2743 15.4839 22.2743 12C22.2743 7.32259 18.4678 6.61291 16.2097 6.61291L10.371 6.64517Z" fill="black"/>
+<path d="M14.3065 10.9032C14.4355 10.9032 14.5646 10.9355 14.6614 10.9677C14.7581 11 14.8549 11.0645 14.9517 11.1613C15.0162 11.2581 15.0807 11.3548 15.1452 11.4516C15.1775 11.5806 15.2097 11.7097 15.2097 11.871C15.2097 12.0323 15.1775 12.1613 15.1452 12.2581C15.113 12.3871 15.0484 12.4839 14.9839 12.5806C14.9194 12.6774 14.8226 12.7419 14.6936 12.8065C14.5968 12.871 14.4355 12.871 14.3065 12.871H13.4355V10.871L14.3065 10.9032ZM14.2743 12.5161C14.3388 12.5161 14.4033 12.5161 14.4678 12.4839C14.5323 12.4516 14.5646 12.4194 14.6291 12.3871C14.6614 12.3226 14.7259 12.2903 14.7259 12.1936C14.7581 12.129 14.7581 12.0323 14.7581 11.9032C14.7581 11.8065 14.7581 11.7097 14.7259 11.6452C14.6936 11.5806 14.6614 11.4839 14.6291 11.4516C14.5968 11.3871 14.5323 11.3548 14.4678 11.3226C14.4033 11.2903 14.3065 11.2903 14.2097 11.2903H13.8872V12.5484L14.2743 12.5161Z" fill="white"/>
+<path d="M16.9839 10.9032V11.2581H15.9194V11.7097H16.8871V12.0323H15.9194V12.5161H16.9839V12.871H15.4678V10.871L16.9839 10.9032Z" fill="white"/>
+<path d="M18.4677 10.9032L19.2097 12.9032H18.7581L18.5968 12.4516H17.8548L17.6936 12.9032H17.2419L17.9839 10.9032C18.0161 10.9032 18.4677 10.9032 18.4677 10.9032ZM18.5 12.1291L18.2419 11.3871L17.9839 12.1291H18.5Z" fill="white"/>
+<path d="M19.9193 10.9032V12.5161H20.887V12.871H19.4677V10.871C19.4999 10.9032 19.9193 10.9032 19.9193 10.9032Z" fill="white"/>
+<path d="M11.371 12.8065C11.8698 12.8065 12.2742 12.4021 12.2742 11.9032C12.2742 11.4044 11.8698 11 11.371 11C10.8722 11 10.4678 11.4044 10.4678 11.9032C10.4678 12.4021 10.8722 12.8065 11.371 12.8065Z" fill="black"/>
+<path d="M12.0807 16.5162C11.3065 16.5162 10.6936 15.9032 10.6936 15.1291V14.0323C10.6936 13.6452 11.0162 13.3226 11.4033 13.3226C11.7904 13.3226 12.113 13.6452 12.113 14.0323L12.0807 16.5162Z" fill="black"/>
+</svg>
diff --git a/res/static/img/payment_providers/in3.svg b/res/static/img/payment_providers/in3.svg
new file mode 100644
index 0000000..418f0e6
--- /dev/null
+++ b/res/static/img/payment_providers/in3.svg
@@ -0,0 +1,14 @@
+<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="24" rx="4" fill="#001C5D"/>
+<g clip-path="url(#clip0_2767_2)">
+<path d="M6.2 9.16364C5.53455 9.16364 5 9.70909 5 10.3636V16.7236C5 17.3891 5.53455 17.9236 6.2 17.9236C6.86545 17.9236 7.4 17.3891 7.4 16.7236V10.3636C7.4 9.70909 6.86545 9.16364 6.2 9.16364Z" fill="#33EBC7"/>
+<path d="M6.2 8.41091C6.86545 8.41091 7.4 7.87636 7.4 7.21091C7.4 6.54546 6.86545 6.01091 6.2 6.01091C5.53455 6.01091 5 6.54546 5 7.21091C5 7.87636 5.53455 8.41091 6.2 8.41091Z" fill="#33EBC7"/>
+<path d="M13.3127 9.15273C12.1564 9.15273 11.4145 9.58909 10.9564 10.0145C10.8145 9.88363 10.6509 9.76363 10.4873 9.66545C10.4 9.6 10.3018 9.54545 10.1927 9.50182C10.0618 9.44727 9.91999 9.42545 9.76726 9.42545C9.10181 9.42545 8.56726 9.96 8.56726 10.6255C8.56726 11.0836 8.81817 11.4764 9.18908 11.6836C9.19999 11.6836 9.19999 11.6945 9.2109 11.6945C9.28726 11.7382 9.35272 11.7927 9.39635 11.8364C9.70181 12.1527 9.8109 12.7091 9.83272 13.0473C9.83272 13.1345 9.83272 13.2218 9.84362 13.2873V16.7127C9.84362 17.3782 10.3782 17.9236 11.0436 17.9236C11.7091 17.9236 12.2436 17.3891 12.2436 16.7236V13.2545V12.7309V12.72C12.2436 12.0764 12.7673 11.5527 13.4109 11.5527C14.0545 11.5527 14.5782 12.0764 14.5782 12.72V12.7309V13.2327C14.5782 13.2436 14.5782 13.2545 14.5782 13.2764V16.7236C14.5782 17.3891 15.1127 17.9236 15.7782 17.9236C16.4436 17.9236 16.9782 17.3891 16.9782 16.7236V13.3418C16.9782 13.32 16.9782 13.2873 16.9782 13.2436C16.9782 12.7745 16.8909 11.2473 15.8654 10.1782C15.2436 9.51273 14.3491 9.15273 13.3127 9.15273Z" fill="#33EBC7"/>
+<path d="M26 11.8255C26.0327 11.7818 26.0763 11.7382 26.1091 11.6945C26.1309 11.6727 26.1418 11.64 26.1636 11.6182C26.2072 11.5527 26.2509 11.4982 26.2945 11.4327C26.2945 11.4218 26.3054 11.4218 26.3054 11.4109C26.3709 11.3236 26.4254 11.2255 26.4691 11.1164V11.1055C26.6982 10.6255 26.8182 10.0691 26.8182 9.46909C26.8182 8.31273 26.3818 7.57091 25.9563 7.11273C25.4109 6.56727 24.7454 6 22.8145 6H19.2582C18.5927 6 18.0472 6.53455 18.0472 7.2C18.0472 7.86545 18.5818 8.4 19.2472 8.4H22.7163H23.24H23.2509C23.8945 8.4 24.4182 8.92364 24.4182 9.56727C24.4182 10.1673 23.9709 10.6582 23.4036 10.7236C23.2618 10.7345 23.12 10.7345 22.9563 10.7345H22.7491C22.7382 10.7345 22.7272 10.7345 22.7054 10.7345H19.2582C18.5927 10.7345 18.0582 11.2691 18.0582 11.9345C18.0582 12.6 18.5927 13.1345 19.2582 13.1345H22.7272H23.2509H23.2618C23.9054 13.1345 24.4291 13.6582 24.4291 14.3018C24.4291 14.9455 23.9054 15.4691 23.2618 15.4691H23.2509H22.7491C22.7382 15.4691 22.7272 15.4691 22.7054 15.4691H19.2582C18.5927 15.4691 18.0582 16.0036 18.0582 16.6691C18.0582 17.3345 18.5927 17.8691 19.2582 17.8691H22.64C22.6618 17.8691 22.6945 17.8691 22.7382 17.8691C23.2072 17.8691 24.7345 17.7818 25.8036 16.7564C26.48 16.1127 26.84 15.2182 26.84 14.1818C26.84 13.0255 26.4036 12.2836 25.9782 11.8255C25.9672 11.8582 25.9891 11.8473 26 11.8255Z" fill="#33EBC7"/>
+</g>
+<defs>
+<clipPath id="clip0_2767_2">
+<rect width="21.8182" height="12" fill="white" transform="translate(5 6)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/res/static/img/payment_providers/kbc.svg b/res/static/img/payment_providers/kbc.svg
new file mode 100644
index 0000000..7f75295
--- /dev/null
+++ b/res/static/img/payment_providers/kbc.svg
@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 32 24" width="32" xmlns="http://www.w3.org/2000/svg"><path d="m4.12903.5h23.74197c1.9991 0 3.629 1.63976 3.629 3.67391v15.65219c0 2.0341-1.6299 3.6739-3.629 3.6739h-23.74197c-1.99917 0-3.62903-1.6398-3.62903-3.6739v-15.65219c0-2.03415 1.62986-3.67391 3.62903-3.67391z" fill="#fff" stroke="#e6e6e6"/><g clip-rule="evenodd" fill-rule="evenodd"><path d="m2.93513 5.86572c1.62112 0 2.93518-1.31312 2.93518-2.93289 0-1.61965-1.31406-2.93283-2.93518-2.93283-1.62107 0-2.93513 1.31318-2.93513 2.93283 0 1.61977 1.31406 2.93289 2.93513 2.93289z" fill="#019acc" transform="translate(13.1467 5.01093)"/><path d="m7.95233 1.37176c-.98164 0-1.82701-.381211-2.36461-.804973-3.20452.336025-5.58772.812283-5.58772.812283v1.24703h17.0323c0-1.750391 0-2.62558619 0-2.62558619s-2.945-.01803891-6.2694.15965219c-.5591.605707-1.54533 1.211594-2.81057 1.211594z" fill="#019acc" transform="translate(7.48389 10.1565)"/><path d="m2.01952 4.69565h-2.01952v-4.69565h2.01952v2.11308l1.20024-2.11308h2.4214l-1.7731 2.42663 1.673 2.26902h-2.31075l-1.19687-1.76485z" fill="#003466" transform="translate(7.48389 13.5652)"/><path d="m5.12815 4.44636c-.4766.15668-1.10296.24929-1.66341.24929-1.99793 0-3.46474-.61153-3.46474-2.39006 0-1.607261 1.42171-2.30559 3.36519-2.30559.54017 0 1.22626.0641953 1.76296.248707l-.00072 1.556823c-.39774-.25943-.79548-.42114-1.3651-.42114-.74126 0-1.48211.39311-1.48211.96369 0 .57208.73755.96383 1.48211.96383.5605 0 .96736-.16714 1.3651-.41462z" fill="#003466" transform="translate(19.356 13.5652)"/><path d="m2.01946 1.99002h1.00581c.38874 0 .54101-.17582.54101-.44545 0-.30899-.15365-.46325-.51295-.46325h-1.03399zm0 1.75099h1.05294c.39462 0 .52908-.18245.52908-.45194 0-.26962-.13578-.46332-.52458-.46332h-1.05756zm-2.01946-3.74101h4.08228c1.06044 0 1.40798.46038 1.40798 1.17713 0 .80231-.64218 1.15094-1.30188 1.19025v.01325c.67733.05926 1.33715.14463 1.33715 1.09163 0 .61832-.34754 1.22339-1.51395 1.22339h-4.01158z" fill="#003466" transform="translate(13.4558 13.5652)"/></g></svg>
\ No newline at end of file
diff --git a/res/static/img/payment_providers/klarna.svg b/res/static/img/payment_providers/klarna.svg
new file mode 100644
index 0000000..00c8b5a
--- /dev/null
+++ b/res/static/img/payment_providers/klarna.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28 0H4C1.79086 0 0 1.79086 0 4V20C0 22.2091 1.79086 24 4 24H28C30.2091 24 32 22.2091 32 20V4C32 1.79086 30.2091 0 28 0Z" fill="#F4B6C7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 17.25H10V6.75H12.25V17.25ZM12.6667 12.0222C14.6631 11.039 15.9534 9.05237 15.9999 6.75088H18.3632C18.3311 8.93615 17.4292 10.9634 15.8415 12.4672L18.9999 17.25H15.9999L12.6667 12.0222Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 15.7501C19 16.5784 19.6716 17.25 20.5001 17.25C21.3284 17.25 22 16.5784 22 15.7501C22 14.9216 21.3284 14.25 20.5001 14.25C19.6716 14.25 19 14.9216 19 15.7501Z" fill="black"/>
+</svg>
diff --git a/res/static/img/payment_providers/mybank.svg b/res/static/img/payment_providers/mybank.svg
new file mode 100644
index 0000000..d885cd9
--- /dev/null
+++ b/res/static/img/payment_providers/mybank.svg
@@ -0,0 +1,10 @@
+<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.12903 0.5H27.871C29.8701 0.5 31.5 2.13976 31.5 4.17391V19.8261C31.5 21.8602 29.8701 23.5 27.871 23.5H4.12903C2.12986 23.5 0.5 21.8602 0.5 19.8261V4.17391C0.5 2.13976 2.12986 0.5 4.12903 0.5Z" fill="white" stroke="#E6E6E6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.2986 13.6423C21.2986 13.6423 20.5962 13.7865 20.6035 13.2837C20.611 12.7809 21.8832 12.811 22.0135 12.8517C22.0135 12.8517 22.0536 13.4222 21.2986 13.6423ZM21.51 10.4706C20.4179 10.4604 19.9072 11.0885 19.9072 11.0885C19.5756 11.4402 19.7882 11.9165 20.1135 11.9509C20.5809 12.0003 20.5761 11.6086 21.2935 11.4349C21.9229 11.2826 21.9501 11.8656 21.9501 11.8656C19.2659 11.7989 19.3941 14.0513 20.3078 14.5297C21.1841 14.9884 22.0031 14.4097 22.0031 14.4097C22.0031 14.4097 22.0339 14.7214 22.4674 14.7214C22.9635 14.7214 22.9628 14.2263 22.9628 14.2263L22.9608 12.0339C22.9281 10.4299 21.51 10.4706 21.51 10.4706Z" fill="#204256"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.1779 13.8362L29.0836 12.1891L29.8879 11.4286C29.8879 11.4286 30.2591 11.085 29.9543 10.7444C29.6166 10.3672 29.2139 10.7396 29.2139 10.7396L28.2033 11.6784V9.79396C28.2033 9.52394 27.9845 9.30524 27.7146 9.30524C27.4444 9.30524 27.2256 9.52394 27.2256 9.79396V14.2282C27.2256 14.4981 27.4444 14.7169 27.7146 14.7169C27.9845 14.7169 28.2033 14.4981 28.2033 14.2282V13.0477L28.3882 12.863L29.3782 14.4146C29.3782 14.4146 29.7009 14.9533 30.1762 14.6105C30.5335 14.3527 30.1779 13.8362 30.1779 13.8362Z" fill="#204256"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.6864 12.0341C26.6864 10.4324 25.3512 10.2067 24.4433 10.7148C24.4426 10.7154 24.4417 10.7172 24.4413 10.7177C24.373 10.5228 24.1894 10.382 23.9711 10.382C23.6952 10.382 23.4714 10.6058 23.4714 10.8819V14.2215C23.4714 14.4976 23.6952 14.7214 23.9711 14.7214C24.2472 14.7214 24.471 14.4976 24.471 14.2215L24.4641 11.9684C24.4641 11.9684 24.5853 11.8241 24.7799 11.686C25.2474 11.3546 25.6931 11.4675 25.6931 12.0339L25.7045 14.2296C25.7045 14.5015 25.9246 14.7214 26.1963 14.7214C26.4678 14.7214 26.6879 14.5015 26.6879 14.2296L26.6864 12.0341Z" fill="#204256"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.317 14.7856C12.4315 14.5943 12.4514 14.4596 12.4514 14.4596L11.3227 11.5093C11.3227 11.5093 11.1179 10.9385 11.5692 10.7694C12.0474 10.59 12.22 11.0467 12.2559 11.1425C12.2918 11.2382 12.969 13.0415 12.969 13.0415L13.621 11.1466C13.621 11.1466 13.8078 10.5575 14.3301 10.7676C14.7616 10.9413 14.5399 11.5192 14.5399 11.5192C14.5399 11.5192 13.8727 13.4936 13.3133 14.9259C12.9792 15.7817 12.6939 15.8661 12.3679 15.9463C11.9316 16.0537 11.1067 16.0005 11.1067 15.458C11.1067 15.0301 11.5448 15.0034 11.7424 15.0098C11.753 15.01 12.1615 15.0454 12.317 14.7856Z" fill="#1CB9DE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.69551 9.82625L8.66376 12.673L7.53899 9.84357C7.53899 9.84357 7.3723 9.30719 6.90332 9.30719C6.35992 9.30719 6.37765 9.73762 6.36542 9.84357C6.35319 9.9496 6.36542 14.2681 6.36542 14.2681C6.36542 14.2681 6.35992 14.7215 6.85849 14.7215C7.3679 14.7215 7.34344 14.2641 7.3475 14.2641C7.35157 14.2641 7.3475 11.9843 7.3475 11.9843L8.17475 14.2641C8.17475 14.2641 8.29695 14.7123 8.68005 14.7041C9.06312 14.6961 9.17313 14.2641 9.17313 14.2641L9.86594 11.9884V14.2641C9.86594 14.2641 9.86594 14.7215 10.3671 14.7215C10.852 14.7215 10.852 14.2641 10.852 14.2641L10.8527 9.84767C10.8527 9.84767 10.8527 9.30719 10.3264 9.30978C9.88987 9.31183 9.72404 9.73028 9.69551 9.82625C9.69222 9.83745 9.69071 9.84357 9.69071 9.84357L9.69551 9.82625Z" fill="#1CB9DE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.3388 16.4653H21.6308L15.237 16.4642L15.2414 16.4713C13.9776 17.9522 12.1005 18.894 10.0009 18.894C6.19428 18.894 3.10843 15.8079 3.10843 12.0013C3.10843 8.19461 6.19428 5.10876 10.0009 5.10876C12.1096 5.10876 13.9956 6.05595 15.2596 7.54769H16.6436C15.2074 5.40956 12.7703 4 10.0009 4C5.58229 4 2 7.58233 2 12.0013C2 16.4202 5.58229 20.0025 10.0009 20.0025C12.319 20.0025 14.4022 19.0129 15.8626 17.4372L29.6829 17.4234L30.3388 16.4653Z" fill="#1CB9DE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.6571 13.7552H16.2663V12.4295H17.6571C17.9935 12.4468 18.3201 12.618 18.3201 13.0924C18.3201 13.5796 18.0231 13.7552 17.6571 13.7552ZM16.2663 10.3537H17.5627C17.8224 10.3604 18.0949 10.4989 18.0949 10.886C18.0949 11.2894 17.8566 11.4183 17.5627 11.4183H16.2663V10.3537ZM18.7529 11.82C18.7793 11.7836 19.112 11.5141 19.0857 10.7974C19.0327 9.34645 17.7726 9.36299 17.4937 9.35453C17.0444 9.34103 16.7739 9.34645 15.9492 9.35453C15.2528 9.36143 15.2579 9.99431 15.2579 9.99431V14.7214C15.2579 14.7214 16.5116 14.7214 17.6052 14.7214C18.8613 14.7214 19.3286 14.0299 19.3286 13.0631C19.3286 12.0904 18.7529 11.82 18.7529 11.82Z" fill="#204256"/>
+</svg>
diff --git a/res/static/img/payment_providers/paypal.svg b/res/static/img/payment_providers/paypal.svg
new file mode 100644
index 0000000..4b71ec3
--- /dev/null
+++ b/res/static/img/payment_providers/paypal.svg
@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 32 24" width="32" xmlns="http://www.w3.org/2000/svg"><path d="m27.904 0h-23.808c-2.26216 0-4.096 1.84863-4.096 4.12903v15.74197c0 2.2804 1.83384 4.129 4.096 4.129h23.808c2.2622 0 4.096-1.8486 4.096-4.129v-15.74197c0-2.2804-1.8338-4.12903-4.096-4.12903z" fill="#0071c0"/><path d="m6.47411 0c-.01075.0715255-.02304.144649-.03686.219771-.47501 2.537759-2.1001 3.414439-4.17562 3.414439h-1.05677c-.25382 0-.467708.1918-.50726.45233l-.541056 3.57068-.15321602 1.01215c-.02572798.17102.10099202.32526.26688002.32526h1.874302c.22195 0 .4105-.16782.44544-.39559l.01843-.09909.3529-2.33038.02266-.12786c.03456-.22857.22348-.39639.44544-.39639h.28032c1.81593 0 3.2375-.7672 3.65299-2.98729.17357-.92743.08371-1.701826-.37555-2.246459-.13901-.164229-.31143-.300487-.51303-.411571z" fill="#99c6e5" transform="translate(13.7683 8.87006)"/><path d="m5.27962.177415c-.07258-.021977-.14746-.041956-.22426-.059938-.07718-.0175813-.15629-.0331649-.2377-.0467508-.28492-.04795-.59712-.0707262-.93158-.0707262h-2.82317c-.069502 0-.13555.0163829-.194686.0459521-.130176.0651319-.226944.1933979-.250368.3504349l-.600576 3.958273-.01728.11548c.039552-.26053.25344-.45233.507264-.45233h1.056766c2.07552 0 3.70061-.87708 4.17562-3.414439.01421-.075121.02611-.148245.03686-.219771-.12019-.066331-.25037-.123071-.39053-.171421-.03456-.011988-.07027-.023575-.10636-.034764z" fill="#cce2f2" transform="translate(14.4659 8.48645)"/><path d="m3.69177 3.0764c.02343-.15704.12019-.28531.25037-.35004.05952-.02957.12518-.04595.19469-.04595h2.82317c.33446 0 .64665.02277.93158.07072.08141.01359.16051.02917.2377.04676.07679.01798.15168.03796.22425.05993.0361.01119.07181.02278.10675.03437.14016.04835.27034.10549.39053.17142.14131-.93782-.00115-1.57636-.48845-2.154557-.53721-.636537-1.50681-.909053-2.74752-.909053h-3.60192c-.25344 0-.46963.1918-.5088.452728l-1.50028429 9.895672c-.02956801.1958.11558429.3724.30528029.3724h2.223744l.55834-3.68613z" fill="#fff" transform="translate(11.392 5.80646)"/></svg>
\ No newline at end of file
diff --git a/res/static/img/payment_providers/paysafecard.svg b/res/static/img/payment_providers/paysafecard.svg
new file mode 100644
index 0000000..73d5a20
--- /dev/null
+++ b/res/static/img/payment_providers/paysafecard.svg
@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 32 24" width="32" xmlns="http://www.w3.org/2000/svg"><path d="m28 0h-24c-2.20914 0-4 1.79086-4 4v16c0 2.2091 1.79086 4 4 4h24c2.2091 0 4-1.7909 4-4v-16c0-2.20914-1.7909-4-4-4z" fill="#a4e3ff"/><g fill="#e3001b"><path d="m.524536 3.444c.169141-.05979.304837-.10519.436046-.168.253828-1.12455 1.308438-1.99371 2.529068-2.016 1.30841.02229 2.36345.89269 2.61628 2.016.38409.10697.7051.25968.9593.504.00617-.23937-.00316-.45357 0-.672-.19017-1.73409-1.69852-3.108-3.57558-3.108-1.85543 0-3.3968533 1.46058-3.48836989 3.276.00034611.16806-.00304608.33231 0 .504.16190889-.13042.34340389-.24763.52325589-.336z" transform="translate(12.5 6.75)"/><path d="m5.84302 0h-4.27325c-.20796 0-.42017.0456562-.610468.168-.239251.060281-.412097.167223-.523256.336-.291437.264339-.42663373.71062-.436046 1.26v3.276c.00941227.54979.144609.99566.436046 1.26.111159.16919.284005.27613.523256.336.190298.12152.402508.168.610468.168h4.27325c1.08025-.00946 1.63944-.58942 1.65698-1.764v-3.276c-.01754-1.177051-.57673-1.75495119-1.65698-1.764z" transform="translate(12.25 10.75)"/></g></svg>
\ No newline at end of file
diff --git a/res/static/img/payment_providers/postepay.svg b/res/static/img/payment_providers/postepay.svg
new file mode 100644
index 0000000..364ea4d
--- /dev/null
+++ b/res/static/img/payment_providers/postepay.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="24" rx="4" fill="#F7E224"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3983 7.00271C11.9431 6.99534 11.4907 7.07628 11.0662 7.24107L11.0662 7.24506C10.9522 7.27758 10.8421 7.32261 10.7379 7.37933C10.1622 7.67907 9.64103 8.07393 9.19636 8.54732L9.32958 7.14096H7.68815C7.67788 7.26739 7.67032 7.39111 7.66283 7.51378C7.64602 7.78889 7.62954 8.05877 7.58347 8.34232C7.55143 8.53956 7.51829 8.72907 7.4851 8.91881C7.4493 9.1235 7.41346 9.32845 7.37889 9.54368L5 19.9412L6.81747 19.9173L7.91176 15.15C8.22431 15.601 8.63408 15.9757 9.11072 16.2465C9.62142 16.5024 10.186 16.6316 10.7569 16.6231L11.0804 16.6231C11.7329 16.5775 12.3654 16.4022 12.9265 16.0654C13.619 15.6815 14.1895 15.1098 14.5727 14.4159C14.9693 13.785 15.2481 13.0872 15.3957 12.3564C15.5887 11.6295 15.6531 10.8744 15.5861 10.1253C15.5432 9.26397 15.1899 8.44749 14.5917 7.82745C14.3001 7.54947 13.9556 7.33318 13.5788 7.19148C13.2019 7.04978 12.8005 6.98558 12.3983 7.00271ZM11.0803 8.19458C10.8264 8.27945 10.5836 8.39469 10.3573 8.53778C9.88947 8.87492 9.51329 9.32397 9.26297 9.84402C8.93712 10.4435 8.69537 11.0852 8.54455 11.7509C8.39834 12.3446 8.34062 12.9567 8.37327 13.5673C8.3768 13.8112 8.42933 14.0519 8.52773 14.2751C8.62613 14.4982 8.76838 14.6992 8.946 14.866C9.12362 15.0329 9.33296 15.1622 9.56153 15.2462C9.7901 15.3302 10.0332 15.3672 10.2764 15.355C10.5432 15.3572 10.8234 15.3231 11.0804 15.2513L11.0954 15.2468C11.3257 15.1773 11.5499 15.1097 11.7656 15.0022C12.2406 14.692 12.6287 14.2654 12.8932 13.7627C13.2091 13.2023 13.4506 12.6029 13.6116 11.9798C13.7694 11.3751 13.8272 10.7487 13.7829 10.1253C13.7439 9.58038 13.5284 9.06313 13.1691 8.6522C12.9851 8.46906 12.7657 8.32553 12.5243 8.23044C12.283 8.13534 12.0248 8.09068 11.7656 8.09919C11.5331 8.09842 11.302 8.1338 11.0804 8.20407L11.0803 8.19458ZM22.0564 8.77434C22.2483 8.73447 22.4432 8.71077 22.6392 8.70348C22.8326 8.69861 23.025 8.73251 23.2048 8.80314C23.3846 8.87377 23.5481 8.97966 23.6854 9.11445C23.9698 9.42 24.1297 9.81877 24.1345 10.234C24.167 10.7606 24.1203 11.2891 23.996 11.8022C23.8625 12.3877 23.6672 12.9577 23.4131 13.5028C23.23 13.9071 22.9593 14.2667 22.6201 14.5562C22.4522 14.6935 22.2515 14.7862 22.0373 14.8254V16.5968C22.0868 16.5968 22.1457 16.6049 22.2053 16.6131C22.2663 16.6214 22.3281 16.6299 22.3812 16.6299C23.0811 16.6367 23.7704 16.4613 24.3801 16.1214C24.9897 15.7814 25.4981 15.2889 25.8543 14.6932C26.7752 13.3203 27.1606 11.6635 26.9388 10.0308C26.9299 9.1998 26.6119 8.40107 26.0454 7.78708C25.7617 7.52165 25.4268 7.31543 25.0607 7.18071C24.6947 7.04599 24.3049 6.98553 23.9147 7.00295C23.3556 6.99113 22.8013 7.10754 22.2952 7.34305C22.2194 7.38574 22.1394 7.42056 22.0564 7.44697V8.77434ZM22.0564 8.77434L22.0468 7.44697C21.6123 7.70726 21.2085 8.01463 20.8429 8.36338L20.9098 7.24385H18.3301C18.2632 7.86738 18.0912 8.82157 17.8141 10.0781L15.6118 19.9412H18.4782L19.5769 15.0805C19.8227 15.5627 20.2109 15.9598 20.6901 16.2189C21.1046 16.4386 21.5628 16.566 22.0325 16.5921V14.8207C21.8978 14.8626 21.758 14.8864 21.6168 14.8915C21.4045 14.9007 21.1928 14.8631 20.9969 14.7814C20.8011 14.6997 20.6261 14.576 20.4846 14.4192C20.164 14.0482 19.9818 13.5796 19.9687 13.0918C19.8451 12.0283 20.0748 10.9539 20.6232 10.0308C20.9225 9.44745 21.4348 8.9983 22.0564 8.77434Z" fill="#0054A4"/>
+</svg>
diff --git a/res/static/img/payment_providers/przelewy24.svg b/res/static/img/payment_providers/przelewy24.svg
new file mode 100644
index 0000000..6f33785
--- /dev/null
+++ b/res/static/img/payment_providers/przelewy24.svg
@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 32 24" width="32" xmlns="http://www.w3.org/2000/svg"><rect fill="#d13239" height="24" rx="4" width="32"/><g clip-rule="evenodd" fill-rule="evenodd"><path d="m11.446 7.7201c-.1272-.13466-.3105-.23939-.5125-.32168-.2132-.08229-.4488-.14214-.6807-.18328-.29178-.05237-.57606-.07481-.77804-.08229-.18703-.00748-.30672-.00748-.30672-.00748h-2.55848-1.9039l-1.70566 10.30123h1.59344l.6284-3.8153 3.08963.015s1.20443.0486 2.05723-.404c.8529-.4526 1.081-1.4812 1.081-1.4812s.0935-.3815.1721-.8453c.086-.5125.1721-1.12592.2169-1.45134.0187-.14214.03-.23191.03-.23191s.0224-.10473.0224-.26931c.0037-.22817-.0299-.5723-.2095-.90146-.0636-.11595-.1384-.22069-.2356-.32168zm-1.2269 1.81787c0 .0187-.1421.84533-.32915 1.82533-.07107.3741-.35908.5761-.68825.6471-.54611.116-1.13336.0935-1.13336.0935l-2.58093-.0074.56856-3.42258 2.33779.00748s.1571-.00374.37779 0c.25061.00374.58351.01496.85657.05237.23565.02992.42268.07855.48248.15336.0786.09725.1085.22443.1197.33664.015.16458-.0112.30298-.0112.3142z" fill="#fff"/><path d="m12.9909 10.7349 1.6121.0037.0973-.6246s.172-1.12964.5573-1.34658c.1234-.07107.3217-.13466.5499-.17581.4226-.07481.9575-.08229 1.3952-.06733.6695.02245.9239.02993 1.6046.10848.6808.07855.5087.73687.5087.73687l-.1346.98377s-.0599.4414-.217.7144c-.1384.2431-.5199.4077-.7406.4788-.5311.172-2.349.6359-2.349.6359l-1.4289.4114s-.879.2544-1.369.7967c-.4937.5461-.6882 1.1633-.7556 1.485-.0673.3217-.4451 2.5473-.4451 2.5473l7.7129.0037.2581-1.5411-6.1007.0075.1084-.6284s.0711-.6471.3329-.8603c.0823-.0673.1235-.1571.6097-.3292.2918-.1047 1.2868-.3703 1.2868-.3703l2.3003-.6284s1.2568-.3216 1.7506-1.0099c.4937-.6845.6845-1.9974.6845-1.9974s.1346-1.2755.0299-1.67573c-.101-.40023-.4788-.87901-.9388-1.08474-.4601-.20572-.9389-.32542-2.3266-.30672s-2.076.08229-2.7792.34413c-.7032.25809-1.1109.72939-1.369 1.39519-.2805.63214-.4451 1.99367-.4451 1.99367z" fill="#d4d4d4"/><path d="m27.5113 13.6001 1.081-6.47846h-1.9151l-5.9623 6.40366-.2693 1.6234h5.2142l-.3815 2.2742 1.6009.0037.3778-2.2779 1.4774.0037.2656-1.5523zm-1.5934.0038-3.3702-.0038 4.1033-4.37257z" fill="#d4d4d4"/></g></svg>
\ No newline at end of file
diff --git a/res/static/img/payment_providers/sofort.svg b/res/static/img/payment_providers/sofort.svg
new file mode 100644
index 0000000..00c8b5a
--- /dev/null
+++ b/res/static/img/payment_providers/sofort.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28 0H4C1.79086 0 0 1.79086 0 4V20C0 22.2091 1.79086 24 4 24H28C30.2091 24 32 22.2091 32 20V4C32 1.79086 30.2091 0 28 0Z" fill="#F4B6C7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 17.25H10V6.75H12.25V17.25ZM12.6667 12.0222C14.6631 11.039 15.9534 9.05237 15.9999 6.75088H18.3632C18.3311 8.93615 17.4292 10.9634 15.8415 12.4672L18.9999 17.25H15.9999L12.6667 12.0222Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 15.7501C19 16.5784 19.6716 17.25 20.5001 17.25C21.3284 17.25 22 16.5784 22 15.7501C22 14.9216 21.3284 14.25 20.5001 14.25C19.6716 14.25 19 14.9216 19 15.7501Z" fill="black"/>
+</svg>
diff --git a/res/static/style/layout.css b/res/static/style/layout.css
index 55467c5..196fe8d 100644
--- a/res/static/style/layout.css
+++ b/res/static/style/layout.css
@@ -88,10 +88,13 @@ footer {
 	clear: both;
 }
 
-header>h1 {
-	margin-top: 30px;
-	margin-bottom: 30px;
-	color: var(--background_text_color);
+footer {
+	background-image: url("/res/img/nebula.webp");
+	background-color: var(--background_color);
+	background-blend-mode: luminosity;
+	box-shadow: inset 0 0 10px -4px var(--shadow_color);
+	border-radius: 8px;
+	margin: 16px;
 }
 
 footer>.footer_content {
@@ -106,6 +109,12 @@ footer>.footer_content {
 	margin: 120px 0 60px 0;
 }
 
+header>h1 {
+	margin-top: 30px;
+	margin-bottom: 30px;
+	color: var(--background_text_color);
+}
+
 /* Page layout elements */
 
 .button_toggle_navigation {
@@ -164,9 +173,10 @@ footer>.footer_content {
 }
 
 .page_content,
-.page_margins {
-	margin-right: 5px;
-	margin-left: 5px;
+.page_margins,
+footer {
+	margin-right: 16px;
+	margin-left: 16px;
 }
 
 @media (max-width: 1100px) {
@@ -181,7 +191,8 @@ footer>.footer_content {
 	}
 
 	.page_content,
-	.page_margins {
+	.page_margins,
+	footer {
 		margin-left: 0;
 		margin-right: 0;
 	}
diff --git a/res/template/fragments/page_wrap.html b/res/template/fragments/page_wrap.html
index 4202e47..0f99029 100644
--- a/res/template/fragments/page_wrap.html
+++ b/res/template/fragments/page_wrap.html
@@ -2,6 +2,8 @@
 <button id="button_toggle_navigation" class="button_toggle_navigation" onclick="toggleMenu();">☰</button>
 <nav id="page_navigation" class="page_navigation">
 	<a href="/#">Home</a>
+	<a href="/#pro">Subscriptions</a>
+	<a href="/#prepaid">Prepaid plans</a>
 	<hr />
 	{{if .Authenticated}}<a href="/user">{{.User.Username}}</a>
 	<a href="/user/filemanager#files">My Files</a>
diff --git a/svelte/src/home_page/ForCreators.svelte b/svelte/src/home_page/ForCreators.svelte
index db2082e..5c9c173 100644
--- a/svelte/src/home_page/ForCreators.svelte
+++ b/svelte/src/home_page/ForCreators.svelte
@@ -1,3 +1,7 @@
+<script>
+import MollieDeposit from "../user_home/MollieDeposit.svelte";
+</script>
+
 <header id="prepaid">
 	<div class="header_image_container"></div>
 </header>
@@ -15,16 +19,20 @@
 	<img src="/res/img/misc/sunrise.webp" class="float_right" alt="Sunrise">
 	<h2>Simple and affordable</h2>
 
-	<span class="keyword">€4 per TB per month for storage</span><br/>
-	<span class="keyword">€2 per TB for data transfer</span><br/>
-	<p>
-		You are only charged for what you use. And it's only 1.4% the price of
-		Amazon AWS. Yea, seriously, you could save 98% on your bandwidth bill by
-		switching!
-	</p>
-	<p>
-		Cheaper storage is also available with file expiry enabled.
-	</p>
+	No file expiry:
+	<ul>
+		<li><span class="keyword">€2.00 per month</span> base price<br/></li>
+		<li><span class="keyword">€4.00 per TB per month</span> for storage<br/></li>
+		<li><span class="keyword">€2.00 per TB</span> for data transfer<br/></li>
+	</ul>
+	<hr/>
+	240 day file expiry:
+	<ul>
+		<li><span class="keyword">€1.00 per month</span> base price<br/></li>
+		<li><span class="keyword">€0.50 per TB per month</span> for storage<br/></li>
+		<li><span class="keyword">€2.00 per TB</span> for data transfer<br/></li>
+	</ul>
+
 	<br style="clear: right;"/>
 	<br/>
 
@@ -38,19 +46,34 @@
 		and circumvent the download page completely.
 	</p>
 	<br style="clear: both;"/>
-	<h2>Interested?</h2>
-	<p>
-		To get started we will need the name and address of your business, and
-		the name of your pixeldrain account. We will prepare an invoice for you.
-		Your deposit needs to be at least €100 to save on administrative work.
-		We accept SEPA, PayPal and Bitcoin.
-	</p>
-	<p style="text-align: center;">
-		<a href="mailto:sales@pixeldrain.com" class="button button_highlight round" style="font-size: 1.4em">
-			<i class="icon">mail</i>
-			Contact sales@pixeldrain.com
-		</a>
-	</p>
+	<h2>Get started</h2>
+	{#if window.user.username !== ""}
+		{#if window.user.subscription.id !== ""}
+			<p>You already have a subscription active</p>
+		{:else}
+			<p>
+				You are currently logged in as {window.user.username}. Use the
+				form below to activate a prepaid subscription on this account.
+			</p>
+			<MollieDeposit/>
+		{/if}
+	{:else}
+		<p>
+			You are currently not logged in to a pixeldrain account. Log in to
+			get started.
+		</p>
+		<p style="text-align: center;">
+			<a href="/login?redirect=checkout" class="button button_highlight" style="font-size: 1.2em">
+				<i class="icon">login</i>
+				Log in
+			</a>
+			or
+			<a href="/register?redirect=checkout" class="button button_highlight" style="font-size: 1.2em">
+				<i class="icon">how_to_reg</i>
+				Register
+			</a>
+		</p>
+	{/if}
 </section>
 
 
@@ -75,7 +98,7 @@ header {
 	background-position: center;
 }
 .keyword {
-	font-size: 1.1em;
+	font-weight: bold;
 }
 h2 {
 	border-bottom: none;
diff --git a/svelte/src/home_page/HomePage.svelte b/svelte/src/home_page/HomePage.svelte
index 36d8c45..a80afb6 100644
--- a/svelte/src/home_page/HomePage.svelte
+++ b/svelte/src/home_page/HomePage.svelte
@@ -2,6 +2,7 @@
 import Footer from "../layout/Footer.svelte";
 import AddressReputation from "./AddressReputation.svelte";
 import FeatureTable from "./FeatureTable.svelte";
+import ForCreators from "./ForCreators.svelte";
 import OtherPlans from "./OtherPlans.svelte";
 import UploadWidget from "./UploadWidget.svelte";
 </script>
@@ -68,17 +69,18 @@ import UploadWidget from "./UploadWidget.svelte";
 		<OtherPlans></OtherPlans>
 		<br/>
 	</section>
-
 </div>
 
 <div class="page_content">
-	<Footer></Footer>
+	<ForCreators/>
 </div>
 
+<Footer/>
+
 <style>
 .page_content {
-	margin-top: 5px;
-	margin-bottom: 10px;
+	margin-top: 16px;
+	margin-bottom: 16px;
 }
 @media (max-width: 1100px) {
 	.page_content {
diff --git a/svelte/src/layout/Footer.svelte b/svelte/src/layout/Footer.svelte
index 6db17b6..e74d733 100644
--- a/svelte/src/layout/Footer.svelte
+++ b/svelte/src/layout/Footer.svelte
@@ -35,13 +35,3 @@ import Twitter from "../icons/Twitter.svelte";
 		</span>
 	</div>
 </footer>
-
-<style>
-.footer_content {
-	background-color: var(--body_background);
-	color: var(--body_text_color);
-	display: inline-block;
-	border-radius: 8px;
-	margin: 160px 0 60px 0;
-}
-</style>
diff --git a/svelte/src/user_home/DepositCredit.svelte b/svelte/src/user_home/DepositCredit.svelte
index 50cd400..72f37bd 100644
--- a/svelte/src/user_home/DepositCredit.svelte
+++ b/svelte/src/user_home/DepositCredit.svelte
@@ -72,7 +72,7 @@ onMount(() => {
 <LoadingIndicator loading={loading}/>
 
 <section>
-	<h2>Deposit credits</h2>
+	<h2 id="deposit">Deposit credits</h2>
 	<p>
 		Pixeldrain credits can be used for our prepaid plans, which are
 		different from the Patreon plans. With prepaid you only pay for what you
@@ -81,11 +81,10 @@ onMount(() => {
 	</p>
 	<p>
 		Use the form below to deposit credit on your pixeldrain account using
-		Mollie. The minimum deposit is €10. <b>Mollie payments are currently
-		only available in Europe</b>.
+		Mollie. The minimum deposit is €10.
 	</p>
 
-	<MollieDeposit on:checkout={e => checkout("mollie", e.detail.amount, e.detail.country)}/>
+	<MollieDeposit/>
 
 	<h3>Crypto payments</h3>
 	<p>
@@ -116,7 +115,7 @@ onMount(() => {
 		</button>
 	</div>
 
-	<h3>Past invoices</h3>
+	<h3 id="invoices">Past invoices</h3>
 	<p>
 		Invoices are deleted after one year of inactivity.
 	</p>
diff --git a/svelte/src/user_home/MollieDeposit.svelte b/svelte/src/user_home/MollieDeposit.svelte
index 158e577..8f127f5 100644
--- a/svelte/src/user_home/MollieDeposit.svelte
+++ b/svelte/src/user_home/MollieDeposit.svelte
@@ -1,18 +1,18 @@
 <script>
-import { createEventDispatcher } from 'svelte';
 import {
 	At, Be, Bg, Hr, Cy, Cz, Dk, Ee, Fi, Fr, De, Gr, Hu, Ie, It, Lv, Lt, Lu, Mt,
 	Nl, Pl, Pt, Ro, Sk, Si, Es, Se,
 } from 'svelte-flag-icons';
 import Euro from '../util/Euro.svelte';
+import LoadingIndicator from '../util/LoadingIndicator.svelte';
 
-let dispatch = createEventDispatcher()
-
-let credit_amount = 10
-$: credit_micro = credit_amount*1e6
-$: vat_micro = country === null ? 0 : (credit_amount*1e6)*(country.vat/100)
+let loading = false
+let amount = 20
 let country = null
 
+$: credit_micro = amount*1e6
+$: vat_micro = country === null ? 0 : (amount*1e6)*(country.vat/100)
+
 let countries = [
 	{name: "Austria", code: At, vat: 20},
 	{name: "Belgium", code: Be, vat: 21},
@@ -41,28 +41,75 @@ let countries = [
 	{name: "Slovenia", code: Si, vat: 22},
 	{name: "Spain", code: Es, vat: 21},
 	{name: "Sweden", code: Se, vat: 25},
+	{name: "Other", code: null, vat: 0},
 ]
 
 let amounts = [10, 20, 50, 100, 200, 500, 1000, 2000, 5000]
 
-const checkout = () => {
-	dispatch("checkout", {country: country.name, amount: credit_amount})
+const checkout = async () => {
+	loading = true
+
+	if (amount < 10) {
+		alert("Amount needs to be at least €10")
+		return
+	}
+
+	const form = new FormData()
+	form.set("amount", amount*1e6)
+	form.set("network", "mollie")
+	form.set("country", country.name)
+
+	try {
+		const resp = await fetch(
+			window.api_endpoint+"/user/invoice",
+			{method: "POST", body: form},
+		)
+		if(resp.status >= 400) {
+			let json = await resp.json()
+			throw json.message
+		}
+
+		window.location = (await resp.json()).checkout_url
+	} catch (err) {
+		alert(err)
+	} finally {
+		loading = false
+	}
 }
 
 </script>
 
 <div class="highlight_border">
+	<LoadingIndicator loading={loading}/>
+
 	{#if country === null}
 
 		<div>Please pick your country of residence</div>
 		<div class="countries">
 			{#each countries as c}
 				<button on:click={() => country = c}>
-					<svelte:component this={c.code} size="1.5em" />
+					{#if c.code}
+						<svelte:component this={c.code} size="1.5em" />
+					{:else}
+						<i class="icon">public</i>
+					{/if}
 					<span>{c.name}</span>
 				</button>
 			{/each}
 		</div>
+		<div>
+			We support the following payment processors<br/>
+			<img class="bankicon" src="/res/img/payment_providers/ideal.svg" alt="iDEAL"/>
+			<img class="bankicon" src="/res/img/payment_providers/klarna.svg" alt="Klarna"/>
+			<img class="bankicon" src="/res/img/payment_providers/bancontact.svg" alt="Bancontact"/>
+			<img class="bankicon" src="/res/img/payment_providers/banktransfer.svg" alt="SEPA"/>
+			<img class="bankicon" src="/res/img/payment_providers/sofort.svg" alt="SOFORT"/>
+			<img class="bankicon" src="/res/img/payment_providers/kbc.svg" alt="KBC/CBC"/>
+			<img class="bankicon" src="/res/img/payment_providers/belfius.svg" alt="Belfius"/>
+			<img class="bankicon" src="/res/img/payment_providers/giropay.svg" alt="Giropay"/>
+			<img class="bankicon" src="/res/img/payment_providers/eps.svg" alt="EPS"/>
+			<img class="bankicon" src="/res/img/payment_providers/przelewy24.svg" alt="Przelewy24"/>
+		</div>
 
 	{:else}
 
@@ -74,7 +121,11 @@ const checkout = () => {
 			<div style="flex: 1 1 auto;"></div>
 			<div style="flex: 0 0 auto; display: flex; gap: 0.25em; align-items: center;">
 				<span>Paying from</span>
-				<svelte:component this={country.code} size="1.5em" />
+				{#if country.code}
+					<svelte:component this={country.code} size="1.5em" />
+				{:else}
+					<i class="icon">public</i>
+				{/if}
 				<span>{country.name} ({country.vat}% VAT)</span>
 			</div>
 		</div>
@@ -82,14 +133,14 @@ const checkout = () => {
 		<form class="amount_grid" on:submit|preventDefault={checkout}>
 			<div class="span3">Please choose an amount</div>
 			{#each amounts as a}
-				<button on:click|preventDefault={() => credit_amount = a} style="font-size: 1.1em;" class:button_highlight={credit_amount === a}>
+				<button on:click|preventDefault={() => amount = a} style="font-size: 1.1em;" class:button_highlight={amount === a}>
 					<div style="padding: 6px;">€ {a}</div>
 				</button>
 			{/each}
 
 			<div class="span3 mollie_checkout">
 				<div>Custom amount €</div>
-				<input type="number" bind:value={credit_amount} min="10"/>
+				<input type="number" bind:value={amount} min="10"/>
 			</div>
 
 			<div class="span2" style="text-align: initial;">
@@ -145,4 +196,9 @@ const checkout = () => {
 .mollie_checkout > input[type="number"] {
 	flex: 1 1 auto;
 }
+
+.bankicon {
+	width: 40px;
+	height: 30px;
+}
 </style>
diff --git a/svelte/src/user_home/Subscription.svelte b/svelte/src/user_home/Subscription.svelte
index 3c6ac98..e4267e9 100644
--- a/svelte/src/user_home/Subscription.svelte
+++ b/svelte/src/user_home/Subscription.svelte
@@ -50,8 +50,17 @@ onMount(() => {
 		<div class="highlight_green">
 			<h2>Payment successful!</h2>
 			<p>
-				The credit has been added to your account balance. Activate a
-				subscription plan below to finish upgrading your account.
+				Thank you for supporting pixeldrain! The credit has been added
+				to your account balance. Activate a subscription plan below to
+				finish upgrading your account.
+			</p>
+			<p>
+				If your account credit has not been updated, please check the
+				status of your invoice on <a
+				href="/user/prepaid/deposit#invoices">the invoices page</a>.
+				Depending on the payment processor you used to can take a while
+				before your credit is deposited. If it takes too long contact
+				support@pixeldrain.com.
 			</p>
 		</div>
 	{/if}
diff --git a/webcontroller/user_account.go b/webcontroller/user_account.go
index a89d5dd..3baebee 100644
--- a/webcontroller/user_account.go
+++ b/webcontroller/user_account.go
@@ -24,9 +24,9 @@ func formAPIError(err error, f *Form) {
 		return name
 	}
 
-	if err, ok := err.(pixelapi.Error); ok {
-		if err.StatusCode == "multiple_errors" {
-			for _, err := range err.Errors {
+	if apierr, ok := err.(pixelapi.Error); ok {
+		if apierr.StatusCode == "multiple_errors" {
+			for _, err := range apierr.Errors {
 				// Modify the message to make it more user-friendly
 				if err.StatusCode == "string_out_of_range" {
 					err.Message = fmt.Sprintf(
@@ -47,7 +47,7 @@ func formAPIError(err error, f *Form) {
 				f.SubmitMessages = append(f.SubmitMessages, template.HTML(err.Message))
 			}
 		} else {
-			f.SubmitMessages = append(f.SubmitMessages, template.HTML(err.Message))
+			f.SubmitMessages = append(f.SubmitMessages, template.HTML(apierr.Message))
 		}
 	} else {
 		log.Error("Error submitting form: %s", err)
@@ -141,6 +141,7 @@ func (wc *WebController) registerForm(td *TemplateData, r *http.Request) (f Form
 		}
 		log.Debug("capt: %s", f.FieldVal("recaptcha_response"))
 
+		// Register the user
 		if err = td.PixelAPI.UserRegister(
 			f.FieldVal("username"),
 			f.FieldVal("email"),
@@ -148,14 +149,31 @@ func (wc *WebController) registerForm(td *TemplateData, r *http.Request) (f Form
 			f.FieldVal("recaptcha_response"),
 		); err != nil {
 			formAPIError(err, &f)
-		} else {
-			// Request was a success
-			f.SubmitSuccess = true
-			f.SubmitMessages = []template.HTML{
-				`Registration completed! You can now <a href="/login">log in ` +
-					`to your account</a>.<br/>We're glad to have you on ` +
-					`board, have fun sharing!`}
+			return f
 		}
+
+		// Registration successful. Log the user in
+		session, err := td.PixelAPI.PostUserLogin(
+			f.FieldVal("username"),
+			f.FieldVal("password"),
+			"website login",
+		)
+		if err != nil {
+			log.Debug("Login failed: %s", err)
+			formAPIError(err, &f)
+			return
+		}
+
+		f.Extra.SetCookie = wc.sessionCookie(session)
+		f.Extra.RedirectTo = wc.loginRedirect(r)
+
+		// Request was a success
+		f.SubmitSuccess = true
+		f.SubmitMessages = []template.HTML{
+			`Registration completed! You can now <a href="/login">log in ` +
+				`to your account</a>.<br/>We're glad to have you on ` +
+				`board, have fun sharing!`}
+
 	}
 	return f
 }
@@ -186,6 +204,13 @@ func (wc *WebController) loginForm(td *TemplateData, r *http.Request) (f Form) {
 		),
 	}
 
+	// If the user is already logged in we redirect to the target page
+	// immediately
+	if td.Authenticated {
+		f.Extra.RedirectTo = wc.loginRedirect(r)
+		return f
+	}
+
 	if f.ReadInput(r) {
 		if session, err := td.PixelAPI.PostUserLogin(
 			f.FieldVal("username"),
@@ -200,29 +225,41 @@ func (wc *WebController) loginForm(td *TemplateData, r *http.Request) (f Form) {
 			f.SubmitMessages = []template.HTML{"Success!"}
 
 			// Set the autentication cookie
-			f.Extra.SetCookie = &http.Cookie{
-				Name:    "pd_auth_key",
-				Value:   session.AuthKey.String(),
-				Path:    "/",
-				Expires: time.Now().AddDate(50, 0, 0),
-				Domain:  wc.config.SessionCookieDomain,
-
-				// Strict means the Cookie will only be sent when the user
-				// reaches a page by a link from the same domain. Lax means any
-				// page on the domain gets the cookie and None means embedded
-				// content also gets the cookie.
-				//
-				// Users who see pixeldrain links in iframes also expect their
-				// accounts to be logged in so we need to use None
-				SameSite: http.SameSiteNoneMode,
-				Secure:   true,
-			}
-			f.Extra.RedirectTo = "/user"
+			f.Extra.SetCookie = wc.sessionCookie(session)
+			f.Extra.RedirectTo = wc.loginRedirect(r)
 		}
 	}
 	return f
 }
 
+func (wc *WebController) sessionCookie(session pixelapi.UserSession) *http.Cookie {
+	return &http.Cookie{
+		Name:    "pd_auth_key",
+		Value:   session.AuthKey.String(),
+		Path:    "/",
+		Expires: time.Now().AddDate(50, 0, 0),
+		Domain:  wc.config.SessionCookieDomain,
+
+		// Strict means the Cookie will only be sent when the user
+		// reaches a page by a link from the same domain. Lax means any
+		// page on the domain gets the cookie and None means embedded
+		// content also gets the cookie.
+		//
+		// Users who see pixeldrain links in iframes also expect their
+		// accounts to be logged in so we need to use None
+		SameSite: http.SameSiteNoneMode,
+		Secure:   true,
+	}
+}
+
+func (wc *WebController) loginRedirect(r *http.Request) string {
+	if redirect := r.URL.Query().Get("redirect"); redirect == "checkout" {
+		return "/user/prepaid/deposit#deposit"
+	} else {
+		return "/user"
+	}
+}
+
 func (wc *WebController) passwordResetForm(td *TemplateData, r *http.Request) (f Form) {
 	f = Form{
 		Name:  "password_reset",