diff --git a/resources/js/clients/payments/stripe-giropay.js b/resources/js/clients/payments/stripe-giropay.js
index 141a83acdebd..fc1c0a26977c 100644
--- a/resources/js/clients/payments/stripe-giropay.js
+++ b/resources/js/clients/payments/stripe-giropay.js
@@ -35,7 +35,7 @@ class ProcessGiroPay {
                 {
                     payment_method: {
                         billing_details: {
-                            name: "",
+                            name: document.getElementById("giropay-name").value(),
                         },
                     },
                     return_url: document.querySelector(
diff --git a/resources/views/portal/ninja2020/gateways/stripe/giropay/giropay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/giropay/giropay.blade.php
new file mode 100644
index 000000000000..05a4d5c9e8e3
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/stripe/giropay/giropay.blade.php
@@ -0,0 +1,11 @@
+<div id="stripe--payment-container">
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.name')])
+        <label for="giropay-name">
+            <input class="input w-full" id="giropay-name" type="text" placeholder="{{ ctrans('texts.bank_account_holder') }}">
+        </label>
+        <div id="mandate-acceptance">
+            <input type="checkbox" id="giropay-mandate-acceptance" class="input mr-4">
+            <label for="giropay-mandate-acceptance">{{ctrans('texts.giropay_law')}}</label>
+        </div>
+    @endcomponent
+</div>