条纹元素与角2

发布时间：2020-12-17 17:44:28 所属栏目：安全来源：网络整理

导读：我正在尝试将带有角度2的Stripe元素与接受信用卡信息的元素卡集成.请注意,我不打算使用条纹检查,因为有几个例子,如何将条带与角度2集成. declare var Stripe:any;@Component({ selector: 'app-account',templateUrl: './account.component.html',styleUrls:

我正在尝试将带有角度2的Stripe元素与接受信用卡信息的元素卡集成.请注意,我不打算使用条纹检查,因为有几个例子,如何将条带与角度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,cvc);
  }

  getCardToken(number,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().

如何访问角度2中的dom元素以使用Stripe正常工作？

此外,我在我的角度应用程序上使用服务器端渲染,如果这会影响角度在客户端上的工作方式.

解决方法

我希望你已经找到了解决问题的方法.但是,由于你的问题没有答案,我会尽力帮助你.

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!