使用Angular的iframe

编程问答 2022-06-14

问题描述

我正试图使用​​ifrmae来保存卡。 我已经使用以下事件成功创建了卡令牌

Spreedly.on('paymentMethod',function (token,pmData) {
    // Set the token in the hidden form field
    var tokenField = document.getElementById('payment_method_token');
    tokenField.setAttribute('value',token);
    console.log("this.token",token);
    
  });

从严重事件中生成卡令牌后，我想将卡令牌保存在服务器上，但是我无法在Spreedly.on('paymentMethod')事件内调用我的API，同样，我无法在{{1 }}事件。

解决方法

我不熟悉 Angular 语法，但您可以使用状态管理器来处理它。在 React 中，我使用了 ContextAPI，因为我需要存储中的这些数据，但您可以使用 React useState 或 this.state 轻松处理它。

Spreedly.on('paymentMethod',function (token,pmData) {
      bookingContext.setSpreedly({
        card_type: pmData.card_type,last_four: pmData.last_four_digits,payment_method: pmData.payment_method_type,token: pmData.token,month: pmData.month,year: pmData.year,fingerprint: pmData.fingerprint,});

      submitBooking();
});

对于错误我也用 useState 编写了一个错误处理程序

const [spreedlyError,setSpreedlyError] = useState([]);

  Spreedly.on('errors',function (errors) {
      setSpreedlyError(errors);
      setTimeout(() => {
        setSpreedlyError([]);
      },3000);
    });

然后你可以像这样处理你的重定向。

 const submitBooking = () => {
    Router.push('/your-success-endpoint');
  };

不确定这是否 100% 回答了您的问题，但我希望它为您指明了正确的方向。

angular7data-bindingiframeiframespreedlytypescripttypescripttypescript