saucy/app/views/payments/show.html.erb

<h1>Pagamento de quotas</h1>

<% if @payment.member.status == "pending" %>
  <p>
    Olá <strong><%= @payment.member.display_name %></strong>.
    Para concluir a tua inscrição, pedimos que faças o pagamento das quotas.
  </p>
<% elsif @payment.member.status == "passive" || @payment.member.status == "active" %>
  <p>
    Olá <strong><%= @payment.member.display_name %></strong>.
    Para estender a tua inscrição por
    mais um ano, pedimos que faças o pagamento das quotas até
    <strong><%= @payment.member.expires_on %></strong>.
  </p>
<% else %>
  <p>
    Olá <strong><%= @payment.member.display_name %></strong>.
    A tua inscrição expirou em <strong><%= @payment.member.expires_on %></strong>.
    Para estender a tua inscrição por mais um ano, pedimos que faças o
    pagamento das quotas.
  </p>
<% end %>

<p><%= Config.reduced_payment_description %></p>

<p>Aceitamos pagamento via transferência bancária, referência multibanco ou MBWAY.</p>

<div>
  <input class="show-hide-toggle" type='checkbox' id='regular' />
  <label class="show-hide-button" for="regular">Pagamento normal (<%= number_with_precision(Config.regular_payment_value, precision: 2) %>€)</label>
  <div class="show-hide-box">
    <p>Valor: <%= number_with_precision(Config.regular_payment_value, precision: 2) %>€</p>

    <p><%= link_to "Pagar por Multibanco ou MBWAY", @payment.member.regular_ifthenpay_link, class: 'button' %></p>
    <p>Pagar por transferência bancária:</p>
    <ul>
      <li>IBAN: <strong><%= Config.payment_iban %></strong></li>
      <li>obrigatório enviar comprovativo de pagamento para <%= Config.payment_proof_email %></li>
    </ul>
  </div>
</div>

<div style='margin-top: 10px;'>
  <input class="show-hide-toggle" type='checkbox' id='reduced' />
  <label class="show-hide-button" for="reduced">Pagamento reduzido (<%= number_with_precision(Config.reduced_payment_value, precision: 2) %>€)</label>
  <div class="show-hide-box">
    <p>Valor: <%= number_with_precision(Config.reduced_payment_value, precision: 2) %>€</p>

    <p><%= link_to "Pagar por Multibanco ou MBWAY", @payment.member.reduced_ifthenpay_link, class: 'button' %></p>
    <p>Pagar por transferência bancária:</p>
    <ul>
      <li>IBAN: <strong><%= Config.payment_iban %></strong></li>
      <li>obrigatório enviar comprovativo de pagamento para <%= Config.payment_proof_email %></li>
    </ul>
  </div>
</div>

<style>
.button { border: 1px solid #ccc; background-color: #eee; cursor: pointer; padding: 4px 10px; display: inline-block; text-align: center; }
.show-hide-button { border: 1px solid #ccc; background-color: #eee; cursor: pointer; padding: 4px; display: block; text-align: center; }
.show-hide-toggle { display: none; }
.show-hide-toggle:not(:checked) ~ .show-hide-box { display: none; }
.show-hide-toggle:checked ~ .show-hide-box {
  display: block;
  overflow: auto;
  padding: 10px 30px;

  border: 1px solid #ccc;
  border-top: 0;
}
.show-hide-box ul {
  margin-left: 30px;
}
</style>