diff --git a/app/Models/SystemLog.php b/app/Models/SystemLog.php
index 816846ba255f..3ad12a351cb1 100644
--- a/app/Models/SystemLog.php
+++ b/app/Models/SystemLog.php
@@ -65,7 +65,8 @@ class SystemLog extends Model
     const TYPE_CHECKOUT = 304;
     const TYPE_AUTHORIZE = 305;
     const TYPE_CUSTOM = 306;
-    
+    const TYPE_BRAINTREE = 307;
+
     const TYPE_QUOTA_EXCEEDED = 400;
     const TYPE_UPSTREAM_FAILURE = 401;
 
diff --git a/app/PaymentDrivers/Braintree/CreditCard.php b/app/PaymentDrivers/Braintree/CreditCard.php
new file mode 100644
index 000000000000..8ffb51bc812f
--- /dev/null
+++ b/app/PaymentDrivers/Braintree/CreditCard.php
@@ -0,0 +1,43 @@
+<?php
+
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://opensource.org/licenses/AAL
+ */
+
+namespace App\PaymentDrivers\Braintree;
+
+
+use App\PaymentDrivers\BraintreePaymentDriver;
+
+class CreditCard
+{
+    /**
+     * @var BraintreePaymentDriver
+     */
+    private $braintree;
+
+    public function __construct(BraintreePaymentDriver $braintree)
+    {
+        $this->braintree = $braintree;
+    }
+
+    /**
+     * Credit card payment page.
+     *
+     * @param array $data
+     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
+     */
+    public function paymentView(array $data)
+    {
+        $data['gateway'] = $this->braintree;
+        $data['client_token'] =
+
+        return render('gateways.braintree.credit_card.pay', $data);
+    }
+}
diff --git a/app/PaymentDrivers/BraintreePaymentDriver.php b/app/PaymentDrivers/BraintreePaymentDriver.php
new file mode 100644
index 000000000000..198fc72a2b0b
--- /dev/null
+++ b/app/PaymentDrivers/BraintreePaymentDriver.php
@@ -0,0 +1,63 @@
+<?php
+
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://opensource.org/licenses/AAL
+ */
+
+namespace App\PaymentDrivers;
+
+
+use App\Models\GatewayType;
+use App\Models\SystemLog;
+use App\PaymentDrivers\Braintree\CreditCard;
+
+class BraintreePaymentDriver extends BaseDriver
+{
+    public $refundable = true;
+
+    public $token_billing = true;
+
+    public $can_authorise_credit_card = true;
+
+    public $gateway;
+
+    public static $methods = [
+        GatewayType::CREDIT_CARD => CreditCard::class,
+        GatewayType::PAYPAL,
+    ];
+
+    const SYSTEM_LOG_TYPE = SystemLog::TYPE_BRAINTREE;
+
+    public function init()
+    {
+
+    }
+
+    public function setPaymentMethod($payment_method_id)
+    {
+        $class = self::$methods[$payment_method_id];
+
+        $this->payment_method = new $class($this);
+
+        return $this;
+    }
+
+    public function gatewayTypes(): array
+    {
+        return [
+            GatewayType::CREDIT_CARD,
+            GatewayType::PAYPAL,
+        ];
+    }
+
+    public function processPaymentView(array $data)
+    {
+        return $this->payment_method->paymentView($data);
+    }
+}
diff --git a/resources/views/portal/ninja2020/gateways/braintree/credit_card/pay.blade.php b/resources/views/portal/ninja2020/gateways/braintree/credit_card/pay.blade.php
new file mode 100644
index 000000000000..984dfd1d7878
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/braintree/credit_card/pay.blade.php
@@ -0,0 +1,68 @@
+@extends('portal.ninja2020.layout.payments', ['gateway_title' => ctrans('texts.credit_card'), 'card_title' => ctrans('texts.credit_card')])
+
+@section('gateway_head')
+    <meta name="client-token" content="{{ $client_token ?? '' }}"/>
+
+    <script src="https://js.braintreegateway.com/web/dropin/1.27.0/js/dropin.min.js"></script>
+@endsection
+
+@section('gateway_content')
+    <form action="{{ route('client.payments.response') }}" method="post" id="server-response">
+        @csrf
+        <input type="hidden" name="gateway_response">
+        <input type="hidden" name="store_card">
+        <input type="hidden" name="payment_hash" value="{{ $payment_hash }}">
+
+        <input type="hidden" name="company_gateway_id" value="{{ $gateway->getCompanyGatewayId() }}">
+        <input type="hidden" name="payment_method_id" value="{{ $payment_method_id }}">
+
+        <input type="hidden" name="token">
+    </form>
+
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.payment_type')])
+        {{ ctrans('texts.credit_card') }}
+    @endcomponent
+
+    @include('portal.ninja2020.gateways.includes.payment_details')
+
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.pay_with')])
+        @if(count($tokens) > 0)
+            @foreach($tokens as $token)
+                <label class="mr-4">
+                    <input
+                        type="radio"
+                        data-token="{{ $token->token }}"
+                        name="payment-type"
+                        class="form-radio cursor-pointer toggle-payment-with-token"/>
+                    <span class="ml-1 cursor-pointer">**** {{ optional($token->meta)->last4 }}</span>
+                </label>
+            @endforeach
+        @endisset
+
+        <label>
+            <input
+                type="radio"
+                id="toggle-payment-with-credit-card"
+                class="form-radio cursor-pointer"
+                name="payment-type"
+                checked/>
+            <span class="ml-1 cursor-pointer">{{ __('texts.new_card') }}</span>
+        </label>
+    @endcomponent
+
+    @component('portal.ninja2020.components.general.card-element-single')
+        <div id="dropin-container"></div>
+    @endcomponent
+
+    @include('portal.ninja2020.gateways.includes.pay_now')
+@endsection
+
+@push('gateway_footer')
+    <script type="text/javascript">
+        braintree.dropin.create({
+            authorization: document.querySelector('meta[name=client-token]').content,
+            container: '#dropin-container'
+        }, (error, dropinInstance) => {
+        });
+    </script>
+@endpush