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"
My doubt is how the flow should be, where this code should be placed in the 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);
}
If it returned code 200 the user goes to the step3, in step 3 is presented the "#credit_card_section" or "#transferences_section" with jquery based on the selected payment in the previous step. The #transferences_section is outside the form because is not necessary to submit any form for this payment method is only necessary to show some codes to the user.<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>
My doubt is where to put the code above that generates the payment codes so is possible to present that codes to the user in the div "#transferences_section".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>
step1 image to explain better: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
}
});
});
Then in the ConferencesController there is teh storeRegistrationInfo() to handle the above ajax request: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);
}
So, if code 200 is returned user is in the step2form:<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>
step2 image to explain better: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
}
});
});
The ConferenceController has the storePayment() to handle the ajax request above, it validates if the user selected a payment method and if yes returns code 200:public function storePaymentMethods(Request $request){
$request->validate([
'payment_method' => 'required',
]);
return response()->json([
'success' => true,
'message' => 'success',
'payment_method' => $request->payment_method,
], 200);
}
Then there is the step3 div. In the step3 div it will appear the div "#credit_card_section" visible or "#transferences_section" visible depending on the payment method selected in the previous step (credit card or transferences):<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>
step3 image to explain better, depending on the payment method the info that is necessary to show in the step 3 is different:// 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);
}
}
Full context diagram:from How the flow of this context should be? ( Where to put the code to process the payment depending of the selected payment method?)
No comments:
Post a Comment