ngfrontend/src/ui-refactor/views/signup/components/GuestPaystack.js

import paystack from 'vue-paystack'

// 复用现有组件；其 V1 SDK 会忽略 access_code，游客交易改由 V2 恢复。
export default {
  name: 'GuestPaystack',
  extends: paystack,
  data() {
    return { PaystackPopup: null, scriptError: null, opening: false }
  },
  methods: {
    loadScript(callback) {
      const script = document.createElement('script')
      script.src = 'https://js.paystack.co/v2/inline.js'
      script.onload = () => {
        this.PaystackPopup = window.PaystackPop
        callback()
      }
      script.onerror = () => {
        this.scriptError = new Error('Unable to load Paystack. Please close the dialog and try again.')
        callback()
        this.handleError(this.scriptError)
      }
      document.head.appendChild(script)
    },
    handleError(error) {
      this.opening = false
      this.$emit('error', error)
    },
    payWithPaystack() {
      if (this.opening) return
      this.opening = true
      return this.scriptLoaded.then(() => {
        if (this.scriptError) throw this.scriptError
        if (!this.accessCode) throw new Error('Payment access code is missing.')
        const popup = new this.PaystackPopup()
        popup.resumeTransaction(this.accessCode, {
          onSuccess: response => {
            this.opening = false
            this.callback(response)
          },
          onCancel: () => {
            this.opening = false
            this.close()
          },
          onError: this.handleError
        })
      }).catch(this.handleError)
    }
  }
}