Files
checkoutCreate/app/templates/component.html
anamotaadyen 482fc51ed6 initial commit
2022-10-03 17:19:04 +01:00

64 lines
2.7 KiB
HTML

{% extends "layout.html" %}
{% block content %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 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">
<!-- Component will be rendered here -->
</div>
</div>
<div class="settings col">
<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>
</div>
</div>
<!-- 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("GB")|tojson }}</script>
<!-- local JS -->
<script src="{{ url_for('static', filename='js/adyen-implementation.js') }}"></script>
{% endblock %}