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} × {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}