payment-amount

Information

Folder
src/components/patterns/form/payment/payment-amount

Files

Schema
Mocks
Template
// src/components/patterns/form/payment/payment-amount/payment-amount.html.twig

{#
  Attention: form elements with all relevant classes will be rendered by Drupal and passed as rendered html strings.
  The form tag in this template is needed only for miyagi.
#}

{% if not is_drupal_form %}
<form class="PaymentForm js-PaymentForm">
{% endif %}
  <div class="PaymentAmount js-PaymentAmount">
    {% if interval %}
      {% if has_flyout %}
        <div class="PaymentAmount-intervalHolder js-PaymentAmount-intervalHolder{% if has_flyout_open %} is-flyoutOpened{% endif %}">
      {% endif %}
        {{ interval|raw }}
      {% if has_flyout %}
        {% include "@elements/flyout/flyout.html.twig" with {
          class: "PaymentAmount-flyout js-PaymentAmount-flyout",
          has_flyout_open: has_flyout_open,
        } only %}
        </div>
      {% endif %}
    {% endif %}
    {% if amount %}
      {{ amount|raw }}
    {% endif %}
    {% if hidden_fields %}
      {{ hidden_fields|raw }}
    {% endif %}
    {% if donation_examples %}
      <div class="PaymentAmount-examples js-PaymentAmount-examples"
        aria-live="polite"
        id="{{ donation_examples.id }}"
      >
        {% for example in donation_examples.items %}
          {{ example|raw }}
        {% endfor %}
      </div>
    {% endif %}
  </div>
  {# Just for normal forms see container--form-actions.html.twig for multistep forms. #}
  {% if donation_notice and gift_page_url %}
    {% include "@elements/gift-prompt/gift-prompt.html.twig" with {
      gift_page_url: gift_page_url,
      is_simple_version: true,
      is_hidden: is_hidden,
      form_wrapper_id: form_wrapper_id,
    } only %}
  {% endif %}
{% if not is_drupal_form %}
  <button type="submit" hidden>Submit</button>
</form>
{% endif %}

Variants

default
Open

default mock data

Raw
Resolved
with select
Open

with select mock data

Raw
Resolved