Stripe未定义ReferenceError:未定义Stripe

时间:2018-03-06 22:02:27

标签: javascript ionic-framework stripe-payments

任何人都知道如何修复此错误错误:未捕获(在承诺中):ReferenceError:未定义Stripe。 我正在做的步骤是声明一个Stripe变量,它将阻止编译器抱怨丢失的对象。

代码低于我的javascript文件,但无论如何要修复问题。我的声明var Stripe导致问题

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

declare var Stripe: any;
 @Component({
selector: 'page-stripe-java-script',
templateUrl: 'stripe-java-script.html',
})

 export class StripeJavaScriptPage {

stripe = Stripe('YOUR_API_KEY');
card: any;

constructor(public navCtrl: NavController, public navParams: NavParams) {
}

ionViewDidLoad() {
 this.setupStripe();
 }

setupStripe(){
let elements = this.stripe.elements();
var style = {
  base: {
    color: '#32325d',
    lineHeight: '24px',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

this.card = elements.create('card', { style: style });

this.card.mount('#card-element');

this.card.addEventListener('change', event => {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

var form = document.getElementById('payment-form');
form.addEventListener('submit', event => {
  event.preventDefault();

  // this.stripe.createToken(this.card)
  this.stripe.createSource(this.card).then(result => {
    if (result.error) {
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      console.log(result);
    }
  });
});
}
}

下面是html代码

          <ion-header>
          <ion-navbar>
 <ion-title></ion-title>
       </ion-navbar>

      </ion-header>
<ion-content>

<div class="form-row">
  <div id="card-element">
    <!-- a Stripe Element will be inserted here. -->
  </div>

  <!-- Used to display Element errors -->
  <div id="card-errors" role="alert"></div>
</div>

<button ion-button block large>Add Card</button>

   </form>

   </ion-content>

0 个答案:

没有答案