Question

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

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

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的“服务名（将是信用卡）” --module app 创建信用卡服务。

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

set([Point(1, 2)])

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

approve(creditCard: string, cvc: string): Observable<ApproveCreditCardResponse> {

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

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

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
        }
    );

让我知道是否需要更多帮助。这对您来说应该是一个很好的起点。

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

1 个答案: