{% extends "layout.html" %}
{% block content %}
<div class='main-container'>
    <div class="info">
        <h1>Select a demo</h1>
        <p>Click to view an interactive example of a PCI-compliant UI integration for online payments.</p>
        <p>
            Make sure the payment method you want to use are enabled for your account.
            Refer <a href="https://docs.adyen.com/payment-methods#add-payment-methods-to-your-account">the documentation</a> to add missing
            payment methods.
        </p>
        <p>To learn more about client-side integration solutions, check out <a
                href="https://docs.adyen.com/checkout">Online payments.</a></p>
    </div>
    <ul class="integration-list">
        <li class="integration-list-item">
            <a class="integration-list-item-link" href="cart/dropin">
            <div class="title-container">
                <p class="integration-list-item-title">Drop-in</p>
            </div>
            </a>
        </li>
        <li class="integration-list-item">
            <a class="integration-list-item-link" href="cart/card">
            <div class="title-container">
                <p class="integration-list-item-title">Card</p>
            </div>
            </a>
        </li>
        <li class="integration-list-item">
            <a class="integration-list-item-link" href="cart/ideal">
            <div class="title-container">
                <p class="integration-list-item-title">iDEAL</p>
            </div>
            </a>
        </li>
        <li class="integration-list-item">
            <a class="integration-list-item-link" href="cart/klarna">
            <div class="title-container">
                <p class="integration-list-item-title">Klarna</p>
            </div>
            </a>
        </li>
        <li class="integration-list-item">
            <a class="integration-list-item-link" href="cart/directEbanking">
            <div class="title-container">
                <p class="integration-list-item-title">Sofort</p>
            </div>
            </a>
        </li>
        <li class="integration-list-item">
            <a class="integration-list-item-link" href="cart/alipay">
            <div class="title-container">
                <p class="integration-list-item-title">Alipay</p>
            </div>
            </a>
        </li>
        <li class="integration-list-item">
            <a class="integration-list-item-link" href="cart/boletobancario">
            <div class="title-container">
                <p class="integration-list-item-title">Boleto</p>
            </div>
            </a>
        </li>
        <li class="integration-list-item">
            <a class="integration-list-item-link" href="cart/sepadirectdebit"/>
            <div class="title-container">
                <p class="integration-list-item-title">Sepa Direct Debit</p>
            </div>
            </a>
        </li>
        <li class="integration-list-item">
            <a class="integration-list-item-link" href="cart/dotpay"/>
            <div class="title-container">
                <p class="integration-list-item-title">Dotpay</p>
            </div>
            </a>
        </li>
        <li class="integration-list-item">
            <a class="integration-list-item-link" href="cart/giropay"/>
            <div class="title-container">
                <p class="integration-list-item-title">Giropay</p>
            </div>
            </a>
        </li>
        <li class="integration-list-item">
            <a class="integration-list-item-link" href="cart/ach"/>
            <div class="title-container">
                <p class="integration-list-item-title">ACH</p>
            </div>
            </a>
        </li>
        <li class="integration-list-item">
            <a class="integration-list-item-link" href="cart/paypal"/>
            <div class="title-container">
                <p class="integration-list-item-title">PayPal</p>
            </div>
            </a>
        </li>
    </ul>
</div>
{% endblock %}