I'm attempting to integrate the Strip payment gateway with Exp:resso Store and I'm getting this error after removing the error_handling=”inline” per the Checkout Tag documentation:
The form you submitted contained the following errors
- The XML document is well formed but the document is not valid
I have tried numerous variations to the Checkout tag contents in the Store_example/checkout3 template based on Exp:resso and Store documentation, but nothing has moved me past this error. I'm not sure what to look for.
Here's the code I pasted into the header. I replaced YOUR_PUBLISHABLE_KEY with the publishable test key from Stripe.
<script type="text/javascript">
$(document).ready(function() {
$.getScript('https://js.stripe.com/v1/', function() {
Stripe.setPublishableKey('pk_test_QcxvwbfdYTdR3z5vUD1Tq27k');
});
/* Ensure your checkout submit button has id="checkout_submit" */
$("#checkout_submit").click(function() {
/* Only handle requests for Stripe gateway */
if (this.form.elements["payment_method"].value == "stripe") {
/* Temporarily disable the checkout submit button */
$("#checkout_submit").attr('disabled', true);
/* Create a Stripe card token */
Stripe.createToken({
name: $("#payment_name").val(),
number: $("#payment_card_no").val(),
cvc: $("#payment_card_csc").val(),
exp_month: $("#payment_exp_month").val(),
exp_year: $("#payment_exp_year").val()
}, stripeResponseHandler);
/* We don't want to submit the form yet */
return false;
}
});
/* This function is triggered once Stripe has generated the token */
function stripeResponseHandler(status, response) {
/* Re-enable the checkout submit button */
$("#checkout_submit").attr('disabled', false);
/* Check whether we have a valid credit card */
if (response.error) {
alert(response.error.message);
} else {
/* Set the card token and submit the checkout form */
$("#payment_token").val(response['id']);
$("#checkout_submit").unbind("click").click();
}
}
});
</script>
Below is the relevant body code. Some of it is from the Exp:resso Store documentation, some of it is from the Stripe documentation.
{exp:store:checkout
payment_method="stripe"
form_class="form-horizontal"
return="store_example/order/ORDER_HASH"
error_delimiters='<span class="help-inline">|</span>'}
{if no_items}
{redirect="store_example/checkout"}
{/if}
<div class="row">
<div class="span8">
<!-- Billing and Shipping degails removed from pasted code -->
<fieldset>
<legend>Payment</legend>
{if error:payment_method}
<div class="control-group">
<div class="alert alert-error">{error:payment_method}</div>
</div>
{/if}
<form action="" method="POST" id="payment-form">
<span class="payment-errors"></span>
<div class="form-row">
<label>
<span>Card Number</span>
<input type="text" id="payment_card_no" value="" />
</label>
</div>
<div class="form-row">
<label>
<span>Name on Card</span>
<input type="text" id="payment_name" value="" />
</label>
</div>
<div class="form-row">
<label>
<span>CVC</span>
<input type="text" id="payment_card_csc" size="4" value="" />
</label>
</div>
<div class="form-row">
<label>
<span>Expiration (MM/YYYY)</span>
<select id="payment_exp_month">
<option value=""></option>
{exp_month_options}
</select>
</label>
<span> / </span>
<select id="payment_exp_year" name="payment[exp_year]">
<option value=""></option>
{exp_year_options}
</select>
</div>
<div class="form-actions">
<a href="{path='store_example/checkout2'}" class="btn">Back</a>
<input type="submit" name="submit" value="Place Order" id="checkout_submit" class="btn btn-success" />
<input type="hidden" id="payment_token" name="payment[token]" value="" />
</div>
</form>
</fieldset>
</div>
<!-- Order Summary removed from pasted code -->
</div>
{/exp:store:checkout}
{exp:store:checkout}
tag pair creates an opening and closing<form>
elements so you will not want to have those in your template as you are not able to nest<form>
elements