Angular 8: Stripe elements nested inside Nebular Components

问题

Problem: I'm running into an issue where I am unable to tokenize the credit card information posted inside of the card stripe element I am mounting to my component.

I am currently using the Nebular stepper component (https://akveo.github.io/nebular/docs/components/stepper/overview#nbsteppercomponent) and have a nested child component with the following ts code:

public async fetchCardInput(): Promise<any> {
    let address: Address = this.ccAddress.fetchAddressData();
    let name = this.getCardholderName();
    let line2 = address.getAddressLine2();

    let cardTokenPayload = {
        name: name,
        address_line1: address.getAddressLine1(),
        address_city: address.getCity(),
        address_state: address.getState(),
        address_zip: address.getZipCode(),
        country: this.constants.US,
        currency: this.constants.USD
    };

    if (line2) {
        cardTokenPayload['address_line2'] = line2;
    }

    const { token, error } = await this.stripe.createToken(this.card, cardTokenPayload);

    if (error) {
        console.log('Something went wrong: ', error);
        return null;
    } else {
        console.log('SUCCESS! Token: ', token);

        let data = {
            tokenId: token.id,
            address: address,
            cardholderName: name
        }

        return data;
    }
}

html (pulled out the html and ts from the child component but it's still behaving the same way):

<nb-step label="Payment / Payout">
  <div class="heading">{{ constants.PAYMENT_INFORMATION }}</div>
  <label class="input-label">{{ constants.CREDIT_CARD_INFORMATION }}</label>
  <div class="card-container">
      <div id="card-element" #cardElement></div>
  </div>
  <div *ngIf="error" class="error mt-10">{{ error }}</div>
</nb-step>

The thing is, this implementation works completely fine when it's not nested inside of the Nebular component. Has anyone found a work-around for this issue or at least familiar with Nebular components and what they're doing under the hood?

EDIT: Adding the browser exception:

ERROR Error: Uncaught (in promise): IntegrationError: We could not retrieve data from the specified Element.
          Please make sure the Element you are attempting to use is still mounted.

I am using Angular 8 and Nebular 4.5.0.

Thanks in advance!

来源：https://stackoverflow.com/questions/61448168/angular-8-stripe-elements-nested-inside-nebular-components

标签

html

angular

typescript

stripe-payments

nebular