如何使用Vue.js和JavaScript开发并集成Forte UI按钮及其回调函数？

I’ve worked through integrating Forte’s UI button with Vue.js, and the main hurdle is Forte’s requirement that callback functions must be global or outside the Vue component scope. Here’s a complete, working implementation that solves this by attaching the callback to the window object:

Full Vue Component Code #

<template>
  <button 
    :api_access_id="forteConfig.apiAccessId" 
    :version_number="forteConfig.versionNumber" 
    :method="forteConfig.method" 
    :location_id="forteConfig.locationId" 
    :total_amount="forteConfig.totalAmount" 
    :utc_time="forteConfig.utcTime" 
    :order_number="forteConfig.orderNumber" 
    :signature="forteConfig.apiSignature" 
    allowed_methods="visa,mast,disc,amex" 
    callback='forteCb' 
    hash_method="sha1" 
    save_token="false" 
    swipe="false" 
    billing_company_name_attr="hide"
  >
    Proceed to Pay
  </button>
</template>

<script>
import { configUrls } from '../../util/clients/client-config';
let self;
const URLS = configUrls();

// Global callback function for Forte events
const forteCb = (e) => {
  const response = JSON.parse(e.data);
  
  switch (response.event) {
    case 'begin':
      // Initialization start - no action needed
      break;
    case 'abort':
      // User cancelled the payment flow - no action needed
      break;
    case 'success':
      // Handle successful transaction
      self.$emit('forteResponse', `{trace_number: ${response.trace_number} }`);
      alert(`Thanks for your order. Your trace number is ${response.trace_number}`);
      break;
    case 'failure':
      // Handle failed transaction
      alert(`Sorry, your transaction failed. Reason: ${response.response_description}`);
      break;
    default:
      // Catch-all for unhandled events
      break;
  }
};

export default {
  name: 'FortePayment',
  data: () => ({
    forteConfig: {},
  }),
  mounted() {
    // Attach callback to window so Forte can access it globally
    window.forteCb = forteCb;
    // Store Vue instance reference for use in the global callback
    self = this;
    
    // Dynamically load Forte's checkout script
    const fortePaymentScript = document.createElement('script');
    fortePaymentScript.setAttribute('src', URLS.FORTE_CHECKOUT);
    document.head.appendChild(fortePaymentScript);
    
    // Pull Forte configuration from Vuex store
    this.forteConfig = this.$store.state.ForteService.forteConfig;
  },
};
</script>

Key Implementation Notes #

• Global Callback Registration: The forteCb function is defined outside the Vue component options, then assigned to window.forteCb in the mounted hook. This makes it accessible to Forte’s script, which expects a global function reference.
• Accessing Vue Instance in Callback: We use a self variable to store the Vue component instance (this) when the component mounts. This lets us call Vue-specific methods like $emit or access the store from within the global callback.
• Dynamic Script Loading: Forte’s checkout script is loaded dynamically in the mounted hook to ensure it’s only loaded when the component is rendered, avoiding unnecessary network requests.
• Dynamic Attribute Binding: All required Forte button attributes (like api_access_id, total_amount) are bound to the forteConfig object, which is pulled from the Vuex store for centralized configuration management.

内容的提问来源于stack exchange，提问作者Vibhanshu Rana