diff --git a/resources/views/portal/ninja2020/gateways/stripe/fpx/authorize.blade.php b/resources/views/portal/ninja2020/gateways/stripe/fpx/authorize.blade.php
new file mode 100644
index 000000000000..ceb2d28000d5
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/stripe/fpx/authorize.blade.php
@@ -0,0 +1,7 @@
+@extends('portal.ninja2020.layout.payments', ['gateway_title' => ctrans('texts.bank_account'), 'card_title' => ctrans('texts.bank_account')])
+
+@section('gateway_content')
+    @component('portal.ninja2020.components.general.card-element-single', ['title' => ctrans('texts.bank_account'), 'show_title' => false])
+        {{ __('texts.sofort_authorize_label') }}
+    @endcomponent
+@endsection
diff --git a/resources/views/portal/ninja2020/gateways/stripe/fpx/fpx.blade.php b/resources/views/portal/ninja2020/gateways/stripe/fpx/fpx.blade.php
new file mode 100644
index 000000000000..d3935e080aef
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/stripe/fpx/fpx.blade.php
@@ -0,0 +1,8 @@
+<div id="stripe--payment-container">
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.name')])
+        <label for="fpx-bank-element"></label>
+        <div class="border p-4 rounded">
+            <div id="fpx-bank-element"></div>
+        </div>
+    @endcomponent
+</div>
diff --git a/resources/views/portal/ninja2020/gateways/stripe/fpx/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/fpx/pay.blade.php
new file mode 100644
index 000000000000..0b30f1904454
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/stripe/fpx/pay.blade.php
@@ -0,0 +1,28 @@
+@extends('portal.ninja2020.layout.payments', ['gateway_title' => 'FPX', 'card_title' => 'FPX'])
+
+@section('gateway_head')
+    <meta name="stripe-publishable-key" content="{{ $gateway->getPublishableKey() }}">
+    <meta name="stripe-account-id" content="{{ $gateway->company_gateway->getConfigField('account_id') }}">
+    <meta name="return-url" content="{{ $return_url }}">
+    <meta name="amount" content="{{ $stripe_amount }}">
+    <meta name="country" content="{{ $country }}">
+    <meta name="customer" content="{{ $customer }}">
+    <meta name="pi-client-secret" content="{{ $pi_client_secret }}">
+@endsection
+
+@section('gateway_content')
+    <div class="alert alert-failure mb-4" hidden id="errors"></div>
+
+    @include('portal.ninja2020.gateways.includes.payment_details')
+
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.payment_type')])
+        {{ ctrans('texts.fpx') }} ({{ ctrans('texts.bank_transfer') }})
+    @endcomponent
+    @include('portal.ninja2020.gateways.stripe.fpx.fpx')
+    @include('portal.ninja2020.gateways.includes.pay_now')
+@endsection
+
+@push('footer')
+    <script src="https://js.stripe.com/v3/"></script>
+    <script src="{{ asset('js/clients/payments/stripe-fpx.js') }}"></script>
+@endpush