Angular7 Net2.2 信用卡处理应用程序

Question

我正在为我的网络 2.2/Angular 7 Web 应用程序实现信用卡处理功能。如何连接到服务器端的银行以获得信用卡批准？

我找到了这张棱角分明的信用卡。 这是我获取信用卡信息以发送到网络服务器的前端代码。

export class CreditcardComponent implements OnInit {
ccForm: FormGroup;
submitted: boolean = false;
constructor(private _fb: FormBuilder) {
 }
ngOnInit() {
  this.ccForm = this._fb.group({
  creditCard: ['', [<any>CreditCardValidator.validateCCNumber]],
  expirationDate: ['', [<any>CreditCardValidator.validateExpDate]],
  cvc: ['', [<any>Validators.required, <any>Validators.minLength(3), 
  <any>Validators.maxLength(4)]] 
});
  }
  onSubmit(ccForm) {
   this.submitted = true;
   console.log(ccForm);
 } 
}

这是 html 代码：

<h2>Input credit card number</h2>
<form [formGroup]="ccForm" (ngSubmit)="onSubmit()" novalidate>
  <div class="form-group">
    <label for="cc-number">Credit card number</label>
    <input id="cc-number" formControlName="creditCard" type="tel" 
     autocomplete="off" ccNumber>
    <!--add error on wrong formate of number using <div> -->
  </div>
  <div class="form-group">
      <label for="cc-exp-date">expiration date</label>
      <input id="cc-exp-date" formControlName="expirationDate" type="tel" 
      autocomplete="cc-exp" ccExp>
      <!--add error on wrong formate of number using <div> -->
  </div>    
  <div class="form-group">
      <label for="cc-cvc">cvc</label>
      <input id="cc-cvc" formControlName="cvc" type="tel" 
    autocomplete="off" ccCvc>
      <!--add error on wrong formate of number using <div> -->
  </div> 

我会将姓名、地址、信用卡信息发送到服务器，并将其存储在 SQL 数据库中。 我不确定这是否是最有效的方法。

Answer 1

我会创建一个信用卡服务并使用帖子到您的服务器端代码。

类型：Ng g s "服务名称（将是信用卡）" --模块应用程序以创建信用卡服务。

下面是一个帖子示例，您需要设置正确的参数和 url 以及您期望的响应 ApproveCreditCardResponse 模型：

approve(creditCard: string, cvc: string): Observable<ApproveCreditCardResponse> {
    return <Observable<ApproveCreditCardResponse>> this.http.post(environment.apiBaseUrl + '/api/creditcardurl',
      {
        'creditCard': creditCard,
        'cvc': cvc
      });
   }

创建服务后，您可以在现有控制器 onSubmit 方法中使用它，如下所示：

this.creditCardService.approve(this.creditCardNumber, this.creditCardCvc).subscribe(
        response => {
            const results = response;
            //todo handle successful response
        }, error => {
            const errorResponse = error['error'];
            //todo handle error response
        }
    );

不要忘记在构造函数中导入服务：

private creditCardService: CreditCardService

如果您需要更多帮助，请告诉我。这对您来说应该是一个很好的起点。