I'm fairly new to Braintree. Im integrating the DropIn UI in the Sandbox environment. The 'payment_method_nonce' is returning empty after I submit my form, which makes the transaction fail. The DropIn UI displays correctly in the specific div, and to make sure everything was working correctly I added in a place holder for the PaymentMethodNonce which was 'fake-valid-nonce', which made the transaction valid. I am stuck on why the Braintree server is not sending back a Nonce value.
I make an Ajax call to token.php to get the Client Token which enables the DropIn UI to render correctly.
Ajax call below:
<script>
$.ajax({
url: "/braintree/token.php",
type: "get",
dataType: "json",
success: function (data) {
braintree.setup(data, 'dropin', {container: 'dropin-container'});
);
</script>
This is token.php which generates the Client Token:
require ("braintree.php");
$clientToken = $gateway->clientToken()->generate();
echo json_encode($clientToken);
When I inspect the HTML, BrainTree shows a 'server-error-message' div, and it displays "There was an error processing your request. Try again." Other posts regarding this issue have mentioned that the way a HTML form can be set up and submitted can cause this issue.
Here is my Form:
<div class="container">
<div class="row flex-nowrap">
<div class="alpha-container col-12">
<div class="content-container">
<form id="infoForm" method="post" action="/congrats.php">
<div class="tab">
<h2>Pick a Time</h2>
<div>
<!-- Google Schedule API goes here -->
</div>
<div>
<h4>Distance:</h4>
<p></p>
<br>
<h4>Duration:</h4>
<p></p>
<h4>Estimate:</h4>
<p></p>
</div>
</div>
<div class="tab">
<h2>Contact Information</h2>
<div class="contact-form">
<div class="contact-block">
<label for="fullname"></label>
<input type="text" name="Data[fullname]" class="contact" placeholder="Full Name">
</div>
<div class="contact-block">
<label for="email"></label>
<input type="email" name="Data[email]" class="contact" placeholder="Email Address">
</div>
<div class="contact-block">
<label for="phonenumber"></label>
<input type="number" name="Data[phonenumber]" class="contact" placeholder="Phone Number">
</div>
</div>
</div>
<div class="tab">
<h2>Payment Information</h2>
<div class="payment-form">
<label for="firstName"></label>
<input type="text" placeholder="First Name" name="Data[first_name]">
<label for="lastName"></label>
<input type="text" placeholder="Last Name" name="Data[last_name]">
<div id="dropin-container"></div>
</div>
</div>
<!-- Next/Previous Buttons -->
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<!--Progress Bar -->
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
</div>
</div>
</div>
</div>
The form uses Javascript to hide the steps of the form and then adds a submit button then it has reached the last step. 'congrats.php' is where I'll be processing the transaction. I am including both jQuery and Braintree JS in my header.
Edit: My solution was found by editing my HTML form. The form above used javascript to add a submit button once on the last step of the form. My new form now just has a button tag with type=submit and now the 'payment_method_nonce' is being created. For whatever reason, the Braintree server was not receiving my payment information upon submit.
Related
AS I am new to jQuery I am trying to learn new things so I need little help in this : As I am trying to hide form field on submitting the form and display successful message but the form keep reloading and fields are not hiding.
following is my code
$(document).ready(function() {
$("#contact_form").submit( function() {
$("#contact_form").hide();
$(".successMessage").show();
});
});
<section class="section NPScontainer">
<a name="pagecontent" id="pagecontent"></a>
<div class="container content page NPScontainer">
<div class="feature_divider NPS-divider"></div>
{% render 'page-multi-column', content: page.content %}
<div class="one-whole column">
<div class="rich-text__content center">
<div class="rich-text__text featured_text">
<h1>THANK YOU</h1>
<p><strong>Thank you for giving us a rating</strong></p>
<p>If you have further details to share with us regarding your rating, please don’t hesitate to share them.</p>
<p>Your feedback will help us improve our services for you.</p>
</div>
<p class="successMessage">"Thank you, we value your feedback. If your feedback requires a response, our customer service team will reach out to you via the email address you have provided.”</p>
<div class="nps_feedback_form">
{% form 'contact' %}
{{ form.errors | default_errors }}
<div class="feedback-type">
<label for="feedback-type">Feedback type</label>
<div class="nps-radio">
<span><input type="radio" name="contact[feedback_type]" value="Compliments" id="comments"><label for="comments">Compliments</label></span>
<span><input type="radio" name="contact[feedback_type]" value="Areas for improvement" id="suggestions"><label for="suggestions">Areas for improvement</label></span>
<span><input type="radio" name="contact[feedback_type]" value="Questions" id="questions"><label for="questions">Questions</label></span>
</div>
</div>
<div class="message">
<label for="message">Feedback</label>
<textarea name="contact[body]" id="message" required></textarea>
</div>
<div class="personal-info">
<div class="first-name">
<label for="first-name">Name</label>
<input type="text" name="contact[first_name]" id="first-name" required/>
</div>
<div class="email">
<label for="email">Email</label>
<input type="email" name="contact[email]" id="email" required />
</div>
</div>
<div class="submit">
<input id="submitnpsform" type="submit" value="Submit"/>
</div>
{% endform %}
</div>
</div>
</div>
</div>
</section>
The default flow for forms is reloading the page when submitting, so you need to prevent this using event.preventDefault(). That should stop the form from reloading the page.
$(document).ready(function() {
$("#contact_form").submit( function(event) {
event.preventDefault()
$("#contact_form").hide();
$(".successMessage").show();
});
});
I have been trying to make a form in HTML (Bootstrap) that sends the information to my mail id. for this I am using formsubmit.
for some reason, when submiting the form, It redirects the page to a 'success' page. I do realise that there is a way to redirect it to a different page but I would rather have the section in which the form is present to disappear and show a 'success' section. For reference, here is my form code:
<section id="get-started" class="get-started">
<div class="container">
<div class="row text-center">
<h1 class="display-3 fw-bold text-capitalize">Get started</h1>
<div class="heading-line"></div>
<!-- <p class="lh-lg">
can write something here later
</p> -->
</div>
<!-- START THE CTA CONTENT -->
<div class="row text-white">
<div class="col-12 col-lg-6 gradient shadow p-3">
<div class="cta-info w-100">
<h4 class="display-4 fw-bold">Sign up for Beta!</h4>
<p class="lh-lg">
Join the waitlist for the beta program. Limited spots available! </p>
<h3 class="display-3--brief">What will be the next step?</h3>
<ul class="cta-info__list">
<li>Enter your details.</li>
<li>Wait to be accepted into the beta program.</li>
<li>Enjoy using Clickytize.</li>
</ul>
</div>
</div>
<div class="col-12 col-lg-6 bg-white shadow p-3">
<div class="form w-100 pb-2">
<h4 class="display-3--title mb-5">Join the waitlist!</h4>
<form action="https://formsubmit.co/533cb72c9e26d2503a81229e9c8a246a" method="POST" class="row">
<input type="hidden" name="_captcha" value="false">
<div class="col-lg-6 col-md mb-3">
<input type="text" placeholder="First Name" id="inputFirstName" name="firstName" class="shadow form-control form-control-lg">
</div>
<div class="col-lg-6 col-md mb-3">
<input type="text" placeholder="Last Name" id="inputLastName" name="lastName" class="shadow form-control form-control-lg">
</div>
<div class="col-lg-12 mb-3">
<input type="email" placeholder="email address" id="inputEmail" name="emailId" class="shadow form-control form-control-lg">
</div>
<div class="col-lg-12 mb-3">
<textarea name="message" placeholder="Link your social media profile" id="message" name="message" class="shadow form-control form-control-lg"></textarea>
</div>
<div class="text-center d-grid mt-1">
<button type="submit" class="btn btn-primary rounded-pill pt-3 pb-3">
submit
<i class="fas fa-paper-plane"></i>
</button>
<script>
form.onSubmit= (event)=>{
event.preventDefault();
}
</script>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
If you want to prevent redirection of page and submit the form then you need to take care of submitting the form data using javascript.
First add onsubmit event attribute in your form tag like this:
<form method="POST" class="row my-form" onsubmit="return submitForm()">
We can remove the action attribute from the form tag.
in Javascript:
function submitForm() {
const form = document.querySelector('.my-form')
const formData = new FormData(form)
const url = 'https://formsubmit.co/533cb72c9e26d2503a81229e9c8a246a'
fetch(
url,
{
method: 'POST',
body: formData
}
)
return false
}
We are using the native fetch API to send data to form-data to the endpoint. We are also using the FormData API to create an object of form inputs
Returing false prevents page from reload.
Read more about:
Fetch API FormData API
Whenever I attempt to click the submit button, nothing happens.
I have attempted to change the button, however I doubt this is the issue.
JavaScript Code:
$('#contactForm').submit(function () {
$.ajax({
type: "POST",
url: "php/contact.php",
data: $('#contactForm').serialize(),
success: function (msg) {
if (msg == 'SEND') {
$('.success').fadeIn();
$('.error').fadeOut();
$('#contactForm')[0].reset();
} else {
$('.success').fadeOut();
$('.error').fadeIn().find('h3').text(msg);
}
}
});
return false;
});
HTML Code:
<div>
<h2 class="small-heading">CONTACT US</h2>
<div class="contact-form col-sm-11 clearfix">
<form action="contact-complete.php" id="contactForm" method="post" name="contactForm">
<fieldset>
<div class="col-sm-12">
<input id="name" name="name" placeholder="Your Name*" type="text" value="">
</div>
<div class="col-sm-12">
<input id="email" name="email" placeholder="Your Email*" type="text" value="">
</div>
<div class="col-xs-12">
<textarea cols="5" id="message" name="message" placeholder="Your Message....*"></textarea>
</div>
<div class="col-xs-12">
<button type="submit" form="contactForm" class="submit active">SEND</button>
</div>
<div class="error col-xs-12">
<h3></h3>
</div>
<!-- Error Message [ END ] -->
<div class="success col-xs-12" id="update">
<h3>Success! Your message was sent.</h3>
</div>
<!-- Submit Button [ END ] -->
</fieldset>
</form>
<!-- Contact Form [ END ] -->
</div>
</div>
If you could please help me out this would be much appreciated.
Thank you for all of your help.
This seems to be an issue within the AJAX call. I removed "return false;" from the code and it seemed to work. However, it was sending the information twice. So I just removed the AJAX code all together and it worked just fine redirecting to the PHP mail() script.
Thanks for all of your help.
Your button doesnt have an action and you don´t listen for it either
<button type="submit" form="contactForm" class="submit active" OnClick="submit()">SEND</button>
Or add an ID and listen for that in the JS
I have two separate donation forms that need to redirect to their own custom 'Thank You' pages once submitted. Squarespace does not give you the option to do this and instead defaults to a preset, generated page. I believe what I am looking for--and I could be wrong--is some custom Javascript that can handle the request.
Below is the HTML for the first form:
https://secure.squarespace.com/commerce/donate?donatePageId=56a99e1557eb8df616ef2dad
<div class="left-column-wrapper">
<div id="form-wrapper”>
<div id="yui_3_17_2_1_1480624209818_107" class="yui3-widget sqs-widget sqs-checkout-form”>
<div id="yui_3_17_2_1_1480624209818_109" class="sqs-checkout-form-content”>
<form action="/commerce/submit-donation?crumb=BF2bsTsJ-mjNZmFjMjkxZDUyMDVlNmMxYjZmYjM4NjFiNWQ4MjU0" method="POST”>
<input type="hidden" name="customFormSubmission”>
<div id="yui_3_17_2_1_1480624209818_163" class="yui3-widget sqs-widget sqs-checkout-form-section card sqs-checkout-form-address sqs-checkout-form-payment editing sqs-checkout-form-payment-focused”>
<div id="yui_3_17_2_1_1480624209818_165" class="sqs-checkout-form-payment-content”>
<div class="title">
<fieldset id="yui_3_17_2_1_1480624209818_836">
<div class="subtitle">Billing Address</div>
<!-- bill to shipping -->
<!-- Billing Information —>
<div id="billing-address">
<div id=“credit-card”>…</div>
<div class="subtitle">Secure Payment</div>
<!--
Credit Card Fields
NOTA BENE: These INPUTs are left without 'name' because we ABSOLUTELY must NOT
transmit these values to our own servers.
-->
<div id="credit-card”>…</div>
<!-- Secure payment conditions -->
<div id="comfort”>…</div>
<!-- Place Order -->
<div id="place-order">
<div id="place-order-button" class="button continue-button" value="Place Order">SECURE DONATION</div>
<div class="wait-in-queue-message" style="display: none”>…</div>
<!-- hidden field to convey the Stripe Token so we may submit the charge -->
<input name="stripeToken" type="hidden">
<!-- optional hidden fields -->
<input name="donationAmountCents" type="hidden">
<input name="donatePageId" type="hidden">
<input name="email" type="hidden">
<input name="phone" type="hidden">
<input name="joinMailingList" type="hidden">
</div>
</fieldset>
</div>
</div>
</form>
</div>
</div>
</div>
Below is the beginning of the HTML for the second form (just to show a comparison for the differences):
https://secure.squarespace.com/commerce/donate?donatePageId=583c8b80d2b8571174b04cc8
<div class="left-column-wrapper">
<div id="form-wrapper”>
<div id="yui_3_17_2_1_1480625072856_106" class="yui3-widget sqs-widget sqs-checkout-form”>
<div id="yui_3_17_2_1_1480625072856_108" class="sqs-checkout-form-content”>
<form action="/commerce/submit-donation?crumb=BF2bsTsJ-mjNZmFjMjkxZDUyMDVlNmMxYjZmYjM4NjFiNWQ4MjU0" method="POST”>
<input type="hidden" name="customFormSubmission”>
<div id="yui_3_17_2_1_1480625072856_162" class="yui3-widget sqs-widget sqs-checkout-form-section card sqs-checkout-form-address sqs-checkout-form-payment editing sqs-checkout-form-payment-focused”>
<div id="yui_3_17_2_1_1480625072856_164" class="sqs-checkout-form-payment-content”>
<div class="title">
Any help would be greatly appreciated.
Thanks so much!
That seems to be a common question with multiple replies but I couldn't get any of them work.
I'm working on WP. Currently I'm using a plugin that shows a pop-up as soon as a not logged in user lands to the website. In the popup I use an optin form (created through MailChimp).
When the user submits his info, a new tab opens moving him to the email verification page.
The problem is that the popup remains open in the first tab.
I would like it to close as soon as the data are submitted. Is that possible?
Here's a link to the website.
Here's the code of my form:
<div id="mc_embed_signup">
<form action="http://fitnessforum.us6.list-manage.com/subscribe/post?u=d6acf8949532b107b7b21c9d0&id=1304ea7322" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<div class="mc-field-group">
<input id="firstname3" style="width:260px;margin:5px 0;background-position:95% center" type="text" value="" name="FNAME" placeholder="'Ονομα">
</div>
<div class="mc-field-group">
<input id="primaryemail3" style="width:260px;margin:5px 0;background-position:97% center" type="email" value="" name="EMAIL" placeholder="Email">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div class="clearfix">
<input name="subscribe" style="width:305px;margin:4px 5px 0 0" class="simplemodal-close button_link hover_fade large_button silver button_widget" type="submit" value="ΣΤΕΙΛΤΕ ΤΟ ΔΩΡΟ ΜΟΥ!"></div>
</form>
</div>
<div style="text-align: center">
<p class="under_button2"> Το email σου είναι ασφαλές στα χέρια μας.</p>
<div class="af-clear">
</div>
</div>
</div>
<!--End mc_embed_signup-->
Just make sure your "thank you" page has code like someone above is mentioning. Is it an actual popup or javascript one like shadowbox? You might need something like this:
parent.Shadowbox.close();"