I have an angular app with a Laravel API on the backend. I'm trying to build a payment form. The data is being sent. I see it in the console when I submit the form. But I'm getting the error 422 - Unprocessable entity. Validation rules are failing for town, county, and billing address. But they are in the console.
Payment Component
export class AdvertPaymentComponent implements OnInit {
advertPaymentForm: FormGroup;
model: any;
payment: Payment;
constructor(private advertService: AdvertService, private alertify: AlertifyService, public authService: AuthService,
private formBuilder: FormBuilder) { }
ngOnInit() {
this.createAdvertPaymentForm();
}
createAdvertPaymentForm() {
this.advertPaymentForm = this.formBuilder.group({
town: ['', Validators.required],
county: ['', Validators.required],
billing_address: ['', Validators.required],
cardnumber: ['', Validators.required],
month: ['', Validators.required],
year: ['', Validators.required],
cvv: ['', Validators.required],
});
}
submitPayment() {
if (this.advertPaymentForm.value) {
this.payment = (Object.assign({}, this.advertPaymentForm.value));
console.log(this.payment);
this.advertService.createAdvertPayment(2, this.payment).subscribe(data => {
this.alertify.success('Success');
}, error => {
this.alertify.error(error);
});
}
}
}
Payment HTML
<form [formGroup]="advertPaymentForm" (ngSubmit)="submitPayment()">
<ng-template matStepLabel>Enter Card Details</ng-template>
<div class="form-group">
<input type="text" class="form-control" formControlName="billing_address" placeholder="Billing Address">
</div>
<div class="form-group">
<input type="text" class="form-control" formControlName="town" placeholder="town">
</div>
<div class="form-group">
<input type="text" class="form-control" formControlName="county" placeholder="county">
</div>
<div class="form-group">
<input type="text" class="form-control" formControlName="cardnumber" placeholder="4111111111111111">
</div>
<div class="form-group">
<input type="text" class="form-control" formControlName="month" placeholder="05">
</div>
<div class="form-group">
<input type="text" class="form-control" formControlName="year" placeholder="19">
</div>
<div class="form-group">
<input type="text" class="form-control" formControlName="cvv" placeholder="cvv">
</div>
<div class="form-group">
<input type="text" class="form-control" formControlName="county" placeholder="county">
</div>
<button mat-button matStepperNext>Next</button>
</form>
Advert Serice method that is called in the payment component.
createAdvertPayment(propertyId: number, payment: Payment) {
return this.http.post(this.baseUrl + propertyId + '/payment', {payment});
}
This is the payment model
export interface Payment {
town?: string;
county?: string;
billing_address: string;
cardnumber: string;
month: string;
year: string;
cvv: string;
}
This is the laravel function that the is hit from the endpoint
public function ProcessAdvertPayment(Property $property, Request $request, PropertyPaymentRequest $propertyPaymentRequest) {
$payload = $request->input('payload', false);
$nonce = $payload['nonce'];
$payment = Braintree_Transaction::sale([
'amount' => 1,
'paymentMethodNonce' => $nonce,
'creditCard' => ['number' => request('cardnumber'), 'expirationDate' => request('month') . '/' . request('year'), "cvv" => request('cvv')],
]);
if($payment->success)
{
$property->payment()->create(['amount' => $payment->transaction->amount, 'braintree_transaction_id' => $payment->transaction->id, 'billing_address' => request(['property']->billing_address), 'town' => request('town'), 'county' => request('county')]);
return response()->json($payment);
}
return response()->json(['error' => 'Payment Failed. Please try again or contact your payment provider for further help.'], 400);
}
This is a image of the payload
via Chebli Mohamed

Aucun commentaire:
Enregistrer un commentaire