mirror of
https://github.com/jlengrand/checkoutCreate.git
synced 2026-03-10 08:11:18 +00:00
1354 lines
54 KiB
HTML
1354 lines
54 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<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" />
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"
|
|
/>
|
|
|
|
<!-- hello -->
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
|
|
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
|
|
crossorigin="anonymous"
|
|
/>
|
|
<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>
|
|
|
|
<!-- local CSS -->
|
|
<link
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
href="{{ url_for('static', filename='css/application.css') }}"
|
|
/>
|
|
|
|
<!-- 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"
|
|
/>
|
|
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/default.min.css"
|
|
/>
|
|
|
|
<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>
|
|
</div>
|
|
</header> -->
|
|
|
|
<div class="cotainer-fluid h-100">
|
|
<div class="row flex-fill">
|
|
<!-- Dropin UI -->
|
|
<div
|
|
class="checkout col-7 dropIn-UI justify-content-center text-center m-0 p-0"
|
|
>
|
|
<div id="dropin-container" class="payment p-5">
|
|
<!-- Component will be rendered here -->
|
|
</div>
|
|
<!-- Hidden status page to show on completion -->
|
|
<div class="status-container successDiv" id="successDiv">
|
|
<div class="status">
|
|
<img
|
|
src="{{ url_for('static', filename='img/success.svg') }}"
|
|
class="status-image"
|
|
/>
|
|
<img
|
|
src="{{ url_for('static', filename='img/thank-you.svg') }}"
|
|
class="status-image-thank-you"
|
|
/>
|
|
<p class="status-message">
|
|
Your order has been successfully placed.
|
|
</p>
|
|
<a class="button" onclick="restartDropin()">Return Home</a>
|
|
</div>
|
|
</div>
|
|
<div class="status-container errorDiv">
|
|
<div class="status">
|
|
<p class="status-message">Error!</p>
|
|
<p class="status-message">
|
|
Review response in console and refer to
|
|
<a
|
|
href="https://docs.adyen.com/development-resources/response-handling"
|
|
>Response handling.</a
|
|
>
|
|
</p>
|
|
<a class="button" onclick="restartDropin()">Return Home</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test cards container -->
|
|
<div class="test-cards-container fixed-bottom text-left">
|
|
<a id="test-cards-btn" class="btn btnprimary test-cards-btn">
|
|
<div class="panel-group textFonts">
|
|
<div class="panel panel-default">
|
|
<div id="collapse1" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
<div class="card-selector w-100 mb-1 m-0">
|
|
<div class="card-selector__brand" aria-hidden="true">
|
|
<img
|
|
id="brand_img"
|
|
src="https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/visa.svg"
|
|
alt="Card brand icon"
|
|
/>
|
|
</div>
|
|
<select
|
|
onchange="changeTestCard(this)"
|
|
id="card_select"
|
|
class="card-selector__select"
|
|
aria-label="Test Card"
|
|
autocomplete="off"
|
|
>
|
|
<option value="visa">Visa</option>
|
|
<option value="mc">Mastercard</option>
|
|
<option value="amex">AMEX</option>
|
|
</select>
|
|
<div class="dropdown-icon" aria-hidden="true">
|
|
<img
|
|
src="{{ url_for('static', filename='img/dropdown.svg') }}"
|
|
alt="Dropdown caret"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Panel footer start -->
|
|
<div class="panel-footer">
|
|
<div id="card" class="card p-0 text-center">
|
|
<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" id="expiry">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" id="cvc">737</p>
|
|
</div>
|
|
<img
|
|
class="card__back-logo card__logo"
|
|
src="{{ url_for('static', filename='img/LogoAdyen.png') }}"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Under card footer -->
|
|
<div>
|
|
<div class="row m-0 text-center justify-content-center">
|
|
<!-- <div -->
|
|
<!-- class="col copyBtnsStyle panCopy mr-1"
|
|
onclick="copyToClipboard"
|
|
> -->
|
|
<button class="btn copyBtnsStyle" type="button" id="btn" data-clipboard-action="copy" data-clipboard-target="p#cardNumber.card_numer" onclick="resetCard()" title="Copy to clipboard">
|
|
PAN <i class="bi bi-clipboard"></i>
|
|
</button>
|
|
<!-- </div> -->
|
|
<!-- <div class="col copyBtnsStyle expiryCopy ml-1 mr-1"> -->
|
|
<button class="btn copyBtnsStyle" data-clipboard-action="copy" id="copy-expiry" data-clipboard-target="p#expiry" onclick="resetCard()" title="Copy to clipboard">
|
|
EXPIRY <i class="bi bi-clipboard"></i>
|
|
</button>
|
|
<!-- </div> -->
|
|
<!-- <div class="col copyBtnsStyle cvcCopy ml-1"> -->
|
|
<button class="btn copyBtnsStyle" data-clipboard-action="copy" id="copy-cvc" data-clipboard-target="p#cvc" onclick="turnCard()" title="Copy to clipboard">
|
|
CVC <i class="bi bi-clipboard"></i>
|
|
</button>
|
|
<!-- </div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Panel footer ends -->
|
|
</div>
|
|
<div class="panel-heading">
|
|
<h4
|
|
class="panel-title text-left ml-3"
|
|
data-toggle="collapse"
|
|
href="#collapse1"
|
|
class="collapseText"
|
|
>
|
|
<p class="textFont testCardBtn">
|
|
test cards <i class="ml-2 bi bi-credit-card-fill"></i>
|
|
<i class="ml-4 bi bi-caret-up"></i>
|
|
</p>
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- config UI -->
|
|
<div class="col-5 config-UI p-0">
|
|
<div class="container p-5">
|
|
<h4 class="config-Title">Design Your Own Checkout</h4>
|
|
<!-- tabs -->
|
|
<div class="container mt-2 p-0">
|
|
<!-- tabs -->
|
|
<ul class="nav nav-tabs tab-options" id="myTab" role="">
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link active"
|
|
id="config-tab"
|
|
data-toggle="tab"
|
|
href="#configuration"
|
|
role="tab"
|
|
aria-controls="config"
|
|
aria-selected="true"
|
|
>Configuration</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link"
|
|
id="themes-tab"
|
|
data-toggle="tab"
|
|
href="#themes"
|
|
role="tab"
|
|
aria-controls="theme"
|
|
aria-selected="false"
|
|
>Theme & Styles</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link"
|
|
id="save-tab"
|
|
data-toggle="tab"
|
|
href="#save"
|
|
role="tab"
|
|
aria-controls="save"
|
|
aria-selected="false"
|
|
>Save your creation</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
<!------- First tab content --------->
|
|
<div class="tab-content" id="myTabContent">
|
|
<!-- Configuration content -->
|
|
<div
|
|
class="tab-pane fade in show active config-content-panel"
|
|
id="configuration"
|
|
role="tabpanel"
|
|
aria-labelledby="home-tab"
|
|
>
|
|
<!-- section title "Location" -->
|
|
<div class="row mt-3">
|
|
<div class="col flex-fill section-title">
|
|
<p class="mb-1 titleFonts">Location</p>
|
|
</div>
|
|
<!-- section description -->
|
|
<div class="col-6 mb-2">
|
|
<p class="textFonts">
|
|
Choose your shopper location and language
|
|
</p>
|
|
</div>
|
|
<!-- title -->
|
|
<div class="col-3 mb-2">
|
|
<p class="textFonts text-left ml-3">Shopper Location</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 mb-2">
|
|
<div class="country-selector textFonts">
|
|
<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>
|
|
<!-- line - section end -->
|
|
<hr class="mt-4 mb-4" />
|
|
|
|
<!-- section for hiding/showing payment methods -->
|
|
<div class="row mt-3">
|
|
<div class="col flex-fill section-title">
|
|
<p class="mb-1 titleFonts">Payment Methods</p>
|
|
</div>
|
|
<!-- section description -->
|
|
<div class="col-6">
|
|
<p class="textFonts">
|
|
Choose which payment methods you would like to see at
|
|
checkout
|
|
</p>
|
|
</div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">Paypal</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3">
|
|
<div class="custom-control custom-switch text-center">
|
|
<input
|
|
type="checkbox"
|
|
class="custom-control-input"
|
|
id="showPaypal"
|
|
data-toggle="toggle"
|
|
onchange="showPaypal()"
|
|
checked
|
|
/>
|
|
<label
|
|
class="custom-control-label"
|
|
for="showPaypal"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
</div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">Ideal</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3">
|
|
<div class="custom-control custom-switch text-center">
|
|
<input
|
|
type="checkbox"
|
|
class="custom-control-input"
|
|
id="showIdeal"
|
|
data-toggle="toggle"
|
|
onchange="showIdeal()"
|
|
checked
|
|
/>
|
|
<label
|
|
class="custom-control-label"
|
|
for="showIdeal"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
</div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">Klarna</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3">
|
|
<div class="custom-control custom-switch text-center">
|
|
<input
|
|
type="checkbox"
|
|
class="custom-control-input"
|
|
id="showKlarna"
|
|
data-toggle="toggle"
|
|
onchange="showKlarna()"
|
|
checked
|
|
/>
|
|
<label
|
|
class="custom-control-label"
|
|
for="showKlarna"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
</div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">AliPay</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3">
|
|
<div class="custom-control custom-switch text-center">
|
|
<input
|
|
type="checkbox"
|
|
class="custom-control-input"
|
|
id="showAliPay"
|
|
data-toggle="toggle"
|
|
onchange="showAliPay()"
|
|
checked
|
|
/>
|
|
<label
|
|
class="custom-control-label"
|
|
for="showAliPay"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
</div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">GooglePay</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3">
|
|
<div class="custom-control custom-switch text-center">
|
|
<input
|
|
type="checkbox"
|
|
class="custom-control-input"
|
|
id="showGooglePay"
|
|
data-toggle="toggle"
|
|
onchange="showGooglePay()"
|
|
checked
|
|
/>
|
|
<label
|
|
class="custom-control-label"
|
|
for="showGooglePay"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
</div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">WeChat</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3">
|
|
<div class="custom-control custom-switch text-center">
|
|
<input
|
|
type="checkbox"
|
|
class="custom-control-input"
|
|
id="showWeChat"
|
|
data-toggle="toggle"
|
|
onchange="showWeChat()"
|
|
checked
|
|
/>
|
|
<label
|
|
class="custom-control-label"
|
|
for="showWeChat"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
</div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">Paysafecard</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3">
|
|
<div class="custom-control custom-switch text-center">
|
|
<input
|
|
type="checkbox"
|
|
class="custom-control-input"
|
|
id="showPaysafecard"
|
|
data-toggle="toggle"
|
|
onchange="showPaysafecard()"
|
|
checked
|
|
/>
|
|
<label
|
|
class="custom-control-label"
|
|
for="showPaysafecard"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
</div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">Clearpay</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3">
|
|
<div class="custom-control custom-switch text-center">
|
|
<input
|
|
type="checkbox"
|
|
class="custom-control-input"
|
|
id="showClearpay"
|
|
data-toggle="toggle"
|
|
onchange="showClearpay()"
|
|
checked
|
|
/>
|
|
<label
|
|
class="custom-control-label"
|
|
for="showClearpay"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
</div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">Trustly</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3">
|
|
<div class="custom-control custom-switch text-center">
|
|
<input
|
|
type="checkbox"
|
|
class="custom-control-input"
|
|
id="showTrustly"
|
|
data-toggle="toggle"
|
|
onchange="showTrustly()"
|
|
checked
|
|
/>
|
|
<label
|
|
class="custom-control-label"
|
|
for="showTrustly"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- line - section end -->
|
|
<hr class="mt-4 mb-4" />
|
|
|
|
<!-- section titile "Payment Method Behaviour" -->
|
|
<div class="row mt-3">
|
|
<div class="col flex-fill section-title">
|
|
<p class="mb-1 titleFonts">Payment Method Behaviour</p>
|
|
</div>
|
|
|
|
<!-- text -->
|
|
<div class="col-6">
|
|
<p class="textFonts">
|
|
Select how you'd like your payment methods to behave at
|
|
checkout
|
|
</p>
|
|
</div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">
|
|
Open first payment method
|
|
</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-center">
|
|
<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"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- text -->
|
|
<div class="col-6"></div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">
|
|
Hide stored payment methods
|
|
</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-center">
|
|
<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"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- text -->
|
|
<div class="col-6"></div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">
|
|
Add billing address
|
|
</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-center">
|
|
<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"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- text -->
|
|
<div class="col-6"></div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">
|
|
Include card holder name
|
|
</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-center">
|
|
<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"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- text -->
|
|
<div class="col-6"></div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">
|
|
Show only saved Payment Methods
|
|
</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-center">
|
|
<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"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- text -->
|
|
<div class="col-6"></div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">Hide CVC field</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-center">
|
|
<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"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- text -->
|
|
<div class="col-6"></div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">
|
|
Include placeholder data
|
|
</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-center">
|
|
<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"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Theme & Styles content - 2nd tab -->
|
|
<div
|
|
class="tab-pane fade config-content-panel"
|
|
id="themes"
|
|
role="tabpanel"
|
|
aria-labelledby="profile-tab"
|
|
>
|
|
<!-- Fonts -->
|
|
<div class="row mt-3">
|
|
<div class="col flex-fill section-title">
|
|
<p class="mb-1 titleFonts">Fonts</p>
|
|
</div>
|
|
<div class="row container mb-2 p-0">
|
|
<!-- text -->
|
|
<div class="col-6">
|
|
<p class="textFonts">
|
|
Choose your font styles and size
|
|
</p>
|
|
</div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">Font</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-center">
|
|
<div class="font-selector textFonts">
|
|
<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>
|
|
</div>
|
|
<div class="row container mb-2 p-0">
|
|
<!-- text -->
|
|
<div class="col-6"></div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">Size</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-center">
|
|
<div class="form-group">
|
|
<div class="custom-control custom-switch">
|
|
<input
|
|
type="range"
|
|
class="form-control-range"
|
|
id="fontSize"
|
|
min="13"
|
|
max="17"
|
|
value="17"
|
|
onchange="fontWidth(this.value)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row container mb-2 p-0">
|
|
<!-- text -->
|
|
<div class="col-6"></div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">Alignment</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-center">
|
|
<div class="text-alignment textFonts">
|
|
<select
|
|
onchange="positionText(this)"
|
|
id="positionText"
|
|
class="textalign-selector__select"
|
|
autocomplete="off"
|
|
>
|
|
<option
|
|
selected
|
|
value="left"
|
|
style="text-align: left"
|
|
>
|
|
Left
|
|
</option>
|
|
<option value="center" style="text-align: center">
|
|
Center
|
|
</option>
|
|
<option value="right" style="text-align: right">
|
|
Right
|
|
</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>
|
|
<div class="row container mb-2 p-0">
|
|
<!-- text -->
|
|
<div class="col-6"></div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">Colour</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-center">
|
|
<div>
|
|
<input
|
|
type="color"
|
|
name=""
|
|
id="textColorPick"
|
|
onchange="textColor()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row container mb-2 p-0">
|
|
<!-- text -->
|
|
<div class="col-6"></div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">Bold</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-center">
|
|
<div class="boldImage">
|
|
<img src="static/img/bold.png" />
|
|
<button
|
|
type="button"
|
|
id="makeBold"
|
|
class="btn"
|
|
onclick="makeBold()"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row container mb-2 p-0">
|
|
<!-- text -->
|
|
<div class="col-6"></div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">Italic</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-center">
|
|
<div class="italicImage">
|
|
<img src="static/img/italic.png" />
|
|
<button
|
|
type="button"
|
|
id="makeItalic"
|
|
class="btn"
|
|
onclick="makeItalic()"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- line and end of section -->
|
|
<hr class="mt-4 mb-4" />
|
|
|
|
<!-- Colours and styles -->
|
|
<div class="row mt-3">
|
|
<div class="col flex-fill section-title">
|
|
<p class="mb-1 titleFonts">Colour & Style</p>
|
|
</div>
|
|
<div class="row container mb-2 p-0">
|
|
<!-- text -->
|
|
<div class="col-6">
|
|
<p class="textFonts">
|
|
Select the colour & style of your checkout
|
|
</p>
|
|
</div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">
|
|
Website background
|
|
</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-center">
|
|
<div>
|
|
<input
|
|
type="color"
|
|
name=""
|
|
id="bgColorPick"
|
|
onchange="backgroundColor()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row container mb-2 p-0">
|
|
<!-- text -->
|
|
<div class="col-6"></div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">
|
|
Active checkout background
|
|
</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-center">
|
|
<div>
|
|
<input
|
|
type="color"
|
|
name=""
|
|
id="dropinColorPick"
|
|
onchange="dropinColor()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row container mb-2 p-0">
|
|
<!-- text -->
|
|
<div class="col-6"></div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">
|
|
Collapsed payment methods background
|
|
</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-center">
|
|
<div>
|
|
<input
|
|
type="color"
|
|
name=""
|
|
id="dropinTabColorPick"
|
|
onchange="dropinTabColor()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row container mb-2 p-0">
|
|
<!-- text -->
|
|
<div class="col-6"></div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">Pay button</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-center">
|
|
<input
|
|
type="color"
|
|
name=""
|
|
id="buttonColorPick"
|
|
onchange="setDynamicCSS()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row container mb-2 p-0">
|
|
<!-- text -->
|
|
<div class="col-6"></div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">
|
|
Change button edges
|
|
</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-center">
|
|
<div class="form-group">
|
|
<input
|
|
type="range"
|
|
class="form-control-range"
|
|
id="buttonEdges"
|
|
onchange="buttonEdges(this.value);"
|
|
min="0"
|
|
max="25"
|
|
value="5"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row container mb-2 p-0">
|
|
<!-- text -->
|
|
<div class="col-6"></div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">
|
|
Change checkout edges
|
|
</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-center">
|
|
<div class="form-group">
|
|
<input
|
|
type="range"
|
|
class="form-control-range"
|
|
id="bodyEdges"
|
|
onchange="bodyEdges(this.value);"
|
|
min="0"
|
|
max="25"
|
|
value="5"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row container mb-2 p-0">
|
|
<!-- text -->
|
|
<div class="col-6"></div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">Remove Borders</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-center">
|
|
<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"
|
|
></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="mt-4 mb-4" />
|
|
<!-- Dimensions -->
|
|
<div class="row mt-3">
|
|
<div class="col flex-fill section-title">
|
|
<p class="mb-1 titleFonts">Dimensions</p>
|
|
</div>
|
|
<div class="row container mb-2 p-0">
|
|
<!-- text -->
|
|
<div class="col-6">
|
|
<p class="textFonts">
|
|
Define the size of your checkout
|
|
</p>
|
|
</div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">Checkout width</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-center">
|
|
<div class="form-group">
|
|
<input
|
|
type="range"
|
|
class="form-control-range"
|
|
id="changeWidth"
|
|
min="300"
|
|
max="700"
|
|
value="500"
|
|
onchange="dropinWidth(this.value)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row container mb-2 p-0">
|
|
<!-- text -->
|
|
<div class="col-6"></div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">Pay button width</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-right">
|
|
<div class="form-group">
|
|
<input
|
|
type="range"
|
|
class="form-control-range"
|
|
id="payButtonWidth"
|
|
min="265"
|
|
max="665"
|
|
value="100%"
|
|
onchange="payButtonWidth(this.value)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row container mb-2 p-0">
|
|
<!-- text -->
|
|
<div class="col-6"></div>
|
|
<!-- title -->
|
|
<div class="col-3">
|
|
<p class="textFonts text-left ml-3">
|
|
Payment methods spacing
|
|
</p>
|
|
</div>
|
|
<!-- toggle -->
|
|
<div class="col-3 text-right">
|
|
<div class="form-group">
|
|
<input
|
|
type="range"
|
|
class="form-control-range"
|
|
id="paymentsSpacing"
|
|
min="0"
|
|
max="50"
|
|
value="0"
|
|
onchange="paymentsSpacing(this.value)"
|
|
/>
|
|
</div>
|
|
<!-- toggle -->
|
|
</div>
|
|
</div>
|
|
<hr class="mt-4 mb-4" />
|
|
|
|
<div>
|
|
<button type="button" onclick="resetDynamicCSS()">
|
|
Reset Style
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Save your creation content -->
|
|
<div
|
|
class="tab-pane fade config-content-panel"
|
|
id="save"
|
|
role="tabpanel"
|
|
aria-labelledby="save-tab"
|
|
>
|
|
<div class="row mt-3">
|
|
<div class="col flex-fill section-title">
|
|
<p class="mb-1 titleFonts">Adyen Configuration</p>
|
|
</div>
|
|
<div class="row container">
|
|
<!-- section description -->
|
|
<div class="col-12 mb-2">
|
|
<pre
|
|
id="configCode"
|
|
><code id="configCode" class="configCode"></code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-3">
|
|
<div class="col flex-fill section-title">
|
|
<p class="mb-1 titleFonts">CSS Configuration</p>
|
|
</div>
|
|
<div class="row container">
|
|
<!-- section description -->
|
|
<div class="col-12 mb-2">
|
|
<pre
|
|
id="cssCode"
|
|
><code class="css-code" id="cssCode" ></code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
<!-- 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>
|
|
<script id="pay-methods" type="application/json">
|
|
{{ payMethodsFE|default("")|tojson}}
|
|
</script>
|
|
|
|
<!-- local JS -->
|
|
<script src="{{ url_for('static', filename='js/adyen-implementation.js') }}"></script>
|
|
|
|
<!-- Clipboard.js script -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
|
|
|
|
<!-- Clipboard JS -->
|
|
<script>
|
|
let panText = document.getElementById('cardNumber').innerText
|
|
console.log(panText)
|
|
document.getElementById('btn').setAttribute("data-clipboard-text", String(panText))
|
|
let expiryText = document.getElementById('expiry').innerText
|
|
document.getElementById('copy-expiry').setAttribute("data-clipboard-text", String(expiryText))
|
|
let cvcText = document.getElementById('cvc').innerText
|
|
document.getElementById('copy-cvc').setAttribute("data-clipboard-text", String(cvcText))
|
|
var clipboard = new Clipboard(".btn")
|
|
clipboard.on("success", function (e) {
|
|
console.log(e)
|
|
// setTooltip(e.trigger, 'Copied!');
|
|
// hideTooltip(e.trigger);
|
|
})
|
|
clipboard.on("error", function (e) {
|
|
console.log(e)
|
|
// setTooltip(e.trigger, 'Failed!');
|
|
// hideTooltip(e.trigger);
|
|
})
|
|
</script>
|
|
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
|
<script
|
|
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
|
|
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script
|
|
src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
|
|
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script
|
|
src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
|
|
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<!-- convert json to css -->
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/json-to-css-variables@1.0.0/index.min.js"></script> -->
|
|
<!-- [Attributes by Finsweet] Code Highlight -->
|
|
<!-- <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/highlight.min.js"></script>
|
|
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-codehighlight@1/codehighlight.js"></script> -->
|
|
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/highlight.min.js"></script>
|
|
<!-- and it's easy to individually load additional languages -->
|
|
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/languages/go.min.js"></script>
|
|
</body>
|
|
</html>
|
|
|
|
<!-- <div>
|
|
<button
|
|
type="button"
|
|
id="btn"
|
|
class="btn"
|
|
toggle="tooltip"
|
|
data-clipboard-action="copy"
|
|
data-placement="top"
|
|
data-clipboard-target="p#cardNumber"
|
|
onclick="resetCard()"
|
|
title="Copy to clipboard"
|
|
>
|
|
Copy PAN
|
|
</button>
|
|
<button
|
|
type="button"
|
|
id="btn"
|
|
class="btn"
|
|
toggle="tooltip"
|
|
data-clipboard-action="copy"
|
|
data-clipboard-target="p#expiry"
|
|
title="Copy to clipboard"
|
|
onclick="resetCard()"
|
|
>
|
|
Copy Expiry date
|
|
</button>
|
|
<button
|
|
type="button"
|
|
id="btn"
|
|
class="btn"
|
|
toggle="tooltip"
|
|
data-clipboard-action="copy"
|
|
data-clipboard-target="p#cvc"
|
|
title="Copy to clipboard"
|
|
onclick="turnCard()"
|
|
>
|
|
Copy CVC
|
|
</button>
|
|
</div> -->
|