Component shows message on ajax result

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

  didInsertElement() {

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

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

My template is:

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

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

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

Can anyone please point me in the right direction?

The variable scope of this was lost inside createToken.


1 Like