Stripe payments

Author: Matthew Freire

.env

@@ -0,0 +1,3 @@
+
+STRIPE_TEST_PUBLIC_KEY=''
+STRIPE_TEST_SECRET_KEY=''

core/api/urls.py

@@ -2,11 +2,13 @@
 from .views import (
     ItemListView,
     AddToCartView,
-    OrderDetailView
+    OrderDetailView,
+    PaymentView
 )
 
 urlpatterns = [
     path('product-list/', ItemListView.as_view(), name='product-list'),
     path('add-to-cart/', AddToCartView.as_view(), name='add-to-cart'),
-    path('order-summary/', OrderDetailView.as_view(), name='order-summary')
+    path('order-summary/', OrderDetailView.as_view(), name='order-summary'),
+    path('checkout/', PaymentView.as_view(), name='checkout')
 ]

core/api/views.py

@@ -9,6 +9,12 @@
 from rest_framework.status import HTTP_200_OK, HTTP_400_BAD_REQUEST
 from core.models import Item, OrderItem, Order
 from .serializers import ItemSerializer, OrderSerializer
+from core.models import Item, OrderItem, Order, Address, Payment, Coupon, Refund, UserProfile
+
+
+import stripe
+
+stripe.api_key = settings.STRIPE_SECRET_KEY
 
 
 class ItemListView(ListAPIView):
@@ -58,3 +64,105 @@ def get_object(self):
             return order
         except ObjectDoesNotExist:
             return Response({"message": "You do not have an active order"}, status=HTTP_400_BAD_REQUEST)
+
+
+class PaymentView(APIView):
+
+    def post(self, request, *args, **kwargs):
+        order = Order.objects.get(user=self.request.user, ordered=False)
+        userprofile = UserProfile.objects.get(user=self.request.user)
+        token = request.data.get('stripeToken')
+        # save = form.cleaned_data.get('save')
+        # use_default = form.cleaned_data.get('use_default')
+        save = False
+        use_default = False
+
+        if save:
+            if userprofile.stripe_customer_id != '' and userprofile.stripe_customer_id is not None:
+                customer = stripe.Customer.retrieve(
+                    userprofile.stripe_customer_id)
+                customer.sources.create(source=token)
+
+            else:
+                customer = stripe.Customer.create(
+                    email=self.request.user.email,
+                )
+                customer.sources.create(source=token)
+                userprofile.stripe_customer_id = customer['id']
+                userprofile.one_click_purchasing = True
+                userprofile.save()
+
+        amount = int(order.get_total() * 100)
+
+        try:
+
+            if use_default or save:
+                # charge the customer because we cannot charge the token more than once
+                charge = stripe.Charge.create(
+                    amount=amount,  # cents
+                    currency="usd",
+                    customer=userprofile.stripe_customer_id
+                )
+            else:
+                # charge once off on the token
+                charge = stripe.Charge.create(
+                    amount=amount,  # cents
+                    currency="usd",
+                    source=token
+                )
+
+            # create the payment
+            payment = Payment()
+            payment.stripe_charge_id = charge['id']
+            payment.user = self.request.user
+            payment.amount = order.get_total()
+            payment.save()
+
+            # assign the payment to the order
+
+            order_items = order.items.all()
+            order_items.update(ordered=True)
+            for item in order_items:
+                item.save()
+
+            order.ordered = True
+            order.payment = payment
+            # order.ref_code = create_ref_code()
+            order.save()
+
+            return Response(status=HTTP_200_OK)
+
+        except stripe.error.CardError as e:
+            body = e.json_body
+            err = body.get('error', {})
+            return Response({"message": f"{err.get('message')}"}, status=HTTP_400_BAD_REQUEST)
+
+        except stripe.error.RateLimitError as e:
+            # Too many requests made to the API too quickly
+            messages.warning(self.request, "Rate limit error")
+            return Response({"message": "Rate limit error"}, status=HTTP_400_BAD_REQUEST)
+
+        except stripe.error.InvalidRequestError as e:
+            # Invalid parameters were supplied to Stripe's API
+            return Response({"message": "Invalid parameters"}, status=HTTP_400_BAD_REQUEST)
+
+        except stripe.error.AuthenticationError as e:
+            # Authentication with Stripe's API failed
+            # (maybe you changed API keys recently)
+            return Response({"message": "Not authenticated"}, status=HTTP_400_BAD_REQUEST)
+
+        except stripe.error.APIConnectionError as e:
+            # Network communication with Stripe failed
+            return Response({"message": "Network error"}, status=HTTP_400_BAD_REQUEST)
+
+        except stripe.error.StripeError as e:
+            # Display a very generic error to the user, and maybe send
+            # yourself an email
+            return Response({"message": "Something went wrong. You were not charged. Please try again."}, status=HTTP_400_BAD_REQUEST)
+
+        except Exception as e:
+            # send an email to ourselves
+            print(e)
+            return Response({"message": "A serious error occurred. We have been notifed."}, status=HTTP_400_BAD_REQUEST)
+
+        return Response({"message": "Invalid data received"}, status=HTTP_400_BAD_REQUEST)

core/views.py

@@ -311,7 +311,6 @@ def post(self, *args, **kwargs):
 
             except stripe.error.InvalidRequestError as e:
                 # Invalid parameters were supplied to Stripe's API
-                print(e)
                 messages.warning(self.request, "Invalid parameters")
                 return redirect("/")
 

home/settings/base.py

@@ -1,4 +1,5 @@
 import os
+from decouple import config
 
 BASE_DIR = os.path.dirname(os.path.dirname(
     os.path.dirname(os.path.abspath(__file__))))

home/settings/dev.py

@@ -16,4 +16,9 @@
 
 CORS_ORIGIN_WHITELIST = (
     'http://localhost:3000',
-)
+)
+
+# Stripe
+
+STRIPE_PUBLIC_KEY = config('STRIPE_TEST_PUBLIC_KEY')
+STRIPE_SECRET_KEY = config('STRIPE_TEST_SECRET_KEY')

package.json

@@ -10,6 +10,7 @@
     "react-redux": "^7.1.0",
     "react-router-dom": "^5.0.1",
     "react-scripts": "^3.0.1",
+    "react-stripe-elements": "^4.0.0",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",
     "semantic-ui-css": "^2.4.1",

public/index.html

@@ -7,6 +7,7 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <title>Django React Boilerplate</title>
+    <script src="https://js.stripe.com/v3/"></script>
   </head>
   <body>
     <noscript>

requirements.txt

@@ -25,6 +25,7 @@ requests==2.22.0
 requests-oauthlib==1.2.0
 six==1.12.0
 sqlparse==0.3.0
+stripe==2.33.0
 typed-ast==1.4.0
 urllib3==1.25.3
 wrapt==1.11.2

src/constants.js

@@ -7,3 +7,4 @@ export const endpoint = `${localhost}${apiURL}`;
 export const productListURL = `${endpoint}/product-list/`;
 export const addToCartURL = `${endpoint}/add-to-cart/`;
 export const orderSummaryURL = `${endpoint}/order-summary/`;
+export const checkoutURL = `${endpoint}/checkout/`;

src/containers/Checkout.js

@@ -0,0 +1,92 @@
+import React, { Component } from "react";
+import {
+  CardElement,
+  injectStripe,
+  Elements,
+  StripeProvider
+} from "react-stripe-elements";
+import { Button, Container, Message } from "semantic-ui-react";
+import { authAxios } from "../utils";
+import { checkoutURL } from "../constants";
+
+class CheckoutForm extends Component {
+  state = {
+    loading: false,
+    error: null,
+    success: false
+  };
+
+  submit = ev => {
+    ev.preventDefault();
+    this.setState({ loading: true });
+    if (this.props.stripe) {
+      this.props.stripe.createToken().then(result => {
+        if (result.error) {
+          this.setState({ error: result.error.message, loading: false });
+        } else {
+          authAxios
+            .post(checkoutURL, { stripeToken: result.token.id })
+            .then(res => {
+              this.setState({ loading: false, success: true });
+              // redirect the user
+            })
+            .catch(err => {
+              this.setState({ loading: false, error: err });
+            });
+        }
+      });
+    } else {
+      console.log("Stripe is not loaded");
+    }
+  };
+
+  render() {
+    const { error, loading, success } = this.state;
+    return (
+      <div>
+        {error && (
+          <Message negative>
+            <Message.Header>Your payment was unsuccessful</Message.Header>
+            <p>{JSON.stringify(error)}</p>
+          </Message>
+        )}
+        {success && (
+          <Message positive>
+            <Message.Header>Your payment was successful</Message.Header>
+            <p>
+              Go to your <b>profile</b> to see the order delivery status.
+            </p>
+          </Message>
+        )}
+        <p>Would you like to complete the purchase?</p>
+        <CardElement />
+        <Button
+          loading={loading}
+          disabled={loading}
+          primary
+          onClick={this.submit}
+          style={{ marginTop: "10px" }}
+        >
+          Submit
+        </Button>
+      </div>
+    );
+  }
+}
+
+const InjectedForm = injectStripe(CheckoutForm);
+
+const WrappedForm = () => (
+  <Container text>
+    <StripeProvider apiKey="">
+      <div>
+        <h1>Complete your order</h1>
+        <Elements>
+          <InjectedForm />
+        </Elements>
+      </div>
+    </StripeProvider>
+  </Container>
+);
+
+export default WrappedForm;

src/containers/OrderSummary.js

@@ -11,6 +11,7 @@ import {
   Message,
   Segment
 } from "semantic-ui-react";
+import { Link } from "react-router-dom";
 import { authAxios } from "../utils";
 import { orderSummaryURL } from "../constants";
 
@@ -103,9 +104,11 @@ class OrderSummary extends React.Component {
             <Table.Footer>
               <Table.Row>
                 <Table.HeaderCell colSpan="5">
-                  <Button floated="right" color="yellow">
-                    Checkout
-                  </Button>
+                  <Link to="/checkout">
+                    <Button floated="right" color="yellow">
+                      Checkout
+                    </Button>
+                  </Link>
                 </Table.HeaderCell>
               </Table.Row>
             </Table.Footer>

src/routes.js

@@ -7,13 +7,15 @@ import Signup from "./containers/Signup";
 import HomepageLayout from "./containers/Home";
 import ProductList from "./containers/ProductList";
 import OrderSummary from "./containers/OrderSummary";
+import Checkout from "./containers/Checkout";
 
 const BaseRouter = () => (
   <Hoc>
     <Route path="/products" component={ProductList} />
     <Route path="/login" component={Login} />
     <Route path="/signup" component={Signup} />
     <Route path="/order-summary" component={OrderSummary} />
+    <Route path="/checkout" component={Checkout} />
     <Route exact path="/" component={HomepageLayout} />
   </Hoc>
 );