fix var scope error and diplay some html when result is success
This commit is contained in:
parent
9ed1af4538
commit
5f170ebcd3
|
@ -1,6 +1,7 @@
|
|||
import { ajax } from 'discourse/lib/ajax';
|
||||
|
||||
export default Ember.Component.extend({
|
||||
result: null,
|
||||
stripe: Stripe('pk_test_b8RmhzlL8QPizJRqOrKF3JEV'),
|
||||
|
||||
card: function() {
|
||||
|
@ -9,25 +10,31 @@ export default Ember.Component.extend({
|
|||
}.property('stripe'),
|
||||
|
||||
didInsertElement() {
|
||||
this._super();
|
||||
this.get('card').mount('#card-element');
|
||||
},
|
||||
|
||||
actions: {
|
||||
submitStripeCard() {
|
||||
var self = this;
|
||||
|
||||
this.get('stripe').createToken(this.get('card')).then(function(result) {
|
||||
|
||||
self.set('result', null);
|
||||
|
||||
if (result.error) {
|
||||
console.log('error yo');
|
||||
}
|
||||
else {
|
||||
var data = {
|
||||
var params = {
|
||||
stripeToken: result.token.id,
|
||||
amount: 1234
|
||||
};
|
||||
|
||||
ajax('/charges', { data: data, method: 'post' }).then(data => {
|
||||
console.log(data);
|
||||
}).catch(() => {
|
||||
console.log('error');
|
||||
ajax('/charges', { data: params, method: 'post' }).then(data => {
|
||||
self.set('result', (data.status == 'succeeded' ? true : null));
|
||||
}).catch((data) => {
|
||||
console.log('catch', data);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
@ -5,4 +5,8 @@
|
|||
</div>
|
||||
|
||||
<button {{action "submitStripeCard"}}>Submit Payment</button>
|
||||
|
||||
{{#if result}}
|
||||
<div class="stripe-card-result">payment happened</div>
|
||||
{{/if}}
|
||||
</form>
|
||||
|
|
Loading…
Reference in New Issue