Add fee and net to charge detail page

dist/js/tool.js

@@ -2884,6 +2884,25 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 
@@ -2906,8 +2925,12 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
 
     computed: {
-        amount: function amount() {
-            return (this.charge.amount / 100).toFixed(2) + ' ' + this.charge.currency.toUpperCase();
+        net: function net() {
+            if (!this.charge.balance_transaction) {
+                return 0;
+            }
+
+            return ((this.charge.amount - this.charge.balance_transaction.fee) / 100).toFixed(2) + ' ' + this.charge.currency.toUpperCase();
         },
         date: function date() {
             return moment.unix(this.charge.created).format('YYYY/MM/DD h:mm:ss a');
@@ -2927,6 +2950,12 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
         }
     },
 
+    filters: {
+        money: function money(amount, currency) {
+            return (amount / 100).toFixed(2) + ' ' + currency.toUpperCase();
+        }
+    },
+
     created: function created() {
         this.getCharge();
     }
@@ -3060,9 +3089,53 @@ var render = function() {
       }),
       _vm._v(" "),
       _c("charge-detail-item", {
-        attrs: { label: "Amount", value: _vm.amount }
+        attrs: {
+          label: "Amount",
+          value: _vm._f("money")(_vm.charge.amount, _vm.charge.currency)
+        }
       }),
       _vm._v(" "),
+      _c(
+        "div",
+        { staticClass: "flex border-b border-40 mb-6 py-3 px-6 w-full" },
+        [
+          _c("div", { staticClass: "w-1/4 py-4" }, [
+            _c("h4", { staticClass: "font-normal text-80" }, [
+              _vm._v("\n                Fees\n            ")
+            ])
+          ]),
+          _vm._v(" "),
+          _c("div", { staticClass: "w-3/4 py-4" }, [
+            _vm.charge.balance_transaction &&
+            _vm.charge.balance_transaction.fee_details.length > 0
+              ? _c(
+                  "div",
+                  { staticClass: "text-90" },
+                  _vm._l(_vm.charge.balance_transaction.fee_details, function(
+                    fee
+                  ) {
+                    return _c("div", [
+                      _c("p", [
+                        _vm._v(
+                          _vm._s(_vm._f("money")(fee.amount, fee.currency)) +
+                            " "
+                        ),
+                        _c(
+                          "span",
+                          { staticClass: "text-sm text-80 ml-2 mb-4" },
+                          [_vm._v("(" + _vm._s(fee.description) + ")")]
+                        )
+                      ])
+                    ])
+                  })
+                )
+              : _c("p", [_vm._v("—")])
+          ])
+        ]
+      ),
+      _vm._v(" "),
+      _c("charge-detail-item", { attrs: { label: "Net", value: _vm.net } }),
+      _vm._v(" "),
       _c("charge-detail-item", {
         attrs: { label: "Status", value: _vm.charge.status }
       }),

readme.md

@@ -56,7 +56,7 @@ public function tools()
 
 #### Charge Detail
 
-- [ ] Calculate Stripe processing fee / net amount
+- [ X ] Calculate Stripe processing fee / net amount
 - [ ] Add "Refund" button
 - [ ] Better handling of booleans (green dot like regular Nova Boolean)
 - [ ] Labels for statuses

resources/js/components/ChargeDetailCard.vue

@@ -1,7 +1,26 @@
 <template>
     <loading-card :loading="initialLoading" class="flex flex-wrap py-8 mb-8 w-full">
         <charge-detail-item :label="'ID'" :value="charge.id"></charge-detail-item>
-        <charge-detail-item :label="'Amount'" :value="amount"></charge-detail-item>
+        <charge-detail-item :label="'Amount'" :value="charge.amount | money(charge.currency)"></charge-detail-item>
+
+        <div class="flex border-b border-40 mb-6 py-3 px-6 w-full">
+            <div class="w-1/4 py-4">
+                <h4 class="font-normal text-80">
+                    Fees
+                </h4>
+            </div>
+
+            <div class="w-3/4 py-4">
+                <div v-if="charge.balance_transaction && charge.balance_transaction.fee_details.length > 0" class="text-90">
+                    <div v-for="fee in charge.balance_transaction.fee_details">
+                        <p>{{ fee.amount | money(fee.currency) }} <span class="text-sm text-80 ml-2 mb-4">({{ fee.description }})</span></p>
+                    </div>
+                </div>
+                <p v-else>&mdash;</p>
+            </div>
+        </div>
+
+        <charge-detail-item :label="'Net'" :value="net"></charge-detail-item>
         <charge-detail-item :label="'Status'" :value="charge.status"></charge-detail-item>
         <charge-detail-item :label="'Created'" :value="date"></charge-detail-item>
         <charge-detail-item :label="'Metadata'" :value="charge.metadata"></charge-detail-item>
@@ -36,8 +55,12 @@ export default {
     },
 
     computed: {
-        amount() {
-            return `${ (this.charge.amount / 100).toFixed(2) } ${ this.charge.currency.toUpperCase() }`
+        net() {
+            if (! this.charge.balance_transaction) {
+                return 0
+            }
+
+            return `${ (( this.charge.amount - this.charge.balance_transaction.fee) / 100).toFixed(2) } ${ this.charge.currency.toUpperCase() }`
         },
 
         date() {
@@ -57,6 +80,12 @@ export default {
         },
     },
 
+    filters: {
+        money(amount, currency) {
+            return `${ (amount / 100).toFixed(2) } ${ currency.toUpperCase() }`
+        }
+    },
+
     created() {
         this.getCharge()
     }

src/Clients/StripeClient.php

@@ -38,7 +38,7 @@ public function listCharges($options = [])
     public function getCharge($id)
     {
         try {
-            return Charge::retrieve($id, ['api_key' => $this->apiKey]);
+            return Charge::retrieve(['id' => $id, 'expand' => ['balance_transaction']], ['api_key' => $this->apiKey]);
         } catch (Exception $e) {
 
         }