Question

在这里，我正在尝试将带状支付网关与.net核心集成在一起。以下是我的整合部分。将以下与脚本相关的代码添加到我的index.html文件中。

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
  <script type="text/javascript">
    Stripe.setPublishableKey('pk_test_o8SJmIFp8LKkBw9WAmjn8Al9');
  </script>

我的component.html文件。

<form [formGroup]="paymentForm" (ngSubmit)="purchaseTicket()" #formDir="ngForm">
    <span class="payment-message">{{message}}</span>
    <div class="form-row">
      <label>
        <span>Card Number</span>
        <input formControlName="cardNumber" name="card-number" type="text" size="20" data-stripe="number">
      </label>
    </div>
    <div class="form-row">
      <label>
        <span>Expiration (MM/YY)</span>
        <input formControlName="expiryMonth" name="expiry-month" type="text" size="2" data-stripe="exp_month">
      </label>
      <span> / </span>
      <input formControlName="expiryYear" name="expiry-year" type="text" size="2" data-stripe="exp_year">
    </div>
    <div class="form-row">
      <label>
        <span>CVC</span>
        <input formControlName="cvc" name="cvc" type="text" size="4" data-stripe="cvc">
      </label>
    </div>
    <input type="submit" value="Submit Payment">
  </form>

component.ts代码如下。

loginForm: FormGroup;
 myAppUrl: string = "";
  constructor(private formBuilder: FormBuilder,private _zone: NgZone, private _http: Http){
    this.myAppUrl = "https://localhost:44303/";
  }
  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      cardNumber: [null,],
      expiryMonth: [null,],
      expiryYear: [null,],
      cvc:[null,]

    });

 }

  public model: any;
  public card: any;
  public errorMessage: string;
  public successMessage: string;
  cardNumber: string;
  expiryMonth: string;
  expiryYear: string;
  cvc: string;
  message: string;

  purchaseTicket() {
    console.log("clicked");
    (<any>window).Stripe.card.createToken(
      this.card,
      (status: number, response: any) => {
        if (status === 200) {
          this.model.token = response.id;
          this._http
            .get(this.myAppUrl + 'api/stripe/Pay')
            .subscribe(
              result => {
                this.successMessage = 'Thank you for purchasing a ticket!';
                console.log(this.successMessage);
              },
              error => {
                this.errorMessage = 'There was a problem registering you.';
                console.error(error);
              }
            );
        } else {
          this.errorMessage = 'There was a problem purchasing the ticket.';
          console.error(response.error.message);
        }
      }
    );
  }

现在，当我执行此代码时，它给我的错误为“错误错误：需要卡片” ，这是在组件类内部声明的变量。由于我尝试将卡号分配给相同的变量，但仍然显示相同的错误。

This is the artcile which i have followed

在Angle 6中集成Stripe付款网关时，遇到“需要卡片”错误

0 个答案: