1

I can't get Store working with Stripe 1.6.5. I keep getting the Token is Required messages. Can anyone see why this is happening?

Here is code in head tag:


$(function() {
    $.getScript('https://js.stripe.com/v1/', function() {
        Stripe.setPublishableKey('pk_live_XXXXXXXX');
    });

  /* 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();
    }
  }
});

Here is the actual HTML

{exp:store:checkout
    form_class="form-horizontal"
    return="store/order/ORDER_HASH"
    error_handling="inline"
    payment_method="stripe"
    error_delimiters='|'}
{if no_items}
    {redirect="store/checkout"}
{/if}

<div class="row">
    <div class="span8">

        <div class="row-store">
            <div class="span4">
                <fieldset>
                    <legend>Billing Details</legend>
                    <div class="control-group">
                        <div><b>{billing_name}</b></div>
                        <div>{billing_address1}</div>
                        <div>{billing_address2}</div>
                        <div>{billing_address3} {billing_postcode}</div>
                        <div>{billing_region_name}</div>
                        <div>{billing_country_name}</div>
                        <div>{billing_phone}</div>
                        <div>{order_email}</div>
                    </div>
                </fieldset>
            </div>
            <div class="span4">
                <fieldset>
                    <legend>Shipping Details</legend>
                    <div class="control-group">
                        {if shipping_same_as_billing}
                            Same as Billing Details
                        {if:else}
                            <div><b>{shipping_name}</b></div>
                            <div>{shipping_address1}</div>
                            <div>{shipping_address2}</div>
                            <div>{shipping_address3} {shipping_postcode}</div>
                            <div>{shipping_region_name}</div>
                            <div>{shipping_country_name}</div>
                            <div>{shipping_phone}</div>
                        {/if}
                    </div>
                </fieldset>
            </div>
        </div>
        <fieldset>
            <legend>Payment</legend>

            {if error:payment_method}
                <div class="control-group">
                    <div class="alert alert-error">{error:payment_method}</div>
                </div>
            {/if}

            <div class="control-group">
                <label class="control-label" for="payment_method">Payment Method</label>
                <div class="controls">
                    <select id="payment_method" name="payment_method">
                        {payment_method_options}
                    </select>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="payment_card_no">Card No</label>
                <div class="controls">
                    <input type="text" id="payment_card_no" value="" />
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="payment_name">Name</label>
                <div class="controls">
                    <input type="text" id="payment_name" value="" />
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="payment_exp_month">Expiry</label>
                <div class="controls">
                    <select id="payment_exp_month" style="width:auto">
                        <option value=""></option>
                        {exp_month_options}
                    </select>
                    <select id="payment_exp_year" style="width:auto">
                        <option value=""></option>
                        {exp_year_options}
                    </select>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="payment_csc">CSC</label>
                <div class="controls">
                    <input type="text" id="payment_card_csc" value="" class="input-mini" />
                </div>
            </div>

        </fieldset>
    </div>

    <div class="span4"><div class="well">
        <fieldset>
            <legend>Order Summary</legend>

            <table class="table table-condensed">
                <thead>
                    <tr>
                        <th style="width:60%">Product</th>
                        <th style="text-align:right">Total</th>
                    </tr>
                </thead>
                <tbody>
                    {items}
                        <tr>
                            <td>{item_qty} &times; {title}</td>
                            <td style="text-align:right">{item_subtotal}</td>
                        </tr>
                    {/items}
                    <tr>
                        <th>Subtotal</th>
                        <th style="text-align:right">{order_subtotal}</th>
                    </tr>
                    {if shipping_method_id}
                        <tr>
                            <td>Shipping ({shipping_method})</td>
                            <td style="text-align:right">{order_shipping}</td>
                        </tr>
                    {/if}
                    {if order_tax_val}
                        <tr>
                            <td>{tax_name} ({tax_percent}%)</td>
                            <td style="text-align:right">{order_tax}</td>
                        </tr>
                    {/if}
                    <tr>
                        <th>Total</th>
                        <th style="text-align:right">{order_total}</th>
                    </tr>
                </tbody>
            </table>
        </fieldset>
    </div></div>
</div>

<div class="form-actions">
    <a href="{path='store/checkout2'}" class="btn">Back</a>
    <input type="hidden" id="payment_token" name="payment[token]" value="" />
    <input type="submit" name="submit" id="checkout_submit" value="Place Order" class="btn btn-success" />
</div>
{/exp:store:checkout}
3
  • Hi there - Stack Exchange is a community platform, it's not specific to Expresso (so no one can log in to your website, though we will follow up your email separately) Oct 29, 2013 at 10:44
  • Have you checked whether the token field is actually getting submitted in the POST request to Store? You can see this in the Chrome or Firebug network tab. Oct 29, 2013 at 10:46
  • It does not appear to be posting the token. I have no idea why. Oct 29, 2013 at 13:52

2 Answers 2

1

Per our email discussion, the actual problem was that jQuery was not loaded, and there were JS errors in the error console because $ was not defined.

So for anyone else having this problem, it's worth checking your error console and make sure that the javascript is working as expected.

1

Are you using your publishable key here? This is specific to your stripe account.

Stripe.setPublishableKey('pk_live_XXXXXXXX');
2
  • I am using our LIVE key. I just hid it in the post. All is working other than the token is not being created. I can't figure out why. Oct 28, 2013 at 21:08
  • just keeps saying "The Token field is required." Oct 28, 2013 at 21:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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