帶角度的條紋元素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

回答

相關問題