Angular7 Net2.2信用卡处理应用

Question

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

我找到了 this angular 信用卡。这是我获取信用卡信息并发送到网络服务器的前端代码。

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

我会创建信用卡服务并使用 post 到您的服务器端代码。

类型：Ng g s "servicename(would be creditcard)" --module app 创建信用卡服务。

这是一个 post 示例，您需要在其中设置正确的参数和 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

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

Angular7 Net2.2信用卡处理应用

Angular7 Net2.2 Credit Card Processing Application

.net

angular

credit-card