Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- {if logged_in_member_id == 0 AND get:guest != 'y'}
- {redirect="cart/account"}
- {/if}
- {embed="layouts/master"}
- {exp:stash:set_list name="page_content" save="no"}
- {stash:class_wrapper}checkout-payment-page{/stash:class_wrapper}
- {stash:class_first_row}checkout-payment-top{/stash:class_first_row}
- {stash:content_body}
- {exp:store:checkout
- next="cart/confirmation"
- return="cart/confirmation"
- form_class="lj-form lj-same-addresses"
- require="name|address1|region|country|postcode|payment"
- payment_method="stripe"}
- {!-- normally inline errors would be on --}
- {if field_errors:count}
- <div class="form-error-section grid-row h-list">
- <div class="error-icon"></div>
- <div class="error-message clearfix">
- <strong>The following errors were encountered:</strong>
- <ul class="error-fields clearfix">
- {field_errors}
- {error}
- {/field_errors}
- </ul>
- </div>
- </div>
- {/if}
- <div class="grid-row">
- <div class="grid-col size2of6">
- <h3 class="page-flavor-title">CHECKOUT</h3>
- </div>
- <div class="grid-col size2of6">
- <label for="checkout-po-number" class="po-label">Add an optional PO# for your records:</label>
- </div>
- <div class="grid-col size2of6">
- <input type="text" class="size2of6 po-input" id="checkout-po-number" name="order_custom1" />
- </div>
- </div>
- <div class="grid-row">
- <h4 class="form-section-title form-section-payment-title">PAYMENT INFORMATION</h4>
- <div class="grid-row">
- <ul class="grid-col size2of6 h-list credit-card-list">
- <li class="credit-card visa active">Visa</li>
- <li class="credit-card mastercard">Mastercard</li>
- <li class="credit-card amex">American Express</li>
- <li class="credit-card discover">Discover</li>
- <li class="credit-card paypal">PayPal</li>
- </ul>
- <div class="grid-col size2of6">
- <label for="checkout-cctype" class="lj-form-label">payment type</label>
- <div class="cfe-container">
- <select class="size2of6 cfe-styled" id="checkout-cctype" name="payment[card_type]">
- <option value="visa">Visa</option>
- <option value="mastercard">MasterCard</option>
- <option value="amex">American Express</option>
- <option value="discover">Discover</option>
- <option value="paypal">PayPal</option>
- </select>
- </div>
- </div>
- <div class="grid-col size2of6">
- <label for="checkout-ccnumber" class="lj-form-label">Credit card number<span class="input-required"> *</span></label>
- <input type="text" class="size2of6" id="checkout-ccnumber" maxlength="20" />
- </div>
- </div>
- <div class="grid-row">
- <div class="grid-col size2of6">
- <label for="checkout-cvv" class="lj-form-label">cvv<span class="input-required"> *</span></label>
- <input type="text" class="size2of6" id="checkout-cvv" />
- </div>
- <div class="grid-col size2of6">
- <label for="checkout-expire-month" class="lj-form-label">expiration date<span class="input-required"> *</span></label>
- <div class="cfe-container">
- <select class="size2of6 cfe-styled" id="checkout-expire-month">
- <option value="">MONTH</option>
- {exp_month_options}
- </select>
- </div>
- </div>
- <div class="grid-col size2of6">
- <label for="checkout-expire-year" class="lj-form-label"> </label>
- <div class="cfe-container">
- <select class="size2of6 cfe-styled" id="checkout-expire-year">
- <option value="">YEAR</option>
- {exp_year_options}
- </select>
- </div>
- </div>
- </div>
- </div>
- <input type="hidden" id="checkout-payment-token" name="payment[token]" />
- {!-- This snippet is also used in the Account page, but we need
- to show fields only applicable to the checkout process --}
- {preload_replace:pre:is_checkout='y'}
- {!-- Defaults to member_, remove it on the checkout page --}
- {preload_replace:pre:field_prefix=''}
- {snippet:global_billing_shipping}
- <div class="grid-row">
- <h4 class="form-section-title">ORDER SUMMARY</h4>
- <div class="grid-rowt">
- {exp:store:cart}
- <table class="grid-col size2of6 checkout-table">
- <tbody class="checkout-table-body">
- <tr>
- <th>Items</th>
- <td>{order_qty} ITEM{if order_qty > 1}S{/if}</td>
- </tr>
- <tr>
- <th>Shipping</th>
- <td>{order_shipping}</td>
- </tr>
- </tbody>
- </table>
- <table class="grid-col size2of6 checkout-table">
- <tbody class="checkout-table-body">
- <tr>
- <th>Subtotal</th>
- <td>{order_subtotal}</td>
- </tr>
- <tr>
- <th>Tax</th>
- <td>{order_subtotal_tax}</td>
- </tr>
- </tbody>
- </table>
- <table class="grid-col size2of6 checkout-table">
- <tbody class="checkout-total">
- <tr>
- <th>TOTAL:</th>
- <td>{exp:letter_jacket:format price="{order_total}" prefix="<sup>$</sup>"}</td>
- </tr>
- </tbody>
- </table>
- {/exp:store:cart}
- </div>
- </div>
- <div class="grid-row size3of6 prefix3of6">
- <button type="submit" name="submit" class="btn complete-order size3of6" value="Complete Order">Complete Order & Submit Payment</strong></button>
- <a href="{path='cart'}" class="btn-other-options size3of6">Cancel</a>
- </div>
- <script>
- $(document).ready(function() {
- $.getScript('https://js.stripe.com/v1/', function() {
- Stripe.setPublishableKey('pk_test_d7BBfwNpyBhTRx5QOkFsGGIX');
- });
- $(".complete-order").click(function() {
- /* Temporarily disable the checkout submit button */
- $(".complete-order").attr('disabled', true);
- /* Create a Stripe card token */
- Stripe.createToken({
- name: $("#checkout-cc-name").val(),
- number: $("#checkout-ccnumber").val(),
- cvc: $("#checkout-cvv").val(),
- exp_month: $("#checkout-expire-month").val(),
- exp_year: $("#checkout-expire-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 */
- $(".complete-order").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 */
- $("#checkout-payment-token").val(response['id']);
- $(".complete-order").unbind("click").click();
- }
- }
- });
- </script>
- {/exp:store:checkout}
- {/stash:content_body}
- {/exp:stash:set_list}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement