Payment Wall Ready
This template shows how to build a payment wall using Duet’s components. Please note that the example below does not represent a real use case.
Hint: Press F on your keyboard to view both templates and components in fullscreen and ESC to exit the fullscreen mode. You can also open the template in a new browser window.
<!DOCTYPE html>
<html class="duet-animate-load duet-sticky-footer" lang="fi">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>LähiTapiola</title>
<link rel="stylesheet" href="https://cdn.duetds.com/api/fonts/3.0.36/lib/localtapiola.css" integrity="sha384-5JYmtSD7nykpUvSmTW1CHMoBDkBZUpUmG0vuh+NUVtZag3F75Kr7+/JU3J7JV6Wq" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.duetds.com/api/css/4.0.18/lib/duet.min.css" integrity="sha384-lXsZJzvyiyIDxPLVC56+vhjfm/vPD4eEAE1z2Q8niyNbr0NgPl6nxGKEkjg18yQf" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.duetds.com/api/tokens/4.0.36/lib/tokens.custom-properties.css" integrity="sha384-bdxOmb87eo3bfxU+AHyrr4fo/iBSqSRZs4tIRaXT/e/8FCLFnV3mcABYDi1/CNQU" crossorigin="anonymous" />
<script type="module" src="https://cdn.duetds.com/api/components/8.4.0/lib/duet/duet.esm.js" integrity="sha384-k6jjwTqRDqMj48MzOlZv4UbSJQpGjVArPXKS4EYcxmUU+huiJgRO+66K7KN+kohP" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.duetds.com/api/components/8.4.0/lib/duet/duet.js" integrity="sha384-uWHPeiybdN7WPOxcNK/EM2ZkaVcXuGUpqYw9IFr+t6Qy6bZ2O6LAlphjvuSrrPei" crossorigin="anonymous"></script>
</head>
<body>
<script>
// IMPORTANT: This line enables hover for touch devices
document.addEventListener("touchstart", function(){}, true);
</script>
<style>
.payment-grid {
width: 100%;
display: grid;
margin: 0 0 var(--space-xx-large);
}
@supports (display: grid) {
.payment-grid {
grid-template-columns: calc(33.333% - var(--space-x-small)) calc(33.333% - var(--space-x-small)) calc(33.333% - var(--space-x-small));
grid-gap: var(--space-x-small);
}
@media (min-width: 36em) {
.payment-grid {
grid-template-columns: calc(33.333% - var(--space-medium)) calc(33.333% - var(--space-medium)) calc(33.333% - var(--space-medium));
grid-gap: var(--space-medium);
}
}
}
form {
display: block;
margin: 0 0 var(--space-medium);
}
@supports (display: grid) {
form {
margin: 0;
}
}
button {
transition: box-shadow var(--transition-quickly), background-position var(--transition-quickly);
min-height: calc(var(--size-tappable-square) * 1.5);
background: var(--color-gray-lightest);
border-radius: var(--radius-default);
box-shadow: var(--shadow-card);
padding: var(--space-small);
font-size: 0;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
border: 0;
width: 100%;
display: block;
}
button:hover {
box-shadow: var(--shadow-card), var(--shadow-hover);
}
button img {
pointer-events: none;
max-width: 120px;
}
</style>
<duet-header logo-href="" language="fi" back='{"label": "Takaisin","href": "#"}'></duet-header>
<duet-spacer size="xxx-large"></duet-spacer>
<duet-spacer breakpoint="medium" size="large"></duet-spacer>
<duet-layout center margin="none">
<div slot="main">
<duet-visually-hidden>
<duet-heading level="h1">Maksaminen</duet-heading>
</duet-visually-hidden>
<duet-paragraph class="intro">LähiTapiola käyttää Checkout Finland Oy:n maksunvälityspalvelua. Maksutiedoissa maksunsaajana näkyy Checkout Finland Oy ja heidän tilinumeronsa. Kun maksat laskun, hyväksyt samalla <duet-link url="https://www.checkout.fi/ehdot-ja-sopimukset/maksuehdot" external>maksuehdot</duet-link>.</duet-paragraph>
<duet-spacer></duet-spacer>
<duet-heading level="h2" visual-level="h6">Pankkien verkkomaksut</duet-heading>
<duet-spacer></duet-spacer>
<div class="payment-grid">
<form method="post" action="https://www.duetds.com">
<button>
<duet-visually-hidden>Nordea</duet-visually-hidden>
<img aria-hidden="true" alt="Nordea" src="https://cdn.duetds.com/api/assets/logos/nordea.svg" />
</button>
</form>
<form method="post" action="https://www.duetds.com">
<button>
<duet-visually-hidden>Danske Bank</duet-visually-hidden>
<img aria-hidden="true" alt="Danske Bank" src="https://cdn.duetds.com/api/assets/logos/danske-bank.svg" />
</button>
</form>
<form method="post" action="https://www.duetds.com">
<button>
<duet-visually-hidden>Ålandsbanken</duet-visually-hidden>
<img aria-hidden="true" alt="Ålandsbanken" src="https://cdn.duetds.com/api/assets/logos/alandsbanken.svg" />
</button>
</form>
<form method="post" action="https://www.duetds.com">
<button>
<duet-visually-hidden>OP</duet-visually-hidden>
<img aria-hidden="true" alt="OP" src="https://cdn.duetds.com/api/assets/logos/op.svg" />
</button>
</form>
<form method="post" action="https://www.duetds.com">
<button>
<duet-visually-hidden>Handelsbanken</duet-visually-hidden>
<img aria-hidden="true" alt="Handelsbanken" src="https://cdn.duetds.com/api/assets/logos/handelsbanken.svg" />
</button>
</form>
<form method="post" action="https://www.duetds.com">
<button>
<duet-visually-hidden>POP Pankki</duet-visually-hidden>
<img aria-hidden="true" alt="POP Pankki" src="https://cdn.duetds.com/api/assets/logos/pop-pankki.svg" />
</button>
</form>
<form method="post" action="https://www.duetds.com">
<button>
<duet-visually-hidden>Aktia</duet-visually-hidden>
<img aria-hidden="true" alt="Aktia" src="https://cdn.duetds.com/api/assets/logos/aktia.svg" />
</button>
</form>
<form method="post" action="https://www.duetds.com">
<button>
<duet-visually-hidden>Säästöpankki</duet-visually-hidden>
<img aria-hidden="true" alt="Säästöpankki" src="https://cdn.duetds.com/api/assets/logos/saastopankki.svg" />
</button>
</form>
<form method="post" action="https://www.duetds.com">
<button>
<duet-visually-hidden>OmaSp</duet-visually-hidden>
<img aria-hidden="true" alt="OmaSp" src="https://cdn.duetds.com/api/assets/logos/omasp.svg" />
</button>
</form>
<form method="post" action="https://www.duetds.com">
<button>
<duet-visually-hidden>S-Pankki</duet-visually-hidden>
<img aria-hidden="true" alt="S-Pankki" src="https://cdn.duetds.com/api/assets/logos/spankki.svg" />
</button>
</form>
</div>
<duet-heading level="h2" visual-level="h6">Mobiilimaksut</duet-heading>
<duet-spacer></duet-spacer>
<div class="payment-grid">
<form method="post" action="https://www.duetds.com">
<button>
<duet-visually-hidden>MobilePay</duet-visually-hidden>
<img aria-hidden="true" alt="MobilePay" src="https://cdn.duetds.com/api/assets/logos/mobilepay.svg" />
</button>
</form>
</div>
</div>
</duet-layout>
<duet-footer logo-href="/" language="fi" variation="simple"
menu='[
{ "label": "Turvallisuus ja käyttöehdot", "href": "https://www.lahitapiola.fi/henkilo/asiakaspalvelu/asioi-verkossa/hyva-tietaa/verkkoturvallisuus", "external": "true" },
{ "label": "Evästeet", "href": "https://www.lahitapiola.fi/henkilo/asiakaspalvelu/asioi-verkossa/hyva-tietaa/henkilotietojen-kasittely/evasteet", "external": "true" },
{ "label": "Henkilötietojen käsittely", "href": "https://www.lahitapiola.fi/henkilo/asiakaspalvelu/asioi-verkossa/hyva-tietaa/henkilotietojen-kasittely", "external": "true" }
]'>
</duet-footer>
</body>
</html>Integration
To install this template’s dependencies into your project, run:
npm install @duetds/components
npm install @duetds/css
npm install @duetds/fontsFor further guidelines, please see each package’s documentation.
Tutorials
Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:
Tutorials
Building Layouts
TutorialsUsing CLI Tools
TutorialsCreating Custom Patterns
TutorialsServer Side Rendering
TutorialsSharing Prototypes
TutorialsUsage With Markdown
Troubleshooting
If you experience any issues while using a template, please head over to the Support page for more guidelines and help.