Fix dynamic PayPal and Stripe payment forms, unify checkout_payment and order_pay_change

This commit is contained in:
Mira Weller
2024-12-10 17:04:29 +01:00
parent d46ad7ff2a
commit 5f2a3fab34
3 changed files with 15 additions and 28 deletions
@@ -92,8 +92,8 @@ var pretixpaypal = {
}
// We are setting the cogwheel already here, as the renderAPM() method might take some time to get loaded.
let apmtextselector = $("input[name=payment][value=paypal_apm]").closest("label").find(".panel-title");
apmtextselector.prepend('<span class="fa fa-cog fa-spin"></span> ');
const apmtextselector = $("input[name=payment][value=paypal_apm]").closest("fieldset").find(".provider-name");
apmtextselector.append(' <span aria-hidden="true" class="fa fa-cog fa-spin"></span>');
let sdk_url = 'https://www.paypal.com/sdk/js' +
'?client-id=' + pretixpaypal.client_id +
@@ -269,11 +269,7 @@ var pretixpaypal = {
renderAPMs: function () {
pretixpaypal.restore();
let inputselector = $("input[name=payment][value=paypal_apm]");
// The first selector is used on the regular payment-step of the checkout flow
// The second selector is used for the payment method change view.
// In the long run, the layout of both pages should be adjusted to be one.
let textselector = inputselector.closest("label").find('.panel-title');
let textselector2 = inputselector.next("strong");
let textselector = inputselector.closest("fieldset").find('.provider-name');
let eligibles = [];
pretixpaypal.paypal.getFundingSources().forEach(function (fundingSource) {
@@ -297,10 +293,6 @@ var pretixpaypal = {
textselector.text(eligibles.join(', '));
textselector.fadeIn(300);
});
textselector2.fadeOut(300, function () {
textselector2[0].textContent = eligibles.join(', ');
textselector2.fadeIn(300);
});
},
guessLocale: function() {
@@ -74,7 +74,7 @@
{% if selected == p.provider.identifier %}checked="checked"{% endif %}
aria-controls="payment_{{ p.provider.identifier }}"
data-wallets="{{ p.provider.walletqueries|join:"|" }}" />
{{ p.provider.public_name }}
<strong class="provider-name">{{ p.provider.public_name }}</strong>
</span>
</label>
</legend>
@@ -29,29 +29,24 @@
{% endif %}
<div class="panel-group" id="payment_accordion">
{% for p in providers %}
<div class="panel panel-default" data-total="{{ p.total|money_numberfield:request.event.currency }}">
<div class="panel-heading">
<h4 class="panel-title">
<label class="radio">
<fieldset class="panel panel-default accordion-panel" data-total="{{ p.total|money_numberfield:request.event.currency }}">
<legend class="accordion-radio">
<label class="panel-heading">
<span class="panel-title">
{% if show_fees %}
<strong class="pull-right flip">{% if p.fee_diff >= 0 %}+{% else %}-{% endif %} {{ p.fee_diff_abs|money:event.currency }}</strong>
{% endif %}
<input type="radio" name="payment" value="{{ p.provider.identifier }}"
data-parent="#payment_accordion"
{% if selected == p.provider.identifier %}checked="checked"{% endif %}
data-toggle="radiocollapse" data-target="#payment_{{ p.provider.identifier }}"
data-wallets="{{ p.provider.walletqueries|join:"|" }}"/>
<strong>{{ p.provider.public_name }}</strong>
</label>
</h4>
<strong class="provider-name">{{ p.provider.public_name }}</strong>
</span>
</label>
</legend>
<div id="payment_{{ p.provider.identifier }}" class="panel-body form-horizontal">
{{ p.form }}
</div>
<div id="payment_{{ p.provider.identifier }}"
class="panel-collapse collapsed {% if selected == p.provider.identifier %}in{% endif %}">
<div class="panel-body form-horizontal">
{{ p.form }}
</div>
</div>
</div>
</fieldset>
{% empty %}
<div class="alert alert-info">
{% trans "There are no alternative payment providers available for this order." %}