带角度的Spreedly

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')事件生成卡令牌后，我想将卡令牌保存在我的服务器上，但我无法在Spreedly.on('paymentMethod')事件内部调用我的API，因为我无法在spreedly事件之外使用卡令牌。

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