Form Credit Cards
This component is used within the donation page to show which credit cards the form accepts.
{{ attach_library('theme_name/form-creditcards') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
<fieldset class="form-item form-control form-creditcard is-required">
<legend class="form-item__label form-item__legend">{{ icons.get('asterisk', 'icon form-item__required') }} Payment method</legend>
<div class="form-control__item form-creditcard__credit">
<label class="form-control__label" for="{{ id|default('monthly-' ~ modifier_class ) }}">
<input class="form-control__el" type="radio" name="donateFrequency" value="monthly" id="{{ id|default('monthly-' ~ modifier_class ) }}">
<div class="form-control__indicator form-control__indicator--radio"></div>
<div class="form-control__desc">
Credit or debit card
<div class="form-control__image">
<img src="../../dist/assets/form-creditcards-icon.png">
</div>
</div>
</label>
</div>
<div class="form-control__item form-creditcard__paypal">
<label class="form-control__label" for="{{ id|default('once-' ~ modifier_class ) }}">
<input class="form-control__el" type="radio" name="donateFrequency" value="once" id="{{ id|default('once-' ~ modifier_class ) }}">
<div class="form-control__indicator form-control__indicator--radio">
</div>
<div class="form-control__desc">
PayPal
{%
include "@h4h_theme/tool-tip/tool-tip.twig" with {
label: "What's this?",
selector_id: "paypal-info",
body: "<p>Paypal is a third-pary payment service that enables you to make payments online. Learn more at paypal.com.</p><p><em>Please note: Monthly donations cannot be made through PayPal.</em></p>"
} only
%}
<div class="form-control__image">
<img src="../../dist/assets/form-paypal-icon.png">
</div>
</div>
</label>
</div>
</fieldset>