typescript - 使用 Angular 快速地 iframe

Question

我正在尝试使用快速 ifrmae 保存卡。我已经使用以下 spreedly 事件成功创建了卡令牌

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，我无法在事件外部使用卡令牌Spreedly.on('paymentMethod')。

Answer 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% 回答您的问题，但我希望它能为您指明正确的方向。