时间戳

首页 > 解决方案 > Angular 11 + Stripe 集成问题和错误

angular - Angular 11 + Stripe 集成问题和错误

问题描述

将 ngx stripe 与 Angular 一起使用时遇到错误

ERROR in src/app/payment/payment.component.html:19:24 - error TS2339: Property 'elementsOptions' does not exist on type 'PaymentComponent'.
19     [elementsOptions]="elementsOptions"

  src/app/payment/payment.component.ts:12:16
    12   templateUrl: './payment.component.html',
    Error occurs in the template of component PaymentComponent.
src/app/payment/payment.component.html:15:45 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.
15 <form novalidate (ngSubmit)="createToken()" [formGroup]="stripeTest">

  src/app/payment/payment.component.ts:12:16
    12   templateUrl: './payment.component.html',
    Error occurs in the template of component PaymentComponent.
src/app/payment/payment.component.html:17:3 - error NG8001: 'ngx-stripe-card' is not a known element:
1. If 'ngx-stripe-card' is an Angular component, then verify that it is part of this module.
2. If 'ngx-stripe-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

17   <ngx-stripe-card
18     [options]="cardOptions"
19     [elementsOptions]="elementsOptions"
20   ></ngx-stripe-card>

  src/app/payment/payment.component.ts:12:[93m16
    12   templateUrl: './payment.component.html',
    Error occurs in the template of component PaymentComponent.
src/app/payment/payment.component.html:18:5 - error NG8002: Can't bind to 'options' since it isn't a known property of 'ngx-stripe-card'.
1. If 'ngx-stripe-card' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'ngx-stripe-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

18     [options]="cardOptions"

  src/app/payment/payment.component.ts:12:16
    12   templateUrl: './payment.component.html',
    Error occurs in the template of component PaymentComponent.
src/app/payment/payment.component.html:19:5 - error NG8002: Can't bind to 'elementsOptions' since it isn't a known property of 'ngx-stripe-card'.
1. If 'ngx-stripe-card' is an Angular component and it has 'elementsOptions' input, then verify that it is part of this module.  
2. If 'ngx-stripe-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

19     [elementsOptions]="elementsOptions"

  src/app/payment/payment.component.ts:12:16
    12   templateUrl: './payment.component.html',
    Error occurs in the template of component PaymentComponent.

现在我的 Payment.component.html 文件看起来像

<form novalidate (ngSubmit)="createToken()" [formGroup]="stripeTest">
  <input type="text" formControlName="name" placeholder="Jane Doe" />
  <ngx-stripe-card
    [options]="cardOptions"
    [elementsOptions]="elementsOptions"
  ></ngx-stripe-card>
  <button type="submit">CREATE TOKEN</button>
</form>

payment.component.ts 文件看起来像

import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import {
  StripeCardElementOptions,
  StripeElementsOptions,
} from '@stripe/stripe-js';
import { StripeCardComponent, StripeService } from 'ngx-stripe';

@Component({
  selector: 'app-payment',
  templateUrl: './payment.component.html',
  styleUrls: ['./payment.component.css'],
})
export class PaymentComponent implements OnInit {
  @Input() total;
  @ViewChild(StripeCardComponent) card: StripeCardComponent;

  cardOptions: StripeCardElementOptions = {
    style: {
      base: {
        iconColor: '#111',
        color: '#111',
        fontSize: '1.2rem',
        '::placeholder': {
          color: '#111',
        },
      },
    },
  };

  elements: StripeElementsOptions = { locale: 'auto' };

  stripeTest: FormGroup;

  constructor(
    public activeModal: NgbActiveModal,
    private fb: FormBuilder,
    private stripeService: StripeService
  ) {}

  ngOnInit(): void {
    this.stripeTest = this.fb.group({
      name: ['', [Validators.required]],
    });
  }

  createToken(): void {
    const name = this.stripeTest.get('name').value;
    this.stripeService
      .createToken(this.card.element, { name })
      .subscribe((result) => {
        if (result.token) {
          // Use the token
          console.log(result.token.id);
        } else if (result.error) {
          // Error creating the token
          console.log(result.error.message);
        }
      });
  }
}

ps：我已经在imports下的app.module.ts中做了import。

NgxStripeModule.forRoot('pk_test_TYooMQauvdEDq54NiTphI7jx')

标签： angulartypescriptstripe-payments

解决方案

您可以为组件添加内部模块

import { NgxStripeModule } from 'ngx-stripe'; //HERE
...

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ReactiveFormsModule,
    NgxStripeModule.forChild(), // HERE
    ComponentsModule,
    NewPaymentMethodPageRoutingModule
  ],

推荐阅读