1

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}
  • Are you following the Expresso Store Stripe documentation? If so, post your template/javascript code. – Adrian Macneil Jun 14 '13 at 9:25
  • I pasted the code into my original post. Thanks for the suggestion, Adrian. – Sean O'Brien Jun 14 '13 at 16:41
  • The error I'm seeing is from my local setup. I just updated the staging server and see the error, "Invalid API Key provided". This seems like an easier problem to solve. – Sean O'Brien Jun 14 '13 at 16:55
  • The staging/dev server does not yet have HTTPS authentication. Stripe documentation says "All API requests must be made over HTTPS. Calls made over plain HTTP will fail. You must authenticate for all requests." Looks like it's pointless to troubleshoot before getting an SSL certificate. – Sean O'Brien Jun 14 '13 at 17:37
  • Also to note is that the {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 – Justin Long Jun 14 '13 at 21:24
1

While this error looks somewhat generic, in this case the cause appears to have been a lack of secure connection (HTTPS) or/and some limitation from running on a local environment.

Now that I've got the site on a staging server with an SSL certificate, this error no longer appears.


Days later this error appeared again after I added shipping options. Apparently, because I had not yet entered the API to connect to UPS and generate a price, the form was incomplete and EE/Store generated the XML not valid error.

  • Glad you got it figured out. You can always setup a self-signed certificate for local development to mimic the staging and production environments. – Ian Jun 15 '13 at 11:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.