mirror of
https://github.com/jlengrand/checkoutCreate.git
synced 2026-03-10 08:11:18 +00:00
186 lines
10 KiB
HTML
186 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
|
|
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/application.css') }}" />
|
|
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Oleo+Script:wght@700&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Engagement&family=Lato:ital@1&family=Roboto+Condensed:wght@300&display=swap');
|
|
</style>
|
|
|
|
<title>Checkout Create</title>
|
|
</head>
|
|
<body>
|
|
<header id="header">
|
|
<div class="logo-box">
|
|
<a href="{{ url_for('checkout') }}">
|
|
<img
|
|
class="logo-image"
|
|
src="{{ url_for('static', filename='img/mystore-logo.svg') }}"
|
|
alt="BARB logo"
|
|
/>
|
|
</a>
|
|
<!--<a class="logo-title">All Things Retro</a>-->
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Adyen CSS from TEST environment (change to live for production)-->
|
|
<link rel="stylesheet"
|
|
href="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/5.15.0/adyen.css"
|
|
integrity="sha384-Dm1w8jaVOWA8rxpzkxA41DIyw5VlBjpoMTPfAijlfepYGgLKF+hke3NKeU/KTX7t"
|
|
crossorigin="anonymous">
|
|
|
|
<!-- Bootstrap-colorpicker CSS -->
|
|
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/3.4.0/css/bootstrap-colorpicker.min.css"
|
|
integrity="sha512-m/uSzCYYP5f55d4nUi9mnY9m49I8T+GUEe4OQd3fYTpFU9CIaPazUG/f8yUkY0EWlXBJnpsA7IToT2ljMgB87Q==" crossorigin="anonymous"
|
|
referrerpolicy="no-referrer" /> -->
|
|
|
|
|
|
<div id="payment-page" class="row">
|
|
<div class="checkout col">
|
|
<div id="dropin-container" class="payment p-5">
|
|
<!-- Component will be rendered here -->
|
|
</div>
|
|
</div>
|
|
<div class="settings col">
|
|
<h4>Change country: </h4>
|
|
<div class="country-selector">
|
|
<div class="country-selector__flag" aria-hidden="true">
|
|
<img id="flag_img" src="https://ca-test.adyen.com/ca/adl/img/flags/nl.svg" alt="Flag icon">
|
|
</div>
|
|
<select onchange="changeSelect(this)" id="country_select" class="country-selector__select" aria-label="country" autocomplete="off">
|
|
<option value="NL">Netherlands</option>
|
|
<option value="GB">United Kingdom</option>
|
|
<option value="US">United States</option>
|
|
</select>
|
|
<div class="dropdown-icon" aria-hidden="true">
|
|
<img src="{{ url_for('static', filename='img/dropdown.svg') }}" alt="Dropdown caret">
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<h2 id="letstest">this thing</h2>
|
|
<div class="font-selector">
|
|
<select onchange="changeFont(this)" id="font_select" class="font-selector__select" aria-label="font" autocomplete="off">
|
|
<option value="Segoe UI, sans-serif, Helvetica, Arial" style="font-family:'Segoe UI', sans-serif, Helvetica, Arial">Segoe UI</option>
|
|
<option value="Roboto Condensed, sans-serif" style="font-family:'Roboto Condensed', sans-serif">Roboto Condensed</option>
|
|
<option value="Engagement, cursive" style="font-family:'Engagement', cursive">Engagement</option>
|
|
<option value="Lato, sans-serif" style="font-family:'Lato', sans-serif">Lato</option>
|
|
<option value="Times New Roman, Times, serif" style="font-family:'Times New Roman', Times, serif">Times New Roman</option>
|
|
<option value="Arial, Helvetica, sans-serif" style="font-family:'Arial', Helvetica, sans-serif">Arial</option>
|
|
<option value="Lucida Console, 'Courier New', monospace" style="font-family:'Lucida Console', 'Courier New', monospace">Lucida</option>
|
|
</select>
|
|
<div class="dropdown-icon" aria-hidden="true">
|
|
<img src="{{ url_for('static', filename='img/dropdown.svg') }}" alt="Dropdown caret">
|
|
</div>
|
|
</div>
|
|
<!-- <div class="form-check">
|
|
<input type="checkbox" class="form-check-input" id="firstPayBox">
|
|
<label class="form-check-label" for="firstPayBox">Open First Payment</label>
|
|
</div> -->
|
|
<div class="form-group">
|
|
<label for="formControlRange">Change payment form width</label>
|
|
<input type="range" class="form-control-range" id="changeWidth" min="300" max="700" value="500" onchange="dropinWidth(this.value)">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="formControlRange">Change font size</label>
|
|
<input type="range" class="form-control-range" id="fontSize" min="13" max="17" value="17" onchange="fontWidth(this.value)">
|
|
</div>
|
|
<div class="custom-control custom-switch">
|
|
<input type="checkbox" class="custom-control-input" id="firstPayBox" data-toggle="toggle" checked>
|
|
<label class="custom-control-label" for="firstPayBox">Open first payment method</label>
|
|
</div>
|
|
<div class="custom-control custom-switch">
|
|
<input type="checkbox" class="custom-control-input" id="billAdd" data-toggle="toggle">
|
|
<label class="custom-control-label" for="billAdd">Add billing Address</label>
|
|
</div>
|
|
<div class="custom-control custom-switch">
|
|
<input type="checkbox" class="custom-control-input" id="onlyStored" data-toggle="toggle">
|
|
<label class="custom-control-label" for="onlyStored">Hide stored payment methods</label>
|
|
</div>
|
|
<div class="custom-control custom-switch">
|
|
<input type="checkbox" class="custom-control-input" id="holderName" data-toggle="toggle">
|
|
<label class="custom-control-label" for="holderName">Include card holder name</label>
|
|
</div>
|
|
<div class="custom-control custom-switch">
|
|
<input type="checkbox" class="custom-control-input" id="showPayMethod" data-toggle="toggle">
|
|
<label class="custom-control-label" for="showPayMethod">Show only saved Payment Methods</label>
|
|
</div>
|
|
<div class="custom-control custom-switch">
|
|
<input type="checkbox" class="custom-control-input" id="hideCVC" data-toggle="toggle">
|
|
<label class="custom-control-label" for="hideCVC">Hide CVC field</label>
|
|
</div>
|
|
<div class="custom-control custom-switch">
|
|
<input type="checkbox" class="custom-control-input" id="placeholderData" data-toggle="toggle">
|
|
<label class="custom-control-label" for="placeholderData">Include placeholder data</label>
|
|
</div>
|
|
<div class="custom-control custom-switch">
|
|
<input type="checkbox" class="custom-control-input" id="noBorder" data-toggle="toggle">
|
|
<label class="custom-control-label" for="noBorder">Include placeholder data</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="formControlRange">Change button edges</label>
|
|
<input type="range" class="form-control-range" id="buttonEdges" onchange="buttonEdges(this.value);" min="0" max="25" value="5">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="formControlRange">Change body edges</label>
|
|
<input type="range" class="form-control-range" id="bodyEdges" onchange="bodyEdges(this.value);" min="0" max="25" value="5">
|
|
</div>
|
|
<button type="button" onclick="setDynamicCSS()">change</button>
|
|
<input type="color" name="" id="" onchange="setDynamicCSS()">
|
|
<button type="button" onclick="resetDynamicCSS()">reset</button>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card__front card__part">
|
|
<img class="card__front-square card__square" src="{{ url_for('static', filename='img/chip.png') }}">
|
|
<img class="card__front-logo card__logo" src="{{ url_for('static', filename='img/LogoAdyen.png') }}">
|
|
<p class="card_numer" id="cardNumber">4111 1111 1111 1111</p>
|
|
<div class="card__space-75">
|
|
<span class="card__label">Card holder</span>
|
|
<p class="card__info">John Doe</p>
|
|
</div>
|
|
<div class="card__space-25">
|
|
<span class="card__label">Expires</span>
|
|
<p class="card__info">03/30</p>
|
|
</div>
|
|
</div>
|
|
<div class="card__back card__part">
|
|
<div class="card__black-line"></div>
|
|
<div class="card__back-content">
|
|
<div class="card__secret">
|
|
<p class="card__secret--last">737</p>
|
|
</div>
|
|
<img class="card__back-square card__square" src="{{ url_for('static', filename='img/chip.png') }}">
|
|
<img class="card__back-logo card__logo" src="{{ url_for('static', filename='img/LogoAdyen.png') }}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn btn-info btn-clipboard" toggle="tooltip" data-clipboard-action="copy" data-clipboard-target="#cardNumber" onclick="copyToClipboard('cardNumber')" title="Copy to clipboard">Copy</button>
|
|
<!-- Adyen JS from TEST environment (change to live for production)-->
|
|
<script src="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/5.15.0/adyen.js"
|
|
integrity="sha384-vMZOl6V83EY2UXaXsPUxH5Pt5VpyLeHpSFnANBVjcH5l7yZmJO0QBl3s6XbKwjiN"
|
|
crossorigin="anonymous"></script>
|
|
|
|
<!-- bootstrap-colorpicker JS -->
|
|
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/3.4.0/js/bootstrap-colorpicker.min.js"
|
|
integrity="sha512-94dgCw8xWrVcgkmOc2fwKjO4dqy/X3q7IjFru6MHJKeaAzCvhkVtOS6S+co+RbcZvvPBngLzuVMApmxkuWZGwQ=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
|
|
|
|
|
|
<!-- data from front-end -->
|
|
<script id="client-key" type="application/json">{{ client_key|tojson }}</script>
|
|
<script id="country-code" type="application/json">{{ countryCode|default("NL")|tojson }}</script>
|
|
|
|
<!-- local JS -->
|
|
<script src="{{ url_for('static', filename='js/adyen-implementation.js') }}"></script>
|
|
|
|
</body>
|
|
</html>
|
|
|