pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add paypal to checkout widget

Browse Source
This commit is contained in:
Fornax
2023-11-27 16:31:49 +01:00
parent a95764dc6f
commit cc84e6a1b0
2 changed files with 73 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
svelte/src/file_viewer/viewers/Video.svelte
View File

@@ -106,7 +106,6 @@ const fullscreen = () => {
bind:this={player} bind:this={player}
controls controls
playsinline playsinline
autoplay
loop={loop} loop={loop}
class="video" class="video"
on:pause={() => playing = false } on:pause={() => playing = false }

90
svelte/src/user_home/MollieDeposit.svelte
View File

@@ -83,7 +83,9 @@ const checkout = async () => {
{#if country === null} {#if country === null}
<div>Please pick your country of residence</div> <div>
Please pick your country of residence
</div>
<div class="countries"> <div class="countries">
{#each countries as c} {#each countries as c}
<button on:click={() => country = c}> <button on:click={() => country = c}>
@@ -97,17 +99,53 @@ const checkout = async () => {
{/each} {/each}
</div> </div>
<div> <div>
We support the following payment processors<br/> We support the following payment processors
<img class="bankicon" src="/res/img/payment_providers/ideal.svg" alt="iDEAL" title="iDEAL"/> </div>
<img class="bankicon" src="/res/img/payment_providers/klarna.svg" alt="Klarna" title="Klarna"/> <div class="processors">
<img class="bankicon" src="/res/img/payment_providers/bancontact.svg" alt="Bancontact" title="Bancontact"/> <div>
<img class="bankicon" src="/res/img/payment_providers/banktransfer.svg" alt="SEPA" title="SEPA"/> <img class="bankicon" src="/res/img/payment_providers/paypal.svg" alt="PayPal" title="PayPal"/>
<img class="bankicon" src="/res/img/payment_providers/sofort.svg" alt="SOFORT" title="SOFORT"/> PayPal
<img class="bankicon" src="/res/img/payment_providers/kbc.svg" alt="KBC/CBC" title="CBC"/> </div>
<img class="bankicon" src="/res/img/payment_providers/belfius.svg" alt="Belfius" title="Belfius"/> <div>
<img class="bankicon" src="/res/img/payment_providers/giropay.svg" alt="Giropay" title="Giropay"/> <img class="bankicon" src="/res/img/payment_providers/ideal.svg" alt="iDEAL" title="iDEAL"/>
<img class="bankicon" src="/res/img/payment_providers/eps.svg" alt="EPS" title="EPS"/> iDEAL
<img class="bankicon" src="/res/img/payment_providers/przelewy24.svg" alt="Przelewy24" title="Przelewy24"/> </div>
<div>
<img class="bankicon" src="/res/img/payment_providers/klarna.svg" alt="Klarna" title="Klarna"/>
Klarna
</div>
<div>
<img class="bankicon" src="/res/img/payment_providers/bancontact.svg" alt="Bancontact" title="Bancontact"/>
Bancontact
</div>
<div>
<img class="bankicon" src="/res/img/payment_providers/banktransfer.svg" alt="SEPA" title="SEPA"/>
SEPA
</div>
<div>
<img class="bankicon" src="/res/img/payment_providers/sofort.svg" alt="SOFORT" title="SOFORT"/>
SOFORT
</div>
<div>
<img class="bankicon" src="/res/img/payment_providers/kbc.svg" alt="KBC/CBC" title="CBC"/>
KBC/CBC
</div>
<div>
<img class="bankicon" src="/res/img/payment_providers/belfius.svg" alt="Belfius" title="Belfius"/>
Belfius
</div>
<div>
<img class="bankicon" src="/res/img/payment_providers/giropay.svg" alt="Giropay" title="Giropay"/>
Giropay
</div>
<div>
<img class="bankicon" src="/res/img/payment_providers/eps.svg" alt="EPS" title="EPS"/>
EPS
</div>
<div>
<img class="bankicon" src="/res/img/payment_providers/przelewy24.svg" alt="Przelewy24" title="Przelewy24"/>
Przelewy24
</div>
</div> </div>
{:else} {:else}
@@ -132,8 +170,12 @@ const checkout = async () => {
<form class="amount_grid" on:submit|preventDefault={checkout}> <form class="amount_grid" on:submit|preventDefault={checkout}>
<div class="span3">Please choose an amount</div> <div class="span3">Please choose an amount</div>
{#each amounts as a} {#each amounts as a}
<button on:click|preventDefault={() => amount = a} style="font-size: 1.1em;" class:button_highlight={amount === a}> <button
<div style="padding: 6px;">€ {a}</div> on:click|preventDefault={() => amount = a}
class="amount_button"
class:button_highlight={amount === a}
>
€ {a}
</button> </button>
{/each} {/each}
@@ -157,15 +199,24 @@ const checkout = async () => {
<style> <style>
.countries { .countries {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
} }
.countries > button { .countries > button {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
text-align: left; text-align: left;
gap: 5px;
} }
.countries > button > span {
margin-left: 0.5em; .processors {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.processors > div {
display: flex;
align-items: center;
gap: 5px;
margin: 3px;
} }
.amount_grid { .amount_grid {
@@ -175,6 +226,11 @@ const checkout = async () => {
align-items: center; align-items: center;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
} }
.amount_button {
font-size: 1.1em;
line-height: 1.6em;
justify-content: center;
}
.span2 { .span2 {
grid-column: span 2; grid-column: span 2;