Custom form with stripe gateway

  • Hello,
    I am developing a plugin where there is a form (for customer details) and I accept payment from Stripe payment gateway.

    Now, how can I possibly validate the form (check if any customer details is missing) ? I want customer to fill up their details in that custom form first and then fill up their credit card and CVC details in the popup (this popup is due to stripe pay button).

    Below is my code:

    
			<div class="wp-travel-engine-billing-details">
				<div class="relation-options-title">Billing Details: </div>
				<div class="wp-travel-engine-billing-details-wrapper">
					<div class="stripe-form-wrap">
						<input type="hidden" name="wp_travel_engine_booking_setting[place_order][cost]" value="1000">
						<input type="hidden" name="wp_travel_engine_booking_setting[place_order][traveler]" value="1">
						<input type="hidden" name="wp_travel_engine_booking_setting[place_order][tid]" value="984">
						<input type="hidden" name="wp_travel_engine_booking_setting[place_order][tname]" value="new trip">
						<input type="hidden" name="custom" value="bf1e15941d!2021-01-07">
						<input type="hidden" name="wp_travel_engine_booking_setting[place_order][datetime]" value="2021-01-07"></div>		

					<div class="wp-travel-engine-billing-details-field-wrap">
						<label for="wp_travel_engine_booking_setting[place_order][booking][fname]">First Name<span class="required">*</span></label>
						<input type="text" name="wp_travel_engine_booking_setting[place_order][booking][fname]" id="wp_travel_engine_booking_setting[place_order][booking][fname]" required="">	
					</div>
					<div class="wp-travel-engine-billing-details-field-wrap">
						<label for="lname">Last Name<span class="required">*</span></label>
						<input type="text" name="wp_travel_engine_booking_setting[place_order][booking][lname]" id="lname" required="">	
					</div>
					<div class="wp-travel-engine-billing-details-field-wrap">
						<label for="email">Email<span class="required">*</span></label>
						<input type="email" name="wp_travel_engine_booking_setting[place_order][booking][email]" id="email" required="">	
					</div>
					<div class="wp-travel-engine-billing-details-field-wrap">
						<label for="address">Address<span class="required">*</span></label>
						<input type="text" name="wp_travel_engine_booking_setting[place_order][booking][address]" id="address" required="">	
					</div>
					<div class="wp-travel-engine-billing-details-field-wrap">
						<label for="city">City<span class="required">*</span></label>
						<input type="text" name="wp_travel_engine_booking_setting[place_order][booking][city]" id="city" required="">	
					</div>
					<div class="wp-travel-engine-billing-details-field-wrap">
						<label for="country">Country<span class="required">*</span></label>
						<select required="" id="country" name="wp_travel_engine_booking_setting[place_order][booking][country]" data-placeholder="Choose a field type…" class="wc-enhanced-select">
							<option value=" ">Choose country…</option>
							<option value="Afghanistan">Afghanistan</option><option value="?land Islands">?land Islands</option>
						</select>
					</div>
					<script src="https://checkout.stripe.com/checkout.js" class="stripe-button active" data-key="" data-panel-label="Pay" data-amount="100000" data-name="new trip" data-currency="USD" data-label="Pay"></script>
					<button type="submit" class="stripe-button-el" style="visibility: visible;">
					<span style="display: block; min-height: 30px;">Pay</span></button>
				</div>
			</div>

    Also the stripe popup is shown here: https://prnt.sc/iffpe6 .This appears when Pay button is clicked.
    Any help would be highly appreciated.

    Thank you!

    • This topic was modified 7 years, 1 month ago by saurav.rox.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator bcworkz

    (@bcworkz)

    You mainly need to rely on JavaScript. Some rudimentary checks can be built into form fields with certain attributes (min, max, pattern, etc.) Use the required attribute to require something be entered in a field. Further JS checks can be triggered through element change or loss of focus events, or run the checks on submit before actually submitting the form. JS can enforce nearly any sort of constraints you can possibly think of.

    If validating data requires information from the server, the information can be gotten through Ajax requests. If the form submit goes to your server, such checks could wait until submittal. Any client side checks need to be considered as subject to malicious manipulation and any essential checks like escaping data needs to be done securely server side, away from possible user manipulation. If the submit goes directly to Stripe, this wouldn’t apply to you. Presumably Stripe is escaping incoming data for their own protection.

    Thread Starter saurav.rox

    (@sauravrox)

    Hello @bcworkz,
    Thanks for replying.

    I tried validating the form or checking if any form details is missing via Javascript.
    But if the form is left blank and Pay button is pressed then that validation doesnot work. The form is being submitted automatically after the Pay button is pressed without the validation.

    Can you please help me on this?

    Moderator bcworkz

    (@bcworkz)

    Sounds like your script needs to call preventDefault(), then validate, then POST the form data to Stripe. I’m assuming it’s already hooked into the Pay button click event. preventDefault() is a method of the event object passed to your event handler.

    Thread Starter saurav.rox

    (@sauravrox)

    Hello @bcworkz,
    Thanks for replying.

    As you can see that the stripe Pay button has its own script like this:

    <script src="https://checkout.stripe.com/checkout.js" class="stripe-button active" data-key="" data-panel-label="Pay" data-amount="100000" data-name="new trip" data-currency="USD" data-label="Pay"></script>
<button type="submit" class="stripe-button-el" style="visibility: visible;">
<span style="display: block; min-height: 30px;">Pay</span></button>

    How can I prevent default on that? Once it is clicked, the form is automatically submitted. My validation js code does not work. ??

    Moderator bcworkz

    (@bcworkz)

    Ah, one of those. It gets a little tricky. Initially, don’t include that HTML in your form. Instead, include your own submit button with different attributes that executes your script on click. You can then .preventDefault() and execute your script. When ready to submit to Stripe, reference the Stripe JS with document.createElement(“script”). Insert that and the other HTML with .appendChild() calls. Finally, trigger a click event on the new submit button with .click().

    Thread Starter saurav.rox

    (@sauravrox)

    Hello,
    I am not appending the stripe html part directly, I am appending it via ajax. Is it not possible to run my validation code first before the stripe pop-form appears?

    Moderator bcworkz

    (@bcworkz)

    Sorry for a slow reply. A glitch in notifications.

    I guess I’m not understanding your setup correctly. Are you not validating the pop-up form content? So the data you want to validate exists before the form? If so, then sure, validate as part of the script doing the Ajax call. Don’t even bother getting the form if validation fails, put up an error message of some sort.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Custom form with stripe gateway’ is closed to new replies.