From 7ec745c52c3b5d7a16c98a1535f2861e693254a9 Mon Sep 17 00:00:00 2001
From: Edward Yang <yangjin@guangda.work>
Date: Wed, 19 Jul 2023 10:34:04 +0000
Subject: [PATCH] =?UTF-8?q?!159=20Stripe=20=E5=8D=87=E7=BA=A7=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=20*=20wip=20*=20fixed=20stripe=20charge=20*=20wip=20*?=
 =?UTF-8?q?=20wip=20*=20code=20format=20*=20wip=20*=20wip=20*=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=20stripe=20*=20Background=20tab=20is=20automatically?=
 =?UTF-8?q?=20activated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Stripe/Services/StripePaymentService.php  |  15 +-
 .../Stripe/Views/checkout/payment.blade.php   | 212 +++++++++++-------
 resources/beike/admin/js/app.js               |  17 +-
 .../beike/admin/views/pages/setting.blade.php |   6 +-
 4 files changed, 156 insertions(+), 94 deletions(-)

diff --git a/plugins/Stripe/Services/StripePaymentService.php b/plugins/Stripe/Services/StripePaymentService.php
index b20c9cc7..5648ae92 100644
--- a/plugins/Stripe/Services/StripePaymentService.php
+++ b/plugins/Stripe/Services/StripePaymentService.php
@@ -26,21 +26,16 @@ class StripePaymentService extends PaymentService
 
     /**
      * @throws ApiErrorException
+     * @throws \Exception
      */
     public function capture($creditCardData): bool
     {
         $apiKey = plugin_setting('stripe.secret_key');
         Stripe::setApiKey($apiKey);
-        $token = Token::create([
-            'card' => [
-                'number'    => $creditCardData['cardnum'],
-                'exp_year'  => $creditCardData['year'],
-                'exp_month' => $creditCardData['month'],
-                'cvc'       => $creditCardData['cvv'],
-            ],
-        ]);
-
-        $tokenId  = $token['id'];
+        $tokenId  = $creditCardData['token'] ?? '';
+        if (empty($tokenId)) {
+            throw new \Exception('Invalid token');
+        }
         $currency = $this->order->currency_code;
 
         if (! in_array($currency, self::ZERO_DECIMAL)) {
diff --git a/plugins/Stripe/Views/checkout/payment.blade.php b/plugins/Stripe/Views/checkout/payment.blade.php
index 446ca0c9..9a405686 100644
--- a/plugins/Stripe/Views/checkout/payment.blade.php
+++ b/plugins/Stripe/Views/checkout/payment.blade.php
@@ -1,114 +1,170 @@
 <script src="{{ asset('vendor/vue/2.7/vue' . (!config('app.debug') ? '.min' : '') . '.js') }}"></script>
-<script src="{{ asset('vendor/element-ui/index.js') }}"></script>
-<link rel="stylesheet" href="{{ asset('vendor/element-ui/index.css') }}">
+<script src="https://js.stripe.com/v3/"></script>
 
-<script src="{{ asset('plugin/stripe/js/demo.js') }}"></script>
 <link rel="stylesheet" href="{{ asset('plugin/stripe/css/demo.css') }}">
-<div class="mt-5" id="bk-stripe-app" v-cloak>
+<div class="mt-5" id="stripe-form" v-cloak>
   <hr class="mb-4">
   <div class="checkout-black">
     <h5 class="checkout-title">{{ __('Stripe::common.title_info') }}</h5>
     <div class="">
-      <div class="mb-2">
+      <div class="mb-4">
         <img src="{{ plugin_origin('stripe','/image/pay-image.png') }}" class="img-fluid">
       </div>
-      <el-form ref="form" label-position="top" :rules="rules" :model="form" class="form-wrap w-max-500">
-        <el-form-item label="{{ __('Stripe::common.cardnum') }}" prop="cardnum">
-          <el-input v-model="form.cardnum"></el-input>
-        </el-form-item>
-        <el-form-item label="{{ __('Stripe::common.expiration_date') }}" required>
-          <div class="d-flex align-items-center">
-            <el-form-item prop="year" class="flex-grow-1">
-              <el-date-picker class="w-100 me-2" v-model="form.year" format="yyyy" value-format="yyyy"
-                type="year" placeholder="{{ __('Stripe::common.year') }}">
-              </el-date-picker>
-            </el-form-item>
-            <el-form-item prop="month" class="flex-grow-1 ms-3">
-              <el-date-picker v-model="form.month" class="w-100" format="MM" value-format="MM" type="month"
-                placeholder="{{ __('Stripe::common.month') }}">
-              </el-date-picker>
-            </el-form-item>
+      <div class="stripe-card w-max-600">
+        <div class="mb-3">
+          <div class="mb-2">Cardholder Name</div>
+          <div id="card-cardholder-name">
+            <input type="text" @input="cardholderNameInput"
+                   :class="['form-control', errors.cardholderName ? 'border-danger' : '']"
+                   v-model="form.cardholder_Name"
+                   placeholder="Cardholder Name" style="height: 40px; border-color: #dee2e6">
           </div>
-        </el-form-item>
-        <el-form-item label="{{ __('Stripe::common.cvv') }}" prop="cvv">
-          <el-input v-model="form.cvv"></el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-checkbox v-model="form.remenber">{{ __('Stripe::common.remenber') }}</el-checkbox>
-        </el-form-item>
-        <el-form-item>
-          <button class="btn btn-primary" type="button" @click="checkedBtnCheckoutConfirm('form')">{{ __('Stripe::common.btn_submit') }}</button>
-        </el-form-item>
-      </el-form>
+        </div>
+        <div v-if="errors.cardholderName" class="text-danger mt-n2 mb-3">@{{ errors.cardholderName }}</div>
+
+        <div class="mb-3">
+          <div class="mb-2">Credit Card Number</div>
+          <div id="card-number-element" :class="['px-2 border card-input', errors.cardNumber ? 'border-danger' : '']">
+          </div>
+        </div>
+        <div class="text-danger mt-n2 mb-3" v-if="errors.cardNumber">@{{ errors.cardNumber }}</div>
+
+        <div class="mb-3">
+          <div class="mb-2">Expiration Date</div>
+          <div :class="['px-2 border card-input', errors.cardExpiry ? 'border-danger' : '']" id="card-expiry-element">
+          </div>
+        </div>
+        <div class="text-danger mt-n2 mb-3" v-if="errors.cardExpiry">@{{ errors.cardExpiry }}</div>
+        <div class="mb-3">
+          <div class="mb-2">CVV</div>
+          <div :class="['px-2 border card-input', errors.cardCvc ? 'border-danger' : '']" id="card-cvc-element"></div>
+        </div>
+        <div class="text-danger mt-n2 mb-3" v-if="errors.cardCvc">@{{ errors.cardCvc }}</div>
+      </div>
+    </div>
+    <div>
+      <button class="btn btn-primary btn-lg" type="button" @click="checkedBtnCheckoutConfirm">{{
+        __('Stripe::common.btn_submit') }}</button>
     </div>
   </div>
 </div>
-
 <script>
-  new Vue({
-    el: '#bk-stripe-app',
+  let cardNumberElement = null, cardExpiryElement = null, cardCvcElement = null, stripe = null, elements = null;
+  const orderNumber = @json($order->number ?? '');
+
+  var stripeForm = new Vue({
+    el: '#stripe-form',
 
     data: {
       form: {
-        order_number: @json($order->number ?? null),
+        order_number: '',
         cardnum: '',
         year: '',
         month: '',
         cvv: '',
         remenber: false,
+
+        // 以上为以前自定义表单的字段
+        cardholder_Name: '',
       },
 
-      source: {
-        order: @json($order ?? null),
+      errors: {
+        cardNumber: '',
+        cardExpiry: '',
+        cardCvc: '',
+        cardholderName: ''
       },
-
-      rules: {
-        cardnum: [{
-          required: true,
-          message: "{{ __('Stripe::common.error_cardnum') }}",
-          trigger: 'blur'
-        }, ],
-        cvv: [{
-          required: true,
-          message: "{{ __('Stripe::common.error_cvv') }}",
-          trigger: 'blur'
-        }, ],
-        year: [{
-          required: true,
-          message: "{{ __('Stripe::common.error_year') }}",
-          trigger: 'blur'
-        }, ],
-        month: [{
-          required: true,
-          message: "{{ __('Stripe::common.error_month') }}",
-          trigger: 'blur'
-        }, ],
-      }
     },
 
     beforeMount() {
-      // console.log(33)
+      stripe = Stripe("{{ plugin_setting('stripe.publishable_key') }}");
+    },
+
+    mounted() {
+      this.createAndMountFormElements()
     },
 
     methods: {
-      checkedBtnCheckoutConfirm(form) {
-        this.$refs[form].validate((valid) => {
-          if (!valid) {
-            // this.$message.error('请检查表单是否填写正确');
-            return;
+      // stripe生成卡号校验部分
+      createAndMountFormElements() {
+        // stripe 样式，带边框
+        const style = {
+          base: {
+            color: "#32325d",
+            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
+            fontSmoothing: "antialiased",
+            lineHeight: "40px",
+            fontSize: "16px",
+            "::placeholder": {
+              color: "#aab7c4"
+            }
+          },
+          invalid: {
+            color: "#fa755a",
+            iconColor: "#fa755a"
           }
+        }
 
-          $http.post(`/stripe/capture`, this.form).then((res) => {
-            layer.msg(res.message)
+        elements = stripe.elements({
+          locale: "en" // 设置默认显示语种   en 英文 cn 中文 auto 自动获取语种
+        })
 
-            @if (current_customer())
-                location = "{{ shop_route('account.order.show', ['number' => $order->number]) }}"
-            @else
-                location = "{{ shop_route('checkout.success', ['order_number' => $order->number]) }}"
-            @endif
-          })
-        });
-      }
+        // 创建cardNumber并实例化
+        cardNumberElement = elements.create("cardNumber", {
+          style: style,
+          showIcon: true, // 设置卡片icon，默认值为false
+          placeholder: this.cardNumberplaceholder
+        })
+
+        cardNumberElement.mount("#card-number-element")
+
+        // 创建cardExpiry并实例化
+        cardExpiryElement = elements.create("cardExpiry", {style: style})
+        cardExpiryElement.mount("#card-expiry-element")
+
+        // 创建cardCvc并实例化
+        cardCvcElement = elements.create("cardCvc", {style: style, placeholder: 'CVV'})
+        cardCvcElement.mount("#card-cvc-element")
+      },
+
+      cardholderNameInput(e) {
+        if (e.target.value == '') {
+          this.errors.cardholderName = 'Please fill out a cardholder name.'
+        } else {
+          this.errors.cardholderName = ''
+        }
+      },
+
+      checkedBtnCheckoutConfirm() {
+        // 判断 stripeForm.errors 里面的值是否都为空
+        if (stripeForm.form.cardholder_Name == '') {
+          stripeForm.errors.cardholderName = 'Please fill out a cardholder name.'
+        }
+
+        // if (Object.values(stripeForm.errors).every(e => e == '')) {
+        const options = {
+          name: stripeForm.form.cardholder_Name,
+        };
+
+        layer.load(2, {shade: [0.3, '#fff']})
+
+        stripe.createToken(cardNumberElement, options).then(function (stripeResult) {
+          if (stripeResult.error) {
+
+            layer.msg(stripeResult.error.message, () => {
+            })
+            layer.closeAll('loading')
+          } else {
+            $http.post(`/stripe/capture`, {token: stripeResult.token.id, order_number: orderNumber}).then((pay) => {
+              if (pay.status == 'success') {
+                location = "checkout/success?order_number=" + orderNumber
+              } else {
+                layer.msg(pay.message, () => {})
+              }
+            })
+          }
+        })
+      },
     }
   })
-</script>
+</script>
\ No newline at end of file
diff --git a/resources/beike/admin/js/app.js b/resources/beike/admin/js/app.js
index eed417d1..6732452c 100644
--- a/resources/beike/admin/js/app.js
+++ b/resources/beike/admin/js/app.js
@@ -3,7 +3,7 @@
  * @link          https://beikeshop.com
  * @Author        pu shuo <pushuo@guangda.work>
  * @Date          2022-08-26 18:18:22
- * @LastEditTime  2023-06-14 14:30:05
+ * @LastEditTime  2023-07-14 18:15:09
  */
 
 import http from "../../../js/http";
@@ -64,6 +64,7 @@ $(document).ready(function ($) {
     },
   });
 
+  autoActiveTab()
   tinymceInit()
 });
 
@@ -114,3 +115,17 @@ const tinymceInit = () => {
   });
 }
 
+const autoActiveTab = () => {
+  const tab = bk.getQueryString('tab');
+
+  if (tab) {
+    if ($(`a[href="#${tab}"]`).length) {
+      $(`a[href="#${tab}"]`)[0].click()
+      return;
+    }
+
+    if ($(`button[data-bs-target="#${tab}"]`).length) {
+      $(`button[data-bs-target="#${tab}"]`)[0].click()
+    }
+  }
+}
diff --git a/resources/beike/admin/views/pages/setting.blade.php b/resources/beike/admin/views/pages/setting.blade.php
index d938b3e6..0022e29a 100644
--- a/resources/beike/admin/views/pages/setting.blade.php
+++ b/resources/beike/admin/views/pages/setting.blade.php
@@ -255,17 +255,13 @@
     }
 
     $(function() {
-      const [tab, line] = [bk.getQueryString('tab'), bk.getQueryString('line')];
+      const line = bk.getQueryString('line');
       getZones(country_id);
 
       $('select[name="country_id"]').on('change', function () {
         getZones($(this).val());
       });
 
-      if (tab) {
-        $(`a[href="#${tab}"]`)[0].click()
-      }
-
       if (line) {
         $(`textarea[name="${line}"], select[name="${line}"], input[name="${line}"]`).parents('.row').addClass('active-line');