Hi,
I am getting the following error on the checkout form and due to that the form is not being redirected to the Thank You page, however, the orders are getting completed successfully with the email notifications.
Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
I have used some code to get the value of the login members like name, email, phone etc.
Following is the checkout form code, can you please check and let me know what is the actual issue?
However, it’s working good if I switch it to the default checkout form.
<form class="system_form" action="/forms/cases.ashx?form=checkout" name="checkout" method="post" enctype="multipart/form-data">
{% component type:"shopping_cart", collectionVariable:"shoppingCartData", layout:"" %}
<fieldset>
<h2 class="system_title align_left">Billing Information</h2>
<p>* Required Fields</p>
<div class="cms_row">
<div class="cms_col_6">
<input type="text" id="FirstName" value="{{request.currentmember.FirstName}}" placeholder="First Name *" name="FirstName" required>
<input type="text" id="LastName" value="{{request.currentmember.LastName}}" placeholder="Last Name *" name="LastName" required>
<input type="email" id="Email" value="{{request.currentmember.Email}}" name="Email" placeholder="Email Address *" required>
</div>
<div class="cms_col_6">
<input type="text" id="Phone" placeholder="Phone *" name="Phone" value="{{request.currentmember.Phone}}" required>
<input type="text" id="CompanyName" placeholder="Сompany Name" name="CompanyName" value="">
</div>
</div>
</fieldset>
<fieldset>
<h2 class="system_title align_left">Billing Address</h2>
<p>* Required Fields</p>
<div class="cms_row">
<div class="cms_col_6">
<input type="text" id="Address" name="Address" Placeholder="Billing Address" value="{{request.currentmember.Address}}" required>
<input type="text" id="City" name="City" Placeholder="Billing City" value="{{request.currentmember.City}}" required>
</div>
<div class="cms_col_6">
<div class="cms_row">
<div class="cms_col_6">
<select id="State" name="State" class="custom-select" style="padding-top:0;padding-bottom:0;" required>
{% if request.currentmember.State.size > 0 or request.currentmember.State.size != null %}
<option value="{{request.currentmember.State}}" selected>{{request.currentmember.State}}</option>
{% else %}
<option value="" disabled selected>Billing State/Province</option>
{% endif%}
<option value="AB">Alberta</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AS">American Samoa</option>
<option value="AZ">Arizona</option>
<option value="BC">British Columbia</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DC">District Of Columbia</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="GU">Guam</option>
<option value="HI">Hawaii</option>
<option value="IA">Iowa</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MA">Massachusetts</option>
<option value="MB">Manitoba</option>
<option value="MD">Maryland</option>
<option value="ME">Maine</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MO">Missouri</option>
<option value="MP">Northern Mariana Islands</option>
<option value="MS">Mississippi</option>
<option value="MT">Montana</option>
<option value="NB">New Brunswick</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="NE">Nebraska</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NL">Newfoundland</option>
<option value="NM">New Mexico</option>
<option value="NS">Nova Scotia</option>
<option value="NT">Northwest Territories</option>
<option value="NU">Nunavut</option>
<option value="NV">Nevada</option>
<option value="NY">New York</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="ON">Ontario</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="PE">Prince Edward Island</option>
<option value="PR">Puerto Rico</option>
<option value="QC">Quebec</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="SK">Saskatchewan</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="UT">Utah</option>
<option value="VA">Virginia</option>
<option value="VI">Virgin Islands</option>
<option value="VT">Vermont</option>
<option value="WA">Washington</option>
<option value="WI">Wisconsin</option>
<option value="WV">West Virginia</option>
<option value="WY">Wyoming</option>
<option value="YT">Yukon</option>
</select>
</div>
<div class="cms_col_6">
<input type="text" id="ZipCode" name="ZipCode" Placeholder="Billing ZipCode" value="{{request.currentmember.ZipCode}}" required>
</div>
</div>
<input type="hidden" name="Payment_ShippingCountry" id="Payment_ShippingCountry" value="{{shoppingCartData.destinationCountry.name}}" />
<input type="text" disabled="disabled" name="PaymentShippingCountry" id="PaymentShippingCountry" value="{{shoppingCartData.destinationCountry.name}}" />
</div>
</div>
</fieldset>
<fieldset>
<h2 class="system_title align_left">Shipping Address</h2>
<div class="cms_row">
<div class="cms_col_12">
<div class="checkbox">
<input type="checkbox" id="check-address" name="check-address"><label>Same as Billing Address?</label>
</div>
</div>
</div>
<p>* Required Fields</p>
<div class="cms_row">
<div class="cms_col_6">
<input type="text" name="Payment_ShippingAddress" id="Payment_ShippingAddress" placeholder="Shipping Address" value="" required />
<input type="text" name="Payment_ShippingCity" id="Payment_ShippingCity" placeholder="City" value="" required />
</div>
<div class="cms_col_6">
<div class="cms_row">
<div class="cms_col_6">
<select id="Payment_ShippingState" name="Payment_ShippingState" class="custom-select" style="padding-top:0;padding-bottom:0;" required>
{% if request.currentmember.State.size > 0 or request.currentmember.State.size != null %}
<option value="{{request.currentmember.State}}" selected>{{request.currentmember.State}}</option>
{% else %}
<option value="" disabled selected>Billing State/Province</option>
{% endif%}
<option value="AB">Alberta</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AS">American Samoa</option>
<option value="AZ">Arizona</option>
<option value="BC">British Columbia</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DC">District Of Columbia</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="GU">Guam</option>
<option value="HI">Hawaii</option>
<option value="IA">Iowa</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MA">Massachusetts</option>
<option value="MB">Manitoba</option>
<option value="MD">Maryland</option>
<option value="ME">Maine</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MO">Missouri</option>
<option value="MP">Northern Mariana Islands</option>
<option value="MS">Mississippi</option>
<option value="MT">Montana</option>
<option value="NB">New Brunswick</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="NE">Nebraska</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NL">Newfoundland</option>
<option value="NM">New Mexico</option>
<option value="NS">Nova Scotia</option>
<option value="NT">Northwest Territories</option>
<option value="NU">Nunavut</option>
<option value="NV">Nevada</option>
<option value="NY">New York</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="ON">Ontario</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="PE">Prince Edward Island</option>
<option value="PR">Puerto Rico</option>
<option value="QC">Quebec</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="SK">Saskatchewan</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="UT">Utah</option>
<option value="VA">Virginia</option>
<option value="VI">Virgin Islands</option>
<option value="VT">Vermont</option>
<option value="WA">Washington</option>
<option value="WI">Wisconsin</option>
<option value="WV">West Virginia</option>
<option value="WY">Wyoming</option>
<option value="YT">Yukon</option>
</select>
</div>
<div class="cms_col_6">
<input type="text" id="Zip_Code" name="Zip_Code" placeholder="Zip/Postcode" value="" required/>
</div>
</div>
<input type="hidden" name="Payment_ShippingCountry" id="Payment_ShippingCountry" value="{{shoppingCartData.destinationCountry.name}}" />
<input type="text" disabled="disabled" name="PaymentShippingCountry" id="PaymentShippingCountry" value="{{shoppingCartData.destinationCountry.name}}" />
</div>
</div>
</fieldset>
<fieldset>
<h2 class="system_title align_left">Payment Type</h2>
<p>* Required Fields</p>
<div class="cms_row">
<div class="cms_col_6">
<div class="cms_fake_select">
<select id="Payment_Type" name="Payment_Type">
<option value="CreditCard" selected disabled="disabled">Credit Card</option>
</select>
</div>
</div>
<div class="cms_col_6">
{% component type:"payment_form_fields", formAlias:"{{this.alias}}" %}
{% if shoppingCartData.hasGiftVoucherProducts == true %}
<input type="text" name="Payment_GiftVoucher_ReceiverName" value="" required placeholder="Receiver Name" />
<input type="text" name="Payment_GiftVoucher_ReceiverEmail" value="" required placeholder="Receiver Email" />
<textarea name="Payment_GiftVoucher_ReceiverMessage" required placeholder="Receiver Message"></textarea>
{% endif %}
</div>
</div>
<div class="cms_row">
<div class="cms_col_12">
{% if request.request_data.is_mobile == 1 %}
<div class="captcha-holder">
<div class="g-recaptcha" data-size="compact" data-sitekey="6Lf2cGcUAAAAABbL4aDrclASNZx9S3uaI9EvpvlI"></div>
</div>
{% else %}
<div class="captcha-holder">
<div class="g-recaptcha" data-sitekey="6Lf2cGcUAAAAABbL4aDrclASNZx9S3uaI9EvpvlI"></div>
</div>
{% endif %}
</div>
</div>
<hr/>
<div class="cms_row">
<div class="cms_col_6">
<table class="cms_ecommerce_summary">
<tfoot>
<tr>
<td width="155">Order total</td>
<td style="text-align: left;">
<input class="payment_amount" type="hidden" id="Payment_Amount" name="Payment_Amount" value="{{shoppingCartData.totalPrice}}" />
{{shoppingCartData.totalPriceHtml}}
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<input type="submit" class="btn btn-primary" value="Checkout">
</fieldset>
</form>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#check-address').click(function(){
if(jQuery('input[name="check-address"]').is(':checked')){
jQuery('#Payment_ShippingAddress').val(jQuery('#Address').val());
jQuery('#Payment_ShippingCity').val(jQuery('#City').val());
jQuery('#Payment_ShippingState').val(jQuery('#State').val());
jQuery('#Zip_Code').val(jQuery('#ZipCode').val());
} else {
jQuery('#Payment_ShippingAddress').val("");
jQuery('#Payment_ShippingCity').val("");
jQuery('#Payment_ShippingState').val("");
jQuery('#Zip_Code').val("");
};
});
});
</script>