Advertisement
Guest User

Untitled

a guest
Apr 1st, 2013
1,333
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.55 KB | None | 0 0
  1. {if logged_in_member_id == 0 AND get:guest != 'y'}
  2.     {redirect="cart/account"}
  3. {/if}
  4.  
  5. {embed="layouts/master"}
  6.  
  7. {exp:stash:set_list name="page_content" save="no"}
  8.  
  9.     {stash:class_wrapper}checkout-payment-page{/stash:class_wrapper}
  10.     {stash:class_first_row}checkout-payment-top{/stash:class_first_row}
  11.  
  12.     {stash:content_body}
  13.  
  14.         {exp:store:checkout
  15.             next="cart/confirmation"
  16.             return="cart/confirmation"
  17.             form_class="lj-form lj-same-addresses"
  18.             require="name|address1|region|country|postcode|payment"
  19.             payment_method="stripe"}
  20.             {!-- normally inline errors would be on --}
  21.             {if field_errors:count}
  22.                 <div class="form-error-section grid-row h-list">
  23.                     <div class="error-icon"></div>
  24.                     <div class="error-message clearfix">
  25.                         <strong>The following errors were encountered:</strong>
  26.                         <ul class="error-fields clearfix">
  27.                             {field_errors}
  28.                                 {error}
  29.                             {/field_errors}
  30.                         </ul>
  31.                     </div>
  32.                 </div>
  33.             {/if}
  34.  
  35.             <div class="grid-row">
  36.  
  37.                 <div class="grid-col size2of6">
  38.                     <h3 class="page-flavor-title">CHECKOUT</h3>
  39.                 </div>
  40.                    
  41.                 <div class="grid-col size2of6">
  42.                     <label for="checkout-po-number" class="po-label">Add an optional PO# for your records:</label>
  43.                 </div>
  44.                    
  45.                 <div class="grid-col size2of6">
  46.                     <input type="text" class="size2of6 po-input" id="checkout-po-number" name="order_custom1" />
  47.                 </div>
  48.                
  49.             </div>
  50.  
  51.             <div class="grid-row">
  52.                    
  53.                 <h4 class="form-section-title form-section-payment-title">PAYMENT INFORMATION</h4>
  54.                 <div class="grid-row">
  55.                     <ul class="grid-col size2of6 h-list credit-card-list">
  56.                         <li class="credit-card visa active">Visa</li>
  57.                         <li class="credit-card mastercard">Mastercard</li>
  58.                         <li class="credit-card amex">American Express</li>
  59.                         <li class="credit-card discover">Discover</li>
  60.                         <li class="credit-card paypal">PayPal</li>
  61.                     </ul>
  62.                     <div class="grid-col size2of6">
  63.                         <label for="checkout-cctype" class="lj-form-label">payment type</label>
  64.                         <div class="cfe-container">
  65.                             <select class="size2of6 cfe-styled" id="checkout-cctype" name="payment[card_type]">
  66.                                 <option value="visa">Visa</option>
  67.                                 <option value="mastercard">MasterCard</option>
  68.                                 <option value="amex">American Express</option>
  69.                                 <option value="discover">Discover</option>
  70.                                 <option value="paypal">PayPal</option>
  71.                             </select>
  72.                         </div>
  73.                     </div>
  74.                     <div class="grid-col size2of6">
  75.                         <label for="checkout-ccnumber" class="lj-form-label">Credit card number<span class="input-required"> *</span></label>
  76.                         <input type="text" class="size2of6" id="checkout-ccnumber"  maxlength="20" />
  77.                     </div>
  78.                 </div>
  79.                 <div class="grid-row">
  80.                     <div class="grid-col size2of6">
  81.                         <label for="checkout-cvv" class="lj-form-label">cvv<span class="input-required"> *</span></label>
  82.                         <input type="text" class="size2of6" id="checkout-cvv" />
  83.                     </div>
  84.                     <div class="grid-col size2of6">
  85.                         <label for="checkout-expire-month" class="lj-form-label">expiration date<span class="input-required"> *</span></label>
  86.                         <div class="cfe-container">
  87.                             <select class="size2of6 cfe-styled" id="checkout-expire-month">
  88.                                 <option value="">MONTH</option>
  89.                                 {exp_month_options}
  90.                             </select>
  91.                         </div>
  92.                     </div>
  93.                     <div class="grid-col size2of6">
  94.                         <label for="checkout-expire-year" class="lj-form-label">&nbsp;</label>
  95.                         <div class="cfe-container">
  96.                             <select class="size2of6 cfe-styled" id="checkout-expire-year">
  97.                                 <option value="">YEAR</option>
  98.                                 {exp_year_options}
  99.                             </select>
  100.                         </div>
  101.                     </div>
  102.                 </div>
  103.             </div>
  104.            
  105.             <input type="hidden" id="checkout-payment-token" name="payment[token]" />
  106.            
  107.             {!-- This snippet is also used in the Account page, but we need
  108.             to show fields only applicable to the checkout process --}
  109.             {preload_replace:pre:is_checkout='y'}
  110.             {!-- Defaults to member_, remove it on the checkout page --}
  111.             {preload_replace:pre:field_prefix=''}
  112.  
  113.             {snippet:global_billing_shipping}
  114.            
  115.             <div class="grid-row">
  116.                
  117.                 <h4 class="form-section-title">ORDER SUMMARY</h4>
  118.                 <div class="grid-rowt">
  119.                     {exp:store:cart}
  120.                         <table class="grid-col size2of6 checkout-table">
  121.                             <tbody class="checkout-table-body">
  122.                                 <tr>
  123.                                     <th>Items</th>
  124.                                     <td>{order_qty} ITEM{if order_qty > 1}S{/if}</td>
  125.                                 </tr>
  126.                                 <tr>
  127.                                     <th>Shipping</th>
  128.                                     <td>{order_shipping}</td>
  129.                                 </tr>
  130.                             </tbody>
  131.                         </table>
  132.                         <table class="grid-col size2of6 checkout-table">
  133.                             <tbody class="checkout-table-body">
  134.                                 <tr>
  135.                                     <th>Subtotal</th>
  136.                                     <td>{order_subtotal}</td>
  137.                                 </tr>
  138.                                 <tr>
  139.                                     <th>Tax</th>
  140.                                     <td>{order_subtotal_tax}</td>
  141.                                 </tr>
  142.                             </tbody>
  143.                         </table>
  144.                         <table class="grid-col size2of6 checkout-table">
  145.                             <tbody class="checkout-total">
  146.                                 <tr>
  147.                                     <th>TOTAL:</th>
  148.                                     <td>{exp:letter_jacket:format price="{order_total}" prefix="<sup>$</sup>"}</td>
  149.                                 </tr>
  150.                             </tbody>
  151.                         </table>
  152.                     {/exp:store:cart}
  153.                 </div>
  154.                
  155.             </div>
  156.            
  157.             <div class="grid-row size3of6 prefix3of6">
  158.                 <button type="submit" name="submit" class="btn complete-order size3of6" value="Complete Order">Complete Order & Submit Payment</strong></button>
  159.                <a href="{path='cart'}" class="btn-other-options size3of6">Cancel</a>
  160.            </div>
  161.    
  162.            <script>
  163.            $(document).ready(function() {
  164.              $.getScript('https://js.stripe.com/v1/', function() {
  165.                Stripe.setPublishableKey('pk_test_d7BBfwNpyBhTRx5QOkFsGGIX');
  166.               });
  167.            
  168.               $(".complete-order").click(function() {
  169.               /* Temporarily disable the checkout submit button */
  170.               $(".complete-order").attr('disabled', true);
  171.              
  172.               /* Create a Stripe card token */
  173.               Stripe.createToken({
  174.                 name: $("#checkout-cc-name").val(),
  175.                 number: $("#checkout-ccnumber").val(),
  176.                 cvc: $("#checkout-cvv").val(),
  177.                 exp_month: $("#checkout-expire-month").val(),
  178.                 exp_year: $("#checkout-expire-year").val()
  179.               }, stripeResponseHandler);
  180.        
  181.               /* We don't want to submit the form yet */
  182.               return false;
  183.               });
  184.            
  185.               /* This function is triggered once Stripe has generated the token */
  186.               function stripeResponseHandler(status, response) {
  187.                 /* Re-enable the checkout submit button */
  188.                 $(".complete-order").attr('disabled', false);
  189.            
  190.                 /* Check whether we have a valid credit card */
  191.                 if (response.error) {
  192.                   alert(response.error.message);
  193.                 } else {
  194.                   /* Set the card token and submit the checkout form */
  195.                   $("#checkout-payment-token").val(response['id']);
  196.                   $(".complete-order").unbind("click").click();
  197.                 }
  198.               }
  199.             });
  200.             </script>
  201.  
  202.         {/exp:store:checkout}
  203.  
  204.     {/stash:content_body}
  205.  
  206. {/exp:stash:set_list}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement