fixed captcha reset in cardpayments

Author: tobihagemann

assets/js/cardpayments.js

@@ -19,8 +19,9 @@ class OneTimePayment {
    * @param {boolean} status.inProgress Whether an async payment task is currently running
    * @param {boolean} status.success Whether the payment succeeded
    */
-  constructor(status) {
+  constructor(status, captcha) {
     this._status = status;
+    this._captcha = captcha;
   }
 
   /**
@@ -127,8 +128,7 @@ class OneTimePayment {
     this._status.success = false;
     this._status.errorMessage = error.message;
     this._status.inProgress = false;
-    this._status.captcha = null;
-    // TODO: reset captcha
+    this._captcha.reset();
   }
 
   onPaymentSucceeded() {

layouts/partials/captcha.html

@@ -12,4 +12,5 @@
     verifying: '{{ i18n "altcha_verifying" }}',
     waitAlert: '{{ i18n "altcha_waitAlert" }}'
   })"
-></altcha-widget>
+  x-ref="captcha"
+></altcha-widget>

layouts/partials/donate-creditcard.html

@@ -1,4 +1,4 @@
-<div x-data="{amount: 15, currency: 'EUR', frequency: 'once', oneTimePayment: null, oneTimePaymentStatus: {validCardNum: false, captcha: null, errorMessage: '', inProgress: false, success: false}, recurringPayment: new RecurringPayment(), acceptTerms: false, captchaState: null}" x-init="oneTimePayment = new OneTimePayment(oneTimePaymentStatus)">
+<div x-data="{amount: 15, currency: 'EUR', frequency: 'once', oneTimePayment: null, oneTimePaymentStatus: {validCardNum: false, captcha: null, errorMessage: '', inProgress: false, success: false}, recurringPayment: new RecurringPayment(), acceptTerms: false, captchaState: null}" x-init="oneTimePayment = new OneTimePayment(oneTimePaymentStatus, $refs.captcha)">
   <div class="flex flex-wrap md:flex-nowrap">
     <div class="w-full mb-4 md:w-1/2 md:pr-3">
       <label class="label-uppercase mb-2">{{ i18n "donate_creditcard_amount" }}</label>