Spreedly iframe with Angular

Question

I am trying to save card using spreedly ifrmae. I have successfully created the card token using following spreedly event

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);
    
  });

After generating card token from spreedly event, i want to save card token on my server, but i am not able to call my API inside Spreedly.on('paymentMethod') event same i am not able to use card token outside Spreedly.on('paymentMethod') event.

Answer 1

I am not familiar with Angular syntax but you can just handle it with a state manager. In React I've used the ContextAPI as I need this data in a store, but you can just as easily handle it with React useState or 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();
});

Likewise for Errors I've written an error handler with useState

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

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

You can then handle your redirect something like this.

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

Not sure if this answers your question 100%, but I hope it points you in the right direction.