'+a.addText+" "),m=b.find("tr:last a")):(d.filter(":last").after('"),m=d.filter(":last").next().find("a")));m.click(function(b){b.preventDefault();b=c("#"+a.prefix+"-empty");
3 | var f=b.clone(!0);f.removeClass(a.emptyCssClass).addClass(a.formCssClass).attr("id",a.prefix+"-"+l);f.is("tr")?f.children(":last").append('"):f.is("ul")||f.is("ol")?f.append(''+a.deleteText+" '+a.deleteText+" 0) {
26 | values.push(field.val());
27 | }
28 | });
29 | prepopulatedField.val(URLify(values.join(' '), maxLength, allowUnicode));
30 | };
31 |
32 | prepopulatedField.data('_changed', false);
33 | prepopulatedField.change(function() {
34 | prepopulatedField.data('_changed', true);
35 | });
36 |
37 | if (!prepopulatedField.val()) {
38 | $(dependencies.join(',')).keyup(populate).change(populate).focus(populate);
39 | }
40 | });
41 | };
42 | })(django.jQuery);
43 |
--------------------------------------------------------------------------------
/static/admin/js/prepopulate.min.js:
--------------------------------------------------------------------------------
1 | (function(c){c.fn.prepopulate=function(e,f,g){return this.each(function(){var a=c(this),b=function(){if(!a.data("_changed")){var b=[];c.each(e,function(a,d){d=c(d);0.
31 | card.mount('#card-element');
32 |
33 | // Handle real-time validation errors from the card Element.
34 | card.addEventListener('change', function(event) {
35 | var displayError = document.getElementById('card-errors');
36 | if (event.error) {
37 | displayError.textContent = event.error.message;
38 | } else {
39 | displayError.textContent = '';
40 | }
41 | });
42 |
43 | // Handle form submission.
44 | var form = document.getElementById('payment-form');
45 | form.addEventListener('submit', function(event) {
46 | event.preventDefault();
47 |
48 | stripe.createToken(card).then(function(result) {
49 | if (result.error) {
50 | // Inform the user if there was an error.
51 | var errorElement = document.getElementById('card-errors');
52 | errorElement.textContent = result.error.message;
53 | } else {
54 | // Send the token to your server.
55 | stripeTokenHandler(result.token);
56 | }
57 | });
58 |
59 | });
60 |
61 | var successElement = document.getElementById('stripe-token-handler');
62 | document.querySelector('.wrapper').addEventListener('click', function() {
63 | successElement.className = 'is-hidden';
64 | });
65 |
66 | function stripeTokenHandler(token) {
67 | successElement.className = '';
68 | successElement.querySelector('.token').textContent = token.id;
69 | // Insert the token ID into the form so it gets submitted to the server
70 | var form = document.getElementById('payment-form');
71 | var hiddenInput = document.createElement('input');
72 | hiddenInput.setAttribute('type', 'hidden');
73 | hiddenInput.setAttribute('name', 'stripeToken');
74 | hiddenInput.setAttribute('value', token.id);
75 | form.appendChild(hiddenInput);
76 |
77 | // Submit the form
78 | form.submit();
79 | }
80 |
81 |
82 |
83 |
84 |
85 |
86 |
--------------------------------------------------------------------------------
/static_root/css/checkout.css:
--------------------------------------------------------------------------------
1 | body, html {
2 | height: 100%;
3 | background-color: #f7f8f9;
4 | color: #6b7c93;
5 | }
6 |
7 | *, label {
8 | font-family: "Helvetica Neue", Helvetica, sans-serif;
9 | font-size: 16px;
10 | font-variant: normal;
11 | padding: 0;
12 | margin: 0;
13 | -webkit-font-smoothing: antialiased;
14 | }
15 |
16 | button {
17 | border: none;
18 | border-radius: 4px;
19 | outline: none;
20 | text-decoration: none;
21 | color: #fff;
22 | background: #32325d;
23 | white-space: nowrap;
24 | display: inline-block;
25 | height: 40px;
26 | line-height: 40px;
27 | padding: 0 14px;
28 | box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
29 | border-radius: 4px;
30 | font-size: 15px;
31 | font-weight: 600;
32 | letter-spacing: 0.025em;
33 | text-decoration: none;
34 | -webkit-transition: all 150ms ease;
35 | transition: all 150ms ease;
36 | float: left;
37 | margin-left: 12px;
38 | margin-top: 28px;
39 | }
40 |
41 | button:hover {
42 | transform: translateY(-1px);
43 | box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08);
44 | background-color: #43458b;
45 | }
46 |
47 | form {
48 | padding: 30px;
49 | height: 120px;
50 | }
51 |
52 | label {
53 | font-weight: 500;
54 | font-size: 14px;
55 | display: block;
56 | margin-bottom: 8px;
57 | }
58 |
59 | #card-errors {
60 | height: 20px;
61 | padding: 4px 0;
62 | color: #fa755a;
63 | }
64 |
65 | .form-row {
66 | width: 70%;
67 | float: left;
68 | }
69 |
70 | .token {
71 | color: #32325d;
72 | font-family: 'Source Code Pro', monospace;
73 | font-weight: 500;
74 | }
75 |
76 | .wrapper {
77 | width: 670px;
78 | margin: 0 auto;
79 | height: 100%;
80 | }
81 |
82 | #stripe-token-handler {
83 | position: absolute;
84 | top: 0;
85 | left: 25%;
86 | right: 25%;
87 | padding: 20px 30px;
88 | border-radius: 0 0 4px 4px;
89 | box-sizing: border-box;
90 | box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1),
91 | 0 15px 35px rgba(50, 50, 93, 0.15),
92 | 0 5px 15px rgba(0, 0, 0, 0.1);
93 | -webkit-transition: all 500ms ease-in-out;
94 | transition: all 500ms ease-in-out;
95 | transform: translateY(0);
96 | opacity: 1;
97 | background-color: white;
98 | }
99 |
100 | #stripe-token-handler.is-hidden {
101 | opacity: 0;
102 | transform: translateY(-80px);
103 | }
104 |
105 | /**
106 | * The CSS shown here will not be introduced in the Quickstart guide, but shows
107 | * how you can use CSS to style your Element's container.
108 | */
109 | .StripeElement {
110 | background-color: white;
111 | height: 40px;
112 | padding: 10px 12px;
113 | border-radius: 4px;
114 | border: 1px solid transparent;
115 | box-shadow: 0 1px 3px 0 #e6ebf1;
116 | -webkit-transition: box-shadow 150ms ease;
117 | transition: box-shadow 150ms ease;
118 | }
119 |
120 | .StripeElement--focus {
121 | box-shadow: 0 1px 3px 0 #cfd7df;
122 | }
123 |
124 | .StripeElement--invalid {
125 | border-color: #fa755a;
126 | }
127 |
128 | .StripeElement--webkit-autofill {
129 | background-color: #fefde5 !important;
130 | }
--------------------------------------------------------------------------------
/static_root/images/cart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/justdjango/Shopping_cart/c0f8a2f2270436d2d83ee66682100e4279e53ae3/static_root/images/cart.png
--------------------------------------------------------------------------------
/static_root/js/checkout.js:
--------------------------------------------------------------------------------
1 | // Create a Stripe client.
2 |
3 | var stripe = Stripe('');
4 |
5 | // Create an instance of Elements.
6 | var elements = stripe.elements();
7 |
8 | // Custom styling can be passed to options when creating an Element.
9 | // (Note that this demo uses a wider set of styles than the guide below.)
10 | var style = {
11 | base: {
12 | color: '#32325d',
13 | lineHeight: '18px',
14 | fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
15 | fontSmoothing: 'antialiased',
16 | fontSize: '16px',
17 | '::placeholder': {
18 | color: '#aab7c4'
19 | }
20 | },
21 | invalid: {
22 | color: '#fa755a',
23 | iconColor: '#fa755a'
24 | }
25 | };
26 |
27 | // Create an instance of the card Element.
28 | var card = elements.create('card', {style: style});
29 |
30 | // Add an instance of the card Element into the `card-element`
.
31 | card.mount('#card-element');
32 |
33 | // Handle real-time validation errors from the card Element.
34 | card.addEventListener('change', function(event) {
35 | var displayError = document.getElementById('card-errors');
36 | if (event.error) {
37 | displayError.textContent = event.error.message;
38 | } else {
39 | displayError.textContent = '';
40 | }
41 | });
42 |
43 | // Handle form submission.
44 | var form = document.getElementById('payment-form');
45 | form.addEventListener('submit', function(event) {
46 | event.preventDefault();
47 |
48 | stripe.createToken(card).then(function(result) {
49 | if (result.error) {
50 | // Inform the user if there was an error.
51 | var errorElement = document.getElementById('card-errors');
52 | errorElement.textContent = result.error.message;
53 | } else {
54 | // Send the token to your server.
55 | stripeTokenHandler(result.token);
56 | }
57 | });
58 | });
59 |
60 | var successElement = document.getElementById('stripe-token-handler');
61 | document.querySelector('.wrapper').addEventListener('click', function() {
62 | successElement.className = 'is-hidden';
63 | });
64 |
65 | function stripeTokenHandler(token) {
66 | successElement.className = '';
67 | successElement.querySelector('.token').textContent = token.id;
68 | // Insert the token ID into the form so it gets submitted to the server
69 | var form = document.getElementById('payment-form');
70 | var hiddenInput = document.createElement('input');
71 | hiddenInput.setAttribute('type', 'hidden');
72 | hiddenInput.setAttribute('name', 'stripeToken');
73 | hiddenInput.setAttribute('value', token.id);
74 | form.appendChild(hiddenInput);
75 |
76 | // Submit the form
77 | form.submit();
78 | }
--------------------------------------------------------------------------------
/templates/advanced payment form/checkout.html:
--------------------------------------------------------------------------------
1 | {% extends "base.html" %}
2 | {% load static %}
3 |
4 | {% block head %}
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
24 | {% endblock head %}
25 |
26 | {% block content %}
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
Enter Voucher Code BelowIf multiple, separate each with comma
36 |
37 |
38 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | Order Summary
56 |
57 |
58 | {% for item in order.get_cart_items %}
59 |
60 | {{ item }}
61 | R {{ item.product.price }}
62 |
63 | {% endfor %}
64 |
65 |
66 |
67 | Order Total R {{ order.get_cart_total }}
69 |
70 |
71 |
Checkout with a credit card
72 |
73 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
102 |
103 |
104 |
105 |
108 |
109 |
Payment successful
110 |
Thanks for trying Stripe Elements. No money was charged, but we generated a token: tok_189gMN2eZvKYlo2CwTBv9KKh
111 |
112 |
113 |
115 |
116 |
117 |
118 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
138 |
139 | {% endblock content %}
140 |
141 |
--------------------------------------------------------------------------------
/templates/advanced payment form/example-4.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | "use strict";
3 |
4 | var elements = stripe.elements({
5 | fonts: [
6 | {
7 | cssSrc: "https://rsms.me/inter/inter-ui.css"
8 | }
9 | ],
10 | // Stripe's examples are localized to specific languages, but if
11 | // you wish to have Elements automatically detect your user's locale,
12 | // use `locale: 'auto'` instead.
13 | locale: window.__exampleLocale
14 | });
15 |
16 | /**
17 | * Card Element
18 | */
19 | var card = elements.create("card", {
20 | style: {
21 | base: {
22 | color: "#32325D",
23 | fontWeight: 500,
24 | fontFamily: "Inter UI, Open Sans, Segoe UI, sans-serif",
25 | fontSize: "16px",
26 | fontSmoothing: "antialiased",
27 |
28 | "::placeholder": {
29 | color: "#CFD7DF"
30 | }
31 | },
32 | invalid: {
33 | color: "#E25950"
34 | }
35 | }
36 | });
37 |
38 | card.mount("#example4-card");
39 |
40 | /**
41 | * Payment Request Element
42 | */
43 | var paymentRequest = stripe.paymentRequest({
44 | country: "US",
45 | currency: "usd",
46 | total: {
47 | amount: 2000,
48 | label: "Total"
49 | }
50 | });
51 | paymentRequest.on("token", function(result) {
52 | var example = document.querySelector(".example4");
53 | example.querySelector(".token").innerText = result.token.id;
54 | example.classList.add("submitted");
55 | result.complete("success");
56 | });
57 |
58 | var paymentRequestElement = elements.create("paymentRequestButton", {
59 | paymentRequest: paymentRequest,
60 | style: {
61 | paymentRequestButton: {
62 | type: "donate"
63 | }
64 | }
65 | });
66 |
67 | paymentRequest.canMakePayment().then(function(result) {
68 | if (result) {
69 | document.querySelector(".example4 .card-only").style.display = "none";
70 | document.querySelector(
71 | ".example4 .payment-request-available"
72 | ).style.display =
73 | "block";
74 | paymentRequestElement.mount("#example4-paymentRequest");
75 | }
76 | });
77 |
78 | registerElements([card, paymentRequestElement], "example4");
79 | })();
--------------------------------------------------------------------------------
/templates/advanced payment form/example4.css:
--------------------------------------------------------------------------------
1 | .example.example4 {
2 | background-color: #f6f9fc;
3 | }
4 |
5 | .example.example4 * {
6 | font-family: Inter UI, Open Sans, Segoe UI, sans-serif;
7 | font-size: 16px;
8 | font-weight: 500;
9 | }
10 |
11 | .example.example4 form {
12 | max-width: 496px !important;
13 | padding: 0 15px;
14 | }
15 |
16 | .example.example4 form > * + * {
17 | margin-top: 20px;
18 | }
19 |
20 | .example.example4 .container {
21 | background-color: #fff;
22 | box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
23 | border-radius: 4px;
24 | padding: 3px;
25 | }
26 |
27 | .example.example4 fieldset {
28 | border-style: none;
29 | padding: 5px;
30 | margin-left: -5px;
31 | margin-right: -5px;
32 | background: rgba(18, 91, 152, 0.05);
33 | border-radius: 8px;
34 | }
35 |
36 | .example.example4 fieldset legend {
37 | float: left;
38 | width: 100%;
39 | text-align: center;
40 | font-size: 13px;
41 | color: #8898aa;
42 | padding: 3px 10px 7px;
43 | }
44 |
45 | .example.example4 .card-only {
46 | display: block;
47 | }
48 | .example.example4 .payment-request-available {
49 | display: none;
50 | }
51 |
52 | .example.example4 fieldset legend + * {
53 | clear: both;
54 | }
55 |
56 | .example.example4 input, .example.example4 button {
57 | -webkit-appearance: none;
58 | -moz-appearance: none;
59 | appearance: none;
60 | outline: none;
61 | border-style: none;
62 | color: #fff;
63 | }
64 |
65 | .example.example4 input:-webkit-autofill {
66 | transition: background-color 100000000s;
67 | -webkit-animation: 1ms void-animation-out;
68 | }
69 |
70 | .example.example4 #example4-card {
71 | padding: 10px;
72 | margin-bottom: 2px;
73 | }
74 |
75 | .example.example4 input {
76 | -webkit-animation: 1ms void-animation-out;
77 | }
78 |
79 | .example.example4 input::-webkit-input-placeholder {
80 | color: #9bacc8;
81 | }
82 |
83 | .example.example4 input::-moz-placeholder {
84 | color: #9bacc8;
85 | }
86 |
87 | .example.example4 input:-ms-input-placeholder {
88 | color: #9bacc8;
89 | }
90 |
91 | .example.example4 button {
92 | display: block;
93 | width: 100%;
94 | height: 37px;
95 | background-color: #d782d9;
96 | border-radius: 2px;
97 | color: #fff;
98 | cursor: pointer;
99 | }
100 |
101 | .example.example4 button:active {
102 | background-color: #b76ac4;
103 | }
104 |
105 | .example.example4 .error svg .base {
106 | fill: #e25950;
107 | }
108 |
109 | .example.example4 .error svg .glyph {
110 | fill: #f6f9fc;
111 | }
112 |
113 | .example.example4 .error .message {
114 | color: #e25950;
115 | }
116 |
117 | .example.example4 .success .icon .border {
118 | stroke: #ffc7ee;
119 | }
120 |
121 | .example.example4 .success .icon .checkmark {
122 | stroke: #d782d9;
123 | }
124 |
125 | .example.example4 .success .title {
126 | color: #32325d;
127 | }
128 |
129 | .example.example4 .success .message {
130 | color: #8898aa;
131 | }
132 |
133 | .example.example4 .success .reset path {
134 | fill: #d782d9;
135 | }
136 |
--------------------------------------------------------------------------------
/templates/advanced payment form/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var stripe = Stripe('pk_test_Fjb4PojwxaqET2AftkftQSfp');
4 |
5 | function registerElements(elements, exampleName) {
6 | var formClass = '.' + exampleName;
7 | var example = document.querySelector(formClass);
8 |
9 | var form = example.querySelector('form');
10 | var resetButton = example.querySelector('a.reset');
11 | var error = form.querySelector('.error');
12 | var errorMessage = error.querySelector('.message');
13 |
14 | function enableInputs() {
15 | Array.prototype.forEach.call(
16 | form.querySelectorAll(
17 | "input[type='text'], input[type='email'], input[type='tel']"
18 | ),
19 | function(input) {
20 | input.removeAttribute('disabled');
21 | }
22 | );
23 | }
24 |
25 | function disableInputs() {
26 | Array.prototype.forEach.call(
27 | form.querySelectorAll(
28 | "input[type='text'], input[type='email'], input[type='tel']"
29 | ),
30 | function(input) {
31 | input.setAttribute('disabled', 'true');
32 | }
33 | );
34 | }
35 |
36 | function triggerBrowserValidation() {
37 | // The only way to trigger HTML5 form validation UI is to fake a user submit
38 | // event.
39 | var submit = document.createElement('input');
40 | submit.type = 'submit';
41 | submit.style.display = 'none';
42 | form.appendChild(submit);
43 | submit.click();
44 | submit.remove();
45 | }
46 |
47 | // Listen for errors from each Element, and show error messages in the UI.
48 | var savedErrors = {};
49 | elements.forEach(function(element, idx) {
50 | element.on('change', function(event) {
51 | if (event.error) {
52 | error.classList.add('visible');
53 | savedErrors[idx] = event.error.message;
54 | errorMessage.innerText = event.error.message;
55 | } else {
56 | savedErrors[idx] = null;
57 |
58 | // Loop over the saved errors and find the first one, if any.
59 | var nextError = Object.keys(savedErrors)
60 | .sort()
61 | .reduce(function(maybeFoundError, key) {
62 | return maybeFoundError || savedErrors[key];
63 | }, null);
64 |
65 | if (nextError) {
66 | // Now that they've fixed the current error, show another one.
67 | errorMessage.innerText = nextError;
68 | } else {
69 | // The user fixed the last error; no more errors.
70 | error.classList.remove('visible');
71 | }
72 | }
73 | });
74 | });
75 |
76 | // Listen on the form's 'submit' handler...
77 | form.addEventListener('submit', function(e) {
78 | e.preventDefault();
79 |
80 | // Trigger HTML5 validation UI on the form if any of the inputs fail
81 | // validation.
82 | var plainInputsValid = true;
83 | Array.prototype.forEach.call(form.querySelectorAll('input'), function(
84 | input
85 | ) {
86 | if (input.checkValidity && !input.checkValidity()) {
87 | plainInputsValid = false;
88 | return;
89 | }
90 | });
91 | if (!plainInputsValid) {
92 | triggerBrowserValidation();
93 | return;
94 | }
95 |
96 | // Show a loading screen...
97 | example.classList.add('submitting');
98 |
99 | // Disable all inputs.
100 | disableInputs();
101 |
102 | // Gather additional customer data we may have collected in our form.
103 | var name = form.querySelector('#' + exampleName + '-name');
104 | var address1 = form.querySelector('#' + exampleName + '-address');
105 | var city = form.querySelector('#' + exampleName + '-city');
106 | var state = form.querySelector('#' + exampleName + '-state');
107 | var zip = form.querySelector('#' + exampleName + '-zip');
108 | var additionalData = {
109 | name: name ? name.value : undefined,
110 | address_line1: address1 ? address1.value : undefined,
111 | address_city: city ? city.value : undefined,
112 | address_state: state ? state.value : undefined,
113 | address_zip: zip ? zip.value : undefined,
114 | };
115 |
116 | // Use Stripe.js to create a token. We only need to pass in one Element
117 | // from the Element group in order to create a token. We can also pass
118 | // in the additional customer data we collected in our form.
119 | stripe.createToken(elements[0], additionalData).then(function(result) {
120 | // Stop loading!
121 | example.classList.remove('submitting');
122 |
123 | if (result.token) {
124 | // If we received a token, show the token ID.
125 | example.querySelector('.token').innerText = result.token.id;
126 | example.classList.add('submitted');
127 | } else {
128 | // Otherwise, un-disable inputs.
129 | enableInputs();
130 | }
131 | });
132 | });
133 |
134 | resetButton.addEventListener('click', function(e) {
135 | e.preventDefault();
136 | // Resetting the form (instead of setting the value to `''` for each input)
137 | // helps us clear webkit autofill styles.
138 | form.reset();
139 |
140 | // Clear each Element.
141 | elements.forEach(function(element) {
142 | element.clear();
143 | });
144 |
145 | // Reset error state as well.
146 | error.classList.remove('visible');
147 |
148 | // Resetting the form does not un-disable inputs, so we need to do it separately:
149 | enableInputs();
150 | example.classList.remove('submitted');
151 | });
152 | }
153 |
--------------------------------------------------------------------------------
/templates/base.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
Cart
6 |
7 |
8 |
9 | {% block head %}{% endblock head %}
10 | {% block style %}{% endblock style %}
11 |
12 |
13 |
14 | {% include 'messages.html' %}
15 |
16 | {% block content %}{% endblock content %}
17 |
18 |
19 |
20 |
21 |
22 | {% block script %}{% endblock script %}
23 |
24 |
--------------------------------------------------------------------------------
/templates/messages.html:
--------------------------------------------------------------------------------
1 | {% if messages %}
2 |
3 |
12 |
13 |
14 |
15 |
16 | {% for message in messages %}
17 | {% if "html_safe" in message.tags %}{{ message|safe }}{% else %}{{ message }}{% endif %}
18 | {% endfor %}
19 |
20 |
21 |
22 | {% endif %}
--------------------------------------------------------------------------------
/templates/profile.html:
--------------------------------------------------------------------------------
1 | {% extends 'base.html' %}
2 |
3 | {% block content %}
4 |
5 |
6 |
7 | Date Ordered
8 | Reference Code
9 | Items
10 | Price
11 |
12 | {% for order in my_orders %}
13 |
14 | {{ order.date_ordered }}
15 | {{ order.ref_code }}
16 |
17 | {% for item in order.items.all %}
18 | {{ item.product.name }}
19 | {% endfor %}
20 |
21 | ${{ order.get_cart_total }}
22 |
23 |
24 | {% empty %}
25 |
26 | You have no orders.
27 |
28 | {% endfor %}
29 |
30 |
31 |
32 |
33 | {% if not order %}Continue Shopping{% else %}Add Items to Cart {% endif %}
34 |
35 |
36 |
37 |
38 |
39 | {% endblock content %}
--------------------------------------------------------------------------------
5 |
6 | 
26 | 
35 | 
36 |
37 |