Component shows message on ajax result

dev
1

I’ve got a stripe payment form in my component. When I get a response back from the ajax request, I want to display a message to the user.

I’ve got something basic working but I don’t understand how to render the response:

export default Ember.Component.extend({
  stripe: Stripe('stripe_key_goes_here'),

  card: function() {
    var elements = this.get('stripe').elements();
    return elements.create('card', { hidePostalCode: true });
  }.property('stripe'),

  didInsertElement() {
    this._super();
    this.get('card').mount('#card-element');
  },

  actions: {
    submitStripeCard() {
      this.get('stripe').createToken(this.get('card')).then(function(result) {
        if (result.error) {
          console.log('error yo');
        }
        else {
          var data = {
            stripeToken: result.token.id,
            amount: 1234
          };

          ajax('/charges', { data: data, method: 'post' }).then(data => {
             // display something
          }).catch((data) => {
          
         });
        }
      });
    }
  }
});

My template is:

<form id="payment-form">
  <div>
    <label for="card-element">Credit or debit card</label>
    <div id="card-element"></div>
  </div>

  <button {{action "submitStripeCard"}}>Submit Payment</button>

  <div class="stripe-card-result" style="visibility: hidden;">payment happened</div>
</form>

Can anyone please point me in the right direction?

2

The variable scope of this was lost inside createToken.

Fixed!

1 Like