# Component shows message on ajax result

**URL:** https://meta.discourse.org/t/component-shows-message-on-ajax-result/57765
**Category:** Development
**Created:** [2017年二月22日 04:13 UTC](https://meta.discourse.org/t/component-shows-message-on-ajax-result/57765 "2017-02-22T04:13:57Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![rimian](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rimian/32/120658_2.png) [@rimian](https://meta.discourse.org/u/rimian)
#### Post date: [2017年二月22日 04:13 UTC](https://meta.discourse.org/t/component-shows-message-on-ajax-result/57765/1 "2017-02-22T04:13:57Z")

</div>

I’ve got a [stripe payment form](https://stripe.com/docs/elements) 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:

```plaintext
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:

```plaintext
<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?

---

<div class="post-metadata">

### Author: ![rimian](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rimian/32/120658_2.png) [@rimian](https://meta.discourse.org/u/rimian)
#### Post date: [2017年二月22日 22:33 UTC](https://meta.discourse.org/t/component-shows-message-on-ajax-result/57765/2 "2017-02-22T22:33:57Z")

</div>

The variable scope of `this` was lost inside `createToken`.

Fixed!