angular - 带 Angular 2 的 Stripe 元素

Question

我正在尝试将带 Angular 2 的 Stripe 元素与接受信用卡信息的元素卡集成。请注意，我没有考虑使用 Stripe 结帐，因为有几个关于如何将 Stripe 与 Angular 2 集成的示例。

declare var Stripe:any;

@Component({
  selector: 'app-account',
  templateUrl: './account.component.html',
  styleUrls: ['./account.component.scss']
})
export class AccountComponent implements OnInit {

  constructor(
    private _zone: NgZone
  ) { }

  private cardToken:any;

  ngOnInit() {

    if (typeof window !== 'undefined') {
      this.setUpCard();
    }
  }


  setUpCard() {
    var stripe = Stripe('TEST_API_KEY');
    var elements = stripe.elements();
    var style = {
      base: {
        fontSize: '16px',
        lineHeight: '24px'
      }
    };

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

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

  getCardData(number, month, year, cvc) {
      this.getCardToken(number, month, year, cvc);
  }

  getCardToken(number, month, year, cvc) {
    var dataObj = {"number": number, "exp_month": month, "exp_year": year, "cvc": cvc};

    Stripe.card.createToken(dataObj,
      (status, response) => { 

        this._zone.run(() => {
          if (status === 200) {
            this.cardToken = response;
            console.log("the card token: ", this.cardToken);
          }
          else {
            console.log("error in getting card data: ", response.error)
          }
        });
      }
    );
  }

HTML

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

当我的组件加载时出现此错误:

The selector you specified (#card-element) applies to no DOM elements that are currently on the page. Make sure the element exists on the page before calling mount().

如何访问 Angular 2 中的 dom 元素以与 Stripe 一起正常工作？

另外，如果这会影响 Angular 在客户端上的工作方式，我会在我的 Angular 应用程序上使用服务器端渲染。

Answer 1

我希望您已经找到了解决问题的方法。但是，由于您的问题没有答案，我会尽力提供帮助。

您遇到的错误表明问题出在您调用 setUpCard() 的组件生命周期中。您应该在 AfterViewInit 事件之后调用该方法，即当组件 View 被初始化时。因此，您需要将在 ngOnInit() 中使用的代码移动到 ngAfterViewInit() Hook 实现中。

另请参阅 https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#hooks-purpose-timing