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}
