API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 22nd, 2015
126
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.71 KB | None | 0 0
raw download clone embed print report
  1. @model ABCWebShop.Front.ViewModels.ChargeViewModel
  2.  
  3. @{
  4. ViewBag.Title = "Cart";
  5. }
  6.  
  7.  
  8. @Styles.Render("~/Content/shop")
  9.  
  10. <!--=== Content Medium Part ===-->
  11. <div class="content-md margin-bottom-30">
  12. <div class="container">
  13.  
  14. @using (Html.BeginForm("Charge", "Shop", FormMethod.Post, new { @class = "form-horizontal shopping-cart", id = "payment-form" }))
  15. {
  16.  
  17. @Html.AntiForgeryToken()
  18. <div>
  19. <div class="header-tags">
  20. <div class="overflow-h">
  21. <h2>Production Cost</h2>
  22. <p>For your products</p>
  23. <i class="rounded-x fa fa-check"></i>
  24. </div>
  25. </div>
  26. <section style="background:#ececec; opacity:0.7;">
  27. <div class="table-responsive">
  28. <table class="table table-striped">
  29. <thead>
  30. <tr>
  31. <th>Product</th>
  32. <th>Size</th>
  33. <th>Qty</th>
  34. <th>Total Production Price</th>
  35. </tr>
  36. </thead>
  37. <tbody>
  38. @foreach (var cartitem in Model.CartItems)
  39. {
  40. <tr>
  41. <td class="product-in-table">
  42. @foreach (var image in cartitem.Product.Images)
  43. {
  44. if (image.MainImage)
  45. {
  46. <img class="img-responsive" src="https://abcwebshopstorage.blob.core.windows.net/images/@cartitem.Product.Id/@image.Source" alt="">
  47.  
  48. }
  49. }
  50. <div class="product-it-in">
  51. @cartitem.Product.Name
  52. </div>
  53. </td>
  54. @if (cartitem.Product.IsOneSizeProduct)
  55. {
  56. <td>One Size</td>}
  57. else
  58. {
  59. <td>@cartitem.Size</td> }
  60.  
  61. <td>
  62. <input type='text' class="quantity-field" name='@cartitem.Product.Id' value="@cartitem.Quantity" id='@cartitem.Id' />
  63. </td>
  64. <td>@cartitem.TotalAmount</td>
  65. </tr>
  66. @Html.HiddenFor(model => model.CartItems.Count, new { id = "cartItemse" })
  67. }
  68.  
  69.  
  70.  
  71. </tbody>
  72. </table>
  73. </div>
  74. </section>
  75.  
  76.  
  77. <div class="header-tags">
  78. <div class="overflow-h">
  79. <h2>Shipping address</h2>
  80. <p>Shipping and address info</p>
  81. <i class="rounded-x fa fa-home"></i>
  82. </div>
  83. </div>
  84. <section class="billing-info">
  85. <div class="row">
  86. <div class="col-md-6 md-margin-bottom-40">
  87. <h2 class="title-type">Billing Address</h2>
  88. <div class="billing-info-inputs checkbox-list">
  89. <div class="row">
  90. <div class="col-sm-6">
  91. @Html.TextBoxFor(model => model.Buyer.FirstName, new { @class = "form-control required", id = "buyerFirstname", placeholder = Html.DisplayNameFor(x => x.Buyer.FirstName) })
  92. @Html.TextBoxFor(model => model.Buyer.Email, new { @class = "form-control required", id = "buyerEmail", placeholder = Html.DisplayNameFor(x => x.Buyer.Email) })
  93. </div>
  94. <div class="col-sm-6">
  95. @Html.TextBoxFor(model => model.Buyer.LastName, new { @class = "form-control required", id = "buyerLastname", placeholder = Html.DisplayNameFor(x => x.Buyer.LastName) })
  96. @Html.TextBoxFor(model => model.Buyer.PhoneNumber, new { @class = "form-control required", id = "buyerPNumber", placeholder = Html.DisplayNameFor(x => x.Buyer.PhoneNumber) })
  97. </div>
  98. </div>
  99. @Html.TextBoxFor(model => model.Buyer.Address, new { @class = "form-control required", id = "buyerAdress", placeholder = Html.DisplayNameFor(x => x.Buyer.Address) })
  100. <div class="row">
  101. <div class="col-sm-6">
  102. @Html.TextBoxFor(model => model.Buyer.City, new { @class = "form-control required", id = "buyerCity", placeholder = Html.DisplayNameFor(x => x.Buyer.City) })
  103. </div>
  104. <div class="col-sm-6">
  105. @Html.TextBoxFor(model => model.Buyer.PostalCode, new { @class = "form-control required", id = "buyerPC", placeholder = Html.DisplayNameFor(x => x.Buyer.PostalCode) })
  106. </div>
  107. <div class="col-sm-6">
  108. @Html.TextBoxFor(model => model.Buyer.Country, new { @class = "form-control", placeholder = @Model.Country, disabled = "disabled" })
  109. </div>
  110. @*@{
  111. object displayMode = (Model.Country) ? null : new { disabled = "disabled" };
  112. @Html.TextBox("CompanyName", "", displayMode)
  113. }*@
  114. </div>
  115.  
  116. </div>
  117. </div>
  118.  
  119. </div>
  120. </section>
  121.  
  122. <div class="header-tags">
  123. <div class="overflow-h">
  124. <h2>Payment</h2>
  125. <p>Payment for production cost</p>
  126. <i class="rounded-x fa fa-credit-card"></i>
  127. </div>
  128. </div>
  129. <section>
  130. <div class="row">
  131. <!--<div class="col-md-6 md-margin-bottom-50">
  132.  
  133. <h2 class="title-type">Pay With Credit Card</h2>
  134.  
  135. <div class="accordion-v2">
  136. <div class="panel-group" id="accordion">
  137.  
  138. <div class="panel panel-default">
  139. <div class="panel-heading">
  140. <h4 class="panel-title">
  141. <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
  142. <i class="fa fa-credit-card"></i>
  143. Pay with Same Card
  144.  
  145. </a>
  146. </h4>
  147. </div>
  148. <div id="collapseOne" class="panel-collapse collapse in">
  149. <div class="content margin-left-10">
  150. <h4>Uncheck The Box To Pay With a different Card</h4>@Html.CheckBoxFor(model => model.SameCard, new { id = "checkbox-for-same-card", @checked = "checked" })
  151. </div>
  152. </div>
  153. </div>
  154. <div class="panel panel-default">
  155. <div class="panel-heading">
  156. <h4 class="panel-title">
  157. <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
  158. <i class="fa fa-credit-card"></i>
  159. Pay with different card
  160. </a>
  161. </h4>
  162. </div>
  163.  
  164. <div id="collapseTwo" class="panel-collapse collapse">
  165. <div class="panel-body cus-form-horizontal">
  166.  
  167. <div class="form-group">
  168. <label class="col-sm-4 no-col-space control-label">Card Number</label>
  169. <div class="col-sm-8">
  170. <input type="text" size="20" autocomplete="off" class="form-control" id="card_number" />
  171. </div>
  172. </div>
  173. <div class="form-group">
  174. <label class="col-sm-4 no-col-space control-label">Payment Types</label>
  175. <div class="col-sm-8">
  176. <ul class="list-inline payment-type">
  177. <li><i class="fa fa-cc-visa"></i></li>
  178. <li><i class="fa fa-cc-mastercard"></i></li>
  179. </ul>
  180. </div>
  181. </div>
  182. <div class="form-group">
  183. <label class="col-sm-4">Expiration Date(MMYY)</label>
  184. <div class="col-sm-8 input-small-field">
  185. <input type="text" size="4" id="card_exp_date" class="form-control" />
  186. </div>
  187. </div>
  188. <div class="form-group">
  189. <label class="col-sm-4 no-col-space control-label">CVC</label>
  190. <div class="col-sm-8 input-small-field">
  191. <input type="text" size="4" autocomplete="off" id="card_cvx" class="form-control" />
  192. <a href="#">What's this?</a>
  193. </div>
  194. </div>
  195.  
  196. </div>
  197. </div>
  198. </div>
  199.  
  200. </div>
  201. </div>
  202. </div>-->
  203.  
  204. <div class="col-md-6 md-margin-bottom-50">
  205.  
  206. <h2 class="title-type">Pay With Credit Card</h2>
  207.  
  208. <div class="accordion-v2">
  209. <div class="panel-group" id="accordion">
  210.  
  211. <div class="panel panel-default">
  212. <div class="panel-heading">
  213. <h4 class="panel-title">
  214. <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
  215. <i class="fa fa-credit-card"></i>
  216. Pay with Same Card
  217.  
  218. </a>
  219. </h4>
  220. </div>
  221. <div id="collapseOne" class="panel-collapse collapse in">
  222. <div class="panel-body cus-form-horizontal">
  223.  
  224. <div class="form-group">
  225. <label class="col-sm-4 no-col-space control-label">Card Number</label>
  226. <div class="col-sm-8">
  227. <input type="text" size="20" data-stripe="number" />
  228. </div>
  229. </div>
  230. <div class="form-group">
  231. <label class="col-sm-4 no-col-space control-label">Payment Types</label>
  232. <div class="col-sm-8">
  233. <ul class="list-inline payment-type">
  234. <li><i class="fa fa-cc-visa"></i></li>
  235. <li><i class="fa fa-cc-mastercard"></i></li>
  236. </ul>
  237. </div>
  238. </div>
  239. <div class="form-group">
  240. @*<label class="col-sm-4">Expiration Date(MMYY)</label>*@
  241. @*<div class="col-sm-8 input-small-field">
  242. <input type="text" size="4" id="card_exp_date" class="form-control" />
  243. </div>*@
  244. <div class="form-row">
  245. <label>
  246. <span>Expiration (MM/YYYY)</span>
  247. <input type="text" size="2" data-stripe="exp-month" />
  248. </label>
  249. <span> / </span>
  250. <input type="text" size="4" data-stripe="exp-year" />
  251. </div>
  252. </div>
  253. <div class="form-group">
  254. <label class="col-sm-4 no-col-space control-label">CVC</label>
  255. <div class="col-sm-8 input-small-field">
  256. <input type="text" size="4" data-stripe="cvc" />
  257. <a href="#">What's this?</a>
  258. </div>
  259. </div>
  260.  
  261. </div>
  262. </div>
  263.  
  264. </div>
  265.  
  266.  
  267. </div>
  268. </div>
  269. </div>
  270.  
  271. <div class="col-md-6">
  272. <h2 class="title-type">Frequently asked questions</h2>
  273. <!-- Accordion -->
  274. <div class="accordion-v2 plus-toggle">
  275. <div class="panel-group" id="accordion-v2">
  276. <div class="panel panel-default">
  277. <div class="panel-heading">
  278. <h4 class="panel-title">
  279. <a data-toggle="collapse" data-parent="#accordion-v2" href="#collapseOne-v2">
  280. What payments methods can I use?
  281. </a>
  282. </h4>
  283. </div>
  284. <div id="collapseOne-v2" class="panel-collapse collapse in">
  285. <div class="panel-body">
  286. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit, felis vel tincidunt sodales, urna metus rutrum leo, sit amet finibus velit ante nec lacus. Cras erat nunc, pulvinar nec leo at, rhoncus elementum orci. Nullam ut sapien ultricies, gravida ante ut, ultrices nunc.
  287. </div>
  288. </div>
  289. </div>
  290. <div class="panel panel-default">
  291. <div class="panel-heading">
  292. <h4 class="panel-title">
  293. <a data-toggle="collapse" data-parent="#accordion-v2" href="#collapseTwo-v2">
  294. Can I use gift card to pay for my purchase?
  295. </a>
  296. </h4>
  297. </div>
  298. <div id="collapseTwo-v2" class="panel-collapse collapse">
  299. <div class="panel-body">
  300. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit, felis vel tincidunt sodales, urna metus rutrum leo, sit amet finibus velit ante nec lacus. Cras erat nunc, pulvinar nec leo at, rhoncus elementum orci. Nullam ut sapien ultricies, gravida ante ut, ultrices nunc.
  301. </div>
  302. </div>
  303. </div>
  304. <div class="panel panel-default">
  305. <div class="panel-heading">
  306. <h4 class="panel-title">
  307. <a data-toggle="collapse" data-parent="#accordion-v2" href="#collapseThree-v2">
  308. Will I be charged when I place my order?
  309. </a>
  310. </h4>
  311. </div>
  312. <div id="collapseThree-v2" class="panel-collapse collapse">
  313. <div class="panel-body">
  314. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit, felis vel tincidunt sodales, urna metus rutrum leo, sit amet finibus velit ante nec lacus. Cras erat nunc, pulvinar nec leo at, rhoncus elementum orci. Nullam ut sapien ultricies, gravida ante ut, ultrices nunc.
  315. </div>
  316. </div>
  317. </div>
  318. <div class="panel panel-default">
  319. <div class="panel-heading">
  320. <h4 class="panel-title">
  321. <a data-toggle="collapse" data-parent="#accordion-v2" href="#collapseFour-v2">
  322. How long will it take to get my order?
  323. </a>
  324. </h4>
  325. </div>
  326. <div id="collapseFour-v2" class="panel-collapse collapse">
  327. <div class="panel-body">
  328. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit, felis vel tincidunt sodales, urna metus rutrum leo, sit amet finibus velit ante nec lacus. Cras erat nunc, pulvinar nec leo at, rhoncus elementum orci. Nullam ut sapien ultricies, gravida ante ut, ultrices nunc.
  329. </div>
  330. </div>
  331. </div>
  332. </div>
  333. </div>
  334. <!-- End Accordion -->
  335. </div>
  336. </div>
  337.  
  338. </section>
  339. <div class="text-aligncenter spin-checkout-spinners">
  340. <i class="fa fa-spinner fa-spin text-aligncenter"></i>
  341. </div>
  342. <div class="coupon-code">
  343. <div class="row">
  344. <div class="col-sm-4 sm-margin-bottom-30">
  345.  
  346. </div>
  347. <div class="col-sm-3 col-sm-offset-5">
  348. <ul class="list-inline total-result">
  349. <li>
  350. <h4>Subtotal:</h4>
  351. <div class="total-result-in">
  352. <span>@Model.ProdPrice</span>
  353. </div>
  354. </li>
  355. <li>
  356. <h4>Shipping:</h4>
  357. <div class="total-result-in">
  358. <span class="text-right shippingcost">@Model.ShippingCost</span>
  359. </div>
  360. </li>
  361. <li class="divider"></li>
  362. <li class="total-price">
  363. <h4>Total:</h4>
  364. <div class="total-result-in">
  365. <span class="total-price-after-ship">@Model.Amount</span>
  366. </div>
  367. </li>
  368. </ul>
  369. </div>
  370. </div>
  371. </div>
  372.  
  373. </div>
  374.  
  375. @Html.HiddenFor(model => model.Amount)
  376. @Html.HiddenFor(model => model.ProdPrice)
  377. @Html.HiddenFor(model => model.ShippingCost)
  378. @Html.HiddenFor(model => model.Country)
  379. @Html.HiddenFor(model => model.UserId)
  380. @*@Html.HiddenFor(model => model.CardId)*@
  381. @*<input type="hidden" id="baseUrl" value="@Model.CardRegistrationURL" />
  382. <input type="hidden" id="preRegData" value="@Model.PreregistrationData" />
  383. <input type="hidden" id="accessData" value="@Model.AccessKey" />*@
  384. @Html.HiddenFor(model => model.UserId)
  385. @Html.HiddenFor(model => model.stripeToken)
  386. <input type="hidden" id="Id" value="@Model.Id" />
  387. @*@Html.HiddenFor(model => model.CardId)*@
  388. <input type="submit" value="submit" />
  389.  
  390. }
  391.  
  392. </div>
  393. <!--/end container-->
  394. </div>
  395.  
  396.  
  397.  
  398.  
  399. @section Scripts {
  400.  
  401. <script>
  402. jQuery(document).ready(function () {
  403. App.init();
  404. StepWizard.initStepWizard();
  405. });
  406. </script>
  407. <scripy src="/Scripts/WebShop/shippingScript.js"></scripy>
  408. <script type="text/javascript" src="https://js.stripe.com/v2/"></script>
  409.  
  410. <script>
  411.  
  412. Stripe.setPublishableKey('pk_test_OVbNmiAHdx783y2B1P6noWLi');
  413.  
  414. jQuery(function ($) {
  415. $('#payment-form').submit(function (event) {
  416. var $form = $(this);
  417.  
  418. // Disable the submit button to prevent repeated clicks
  419. $form.find('button').prop('disabled', true);
  420.  
  421. Stripe.card.createToken($form, stripeResponseHandler);
  422.  
  423. // Prevent the form from submitting with the default action
  424. return false;
  425. });
  426. });
  427.  
  428. function stripeResponseHandler(status, response) {
  429. var $form = $('#payment-form');
  430.  
  431. if (response.error) {
  432. // Show the errors on the form
  433. $form.find('.payment-errors').text(response.error.message);
  434. $form.find('button').prop('disabled', false);
  435. } else {
  436. // response contains id and card, which contains additional card details
  437. var token = response.id;
  438. // Insert the token into the form so it gets submitted to the server
  439. $form.append($('<input type="hidden" name="stripeToken" />').val(token));
  440. // and submit
  441. $form.get(0).submit();
  442. }
  443. };
  444. </script>
  445. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!