带角度的条纹元素2

我正在尝试将角度为2的条纹元素与接受信用卡信息的元素卡集成在一起。请注意，我不是在寻找到使用条纹结账因为有这个几个例子如何条纹与角2带角度的条纹元素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？

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

来源

2017-05-14 Anton Scotte

我希望你已经找到了解决你的问题。但是，既然你的问题没有答案，我会尽力帮忙。

您提供的错误表明问题存在于您调用setUpCard（）的组件生命周期中。您应该在AfterViewInit事件后，即组件视图初始化后调用该方法。所以你需要将你在ngOnInit（）中使用的代码移动到ngAfterViewInit（）钩子实现中。

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

来源

2017-05-26 15:11:47

嗨，谢谢。正如你所建议的那样，我设法弄清了它与AfterViewInit的关系。这解决了我收到的错误信息的问题，虽然它没有完全解决我的问题，这就是为什么我还没有提供工作解决方案。我相信我用我的ssr-setup阻止了条纹初始化。我目前无法访问我的代码来检查我的后续问题，但如果您确定您的解决方案一般能够正常工作，我会很乐意接受您的答案！ –

带角度的条纹元素2

回答

相关问题