Angular7 Net2.2 Credit Card Processing Application

Question

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.

Ever heard of [PCI compliance](https://en.wikipedia.org/wiki/Payment_Card_Industry_Data_Security_Standard)? 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 '19 at 20:40
Worldpay is outstanding. They have a sandbox to test out the credit card interface. — Lee9287, Jan 19 '19 at 11:29

abovetempo · Accepted Answer · 2019-01-18T22:28:13.430

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.

Thanks abovetempo. I found a great interface with worldpay to test out my credit card app. They have a net SDK to test it out! https://developer.vantiv.com/community/ecommerce/pages/sdks#jive_content_id_Java_SDK — Lee9287, Jan 19 '19 at 11:28

Angular7 Net2.2 Credit Card Processing Application

1 Answers1