I have a multi-step form for a user to register in a conference, in each step is done an ajax request to validate the form fields of each step, all steps are in the same page. The steps are:
Do you know how the flow should be to achieve that?
Maybe an approach can be something like below in storePaymentMethods() but it doesn't seem very correct) do everything in this method:
A full summary of the flow of the registration with the multistep form that I have for now:
So for the step1 there is the form:
when the user clicks in "Go to step 2" button is made an ajax request to validate the data and if there are no errors, code 200 is returned and the user go to the step 2:
When the user clicks in "Go to step 3" button is made an ajax request to validate the data and if there are no errors, code 200 is returned and the user go to the step 3, ajax request:
// Resume of the methods of the RegistrationController, that is the controller that handles the multistep form:
from How the flow of this context should be? ( Where to put the code to process the payment depending of the selected payment method?)
- Step1 is to collect some info about the user (name and tin number)
- Step 2 is to collect the payment method (credit card or references)
- Step 3 is the payment
$payment_info = [
'name' => "user name",
'email' => 'user email',
'value' => 'registration total price',
'id' => 'registration id',
];
$newPayment = new Payment($payment_info);
$transference = $newPayment->gererateReferences();
// after generate the codes with generateTransferData is necessary to
// show the codes to the user in the step 3 if the selected payment
// method was "References"
ConferenceController. When the user is in step 2 and selects a payment method (credit card or transfers) and click "Go to step 3" is made an ajax request to the storePaymentMethods() of the ConferenesController. In this method, the field "payment_method" is validated and if it was filled by the user code 200 is returned:public function storePaymentMethods(Request $request){
$request->validate([
'payment_method' => 'required',
]);
return response()->json([
'success' => true,
'message' => 'success',
'payment_method' => $request->payment_method,
], 200);
}
<div>
<div id="transferences_section">
<!-- necessary fields to payments with transferences-->
</div>
<form method="post" id="step3form" action="">
<div id="credit_card_section">
<!-- necessary fields to payments with credit card-->
</div>
</form>
</div>
Do you know how the flow should be to achieve that?
Maybe an approach can be something like below in storePaymentMethods() but it doesn't seem very correct) do everything in this method:
public function storePaymentMethods(Request $request){
$request->validate([
'payment_method' => 'required',
]);
if($request->payment_method == "transferences"){
// generate codes and present to the user that codes
}
else if($request->payment_method == "credit_card"){
// show credit card inputs to the user
// and process the credit card payment with stripe
}
return response()->json([
'success' => true,
'message' => 'success',
'payment_method' => $request->payment_method,
], 200);
}
A full summary of the flow of the registration with the multistep form that I have for now:
So for the step1 there is the form:
<div>
<form method="post" id="step1form" action="">
<!-- fields of the step 1-->
<input type="submit" href="#step2" id="goToStep2" class="btn next-step" value="Go to step 2"/>
</form>
</div>
when the user clicks in "Go to step 2" button is made an ajax request to validate the data and if there are no errors, code 200 is returned and the user go to the step 2:
$('#goToStep2').on('click', function (event) {
event.preventDefault();
var custom_form = $("#" + page_form_id_step1);
$.ajax({
method: "POST",
url: '',
data: custom_form.serialize(),
datatype: 'json',
success: function (data, textStatus, jqXHR) {
var $active = $('.nav-pills li a.active');
nextTab($active);
},
error: function (data) {
// show errors
}
});
});
public function storeRegistrationInfo(Request $request, $id, $slug = null, Validator $validator){
$rules = [];
$messages = [];
$rules["name_invoice"] = 'required|max:255|string';
$rules["TIN_invoice"] = ['required', 'string', new ValidTIN()];
$validator = Validator::make($request->all(), $rules, $messages);
$errors = $validator->errors();
$errors = json_decode($errors);
if($validator->fails()) {
return response()->json([
'success' => false,
'errors' => $errors
], 422);
}
return response()->json([
'success' => true,
'message' => 'success'
], 200);
}
<div>
<form method="post" id="step2form" action="">
<!-- fields of the step 2-->
<input type="submit" href="#step3" id="goToStep3" class="btn next-step" value="Go to step 3"/>
</form>
</div>
When the user clicks in "Go to step 3" button is made an ajax request to validate the data and if there are no errors, code 200 is returned and the user go to the step 3, ajax request:
$("#credit_card_section").hide();
$("#references_section").hide();
var page_form_id_step2 = "step2form";
$('#goToStep3').on('click', function (event) {
event.preventDefault();
var custom_form = $("#" + page_form_id_step2);
$.ajax({
method: "POST",
url: '',
data: custom_form.serialize(),
datatype: 'json',
success: function (data, textStatus, jqXHR) {
var result = data;
if(result['payment_method'] == 'credit_card'){
$("#credit_card_section").show();
$("#transferences_section").hide();
}else{
$("#transferences_section").show();
$("#credit_card_section").hide();
}
var $active = $('.nav-pills li a.active');
nextTab($active);
},
error: function (data) {
// show errors
}
});
});
public function storePaymentMethods(Request $request){
$request->validate([
'payment_method' => 'required',
]);
return response()->json([
'success' => true,
'message' => 'success',
'payment_method' => $request->payment_method,
], 200);
}
<div>
<form method="post" id="step3form" action="">
<div id="credit_card_section">
<!-- necessary fields to payments with credit card-->
</div>
<div id="transferences_section">
<!-- necessary fields to payments with transferences-->
</div>
</form>
</div>
// Resume of the methods of the RegistrationController, that is the controller that handles the multistep form:
class RegistrationController extends Controller
{
public function storeQuantities(Request $request, $id, $slug = null){
// method that stores in session the ticket types
// selected by the user in the conference details page
Session::put('selectedRtypes', $selectedRtypes);
Session::put('allParticipants' , $allParticipants);
Session::put('customQuestions' , $selectedRtypes[$rtype->name]['questions']);
// and redirects the user to the registartion page registration.blade.php to the route 'conferences.registration'
// this route is associated with the displayRegistrationPage() method
return redirect(route('conferences.registration',['id' => $id, 'slug' => $slug]));
}
// method to display the registration.blade.php
public function displayRegistrationPage(Request $request, $id, $slug=null){
// get the session values
$selectedRtypes = Session::get('selectedRtypes');
$allParticipants = Session::get('allParticipants');
$customQuestions = Session::get('customQuestions');
// redirect the user to the registration.blade.php
if(isset($selectedRtypes)) {
return view('conferences.registration',
['selectedRtypes' => $selectedRtypes, 'customQuestions' => $customQuestions, 'id' => $id, 'slug' => $slug]);
}
else{
// return user to the conference details page
return redirect(route('conferences.show',['id' => $id, 'slug' => $slug]));
}
}
// method to handle the step1 of the multi step form
public function storeRegistrationInfo(Request $request, $id, $slug = null, Validator $validator){
// get and validate the fields of the step1
// and returns code 200 if al is ok
return response()->json([
'success' => true,
'message' => 'success'
], 200);
}
// method to handle the step2 of the multi step form
public function storePaymentMethods(Request $request){
// validate if the payment_method field was filled
// if was filled return code 200
// and returns the payment_method
//so in the step 3 div is possible to show a section for
// when the payment_method is credit card (#credit_card_section)
or transfers ("transfers_section")
return response()->json([
'success' => true,
'message' => 'success',
'payment_method' => $request->payment_method,
], 200);
}
}
from How the flow of this context should be? ( Where to put the code to process the payment depending of the selected payment method?)
