1

I am implementing a credit card proccessing functionality to my net 2.2/Angular 7 web application. How do I connect to a bank on the server side to get the credit card approved?

I found this angular credit card. This is my front end code to get the credit card information to send to the net server.

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

This is the html code:

<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> 

I will send the name, address, credit card information to the server and store it in an SQL database. I am not sure if this is the most efficient way to do this.

2
  • 1
    Ever heard of PCI compliance? It's a can of worms you may not want to open, but you'll have to if you want to work with banks.
    – nvoigt
    Jan 18, 2019 at 20:40
  • Worldpay is outstanding. They have a sandbox to test out the credit card interface.
    – Lee9287
    Jan 19, 2019 at 11:29

1 Answer 1

1

I would create a creditcard service and use a post to your server side code.

Type: Ng g s "servicename(would be creditcard)" --module app to create a creditcard service.

Here is example of a post where you will need to set the correct parameters and urls as well as the response ApproveCreditCardResponse model you expect:

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

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

After creating the service you can use it in your existing controller onSubmit method similar to this:

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

don't forget to import your service in your constructor:

private creditCardService: CreditCardService

Let me know if you need more help. This should be a good starting point for you.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.