Where should stripe be integrated in single page application with django backend - django

I am new to stripe integration. I've looked at couple of examples but I'm unsure where I should integrate stripe in my application. My front-end is in Angular and the backend is in django. Should I integrate stripe in Angular code base or django code base?

Both. Front-end: either use Checkout (Embedded Form) or their Custom Form. This will spit out a token that you must process on the server side. If you are using routing or have a complex app, then you probably want a library to abstract away from Stripe's default behaviors, as it uses a simple form action. This will cause a reload or redirection from the page which could be a problem if you don't want to leave the app. I prefer this lightweight wrapper, though others exist: https://github.com/tobyn/angular-stripe-checkout
Server: You include their library for your language (Python if you want) in a script written to process the token. This is what actually sends the charge to Stripe. Just doing the front-end side only sends them a token which shows up in the logs but does nothing. This is where you create a new customer, charge, subscription, etc. according to the API for your language.
Once you've got that set up, then you'll probably want to listen for their webhooks, save the user that is created in your backend with its created from the initial payment, etc.

You can integrate it both in the front-end and back-end, but if it's a single page app and the backend is REST-ful it makes sense to do it in Angular
See this article for example: https://www.airpair.com/javascript/integrating-stripe-into-angular-app

Related

Implementing Stripe with React-native and Django

I am using React-native for mobile app and Django as server. How to implement stripe payment gateway? How I can make a payment and send the response to the backend so that in backend I can handle which user is now subscribed?
In web we can do that using stripe-session url. We can hit the url and after successful payment it's return an id, I have to just post the id to the server.
How can I do that with react-native because by doing so I am kicked out from my app and the session url opens in the browser, i can make the payment successfully but cannot redirect to the app.
How to successfully I can implement this with react-native and django?
According to the Docs, React Native provides the Fetch API. You should be able to make POST requests to your Django back-end that way.
You may run into issues with authentication (since Django POST request require CSRF tokens). There are many docs about this topic and you should be able to find a solution that meets your needs with a few searches.
As for how to implement your Stripe payment flow, that depends on how you want to collect payment details for your subscriptions. Stripe public docs have many useful examples from using a Stripe hosted Checkout page, using Stripe Payment Elements, or using the basic Quickstart example to get you started. The Python back-end uses Flask instead of Django but it is not difficult to understand how to translate the functionality from one framework to another.
As a back-up and general best practice, consider utilizing webhooks to ensure your back-end is aware of changes to Stripe records. Financial networks include many asynchronous processes and it's a good idea to not just rely on the Request <-> Response loop.

How to implement Angular with Django

I have requirement for creating an application using Angular(TypeScript) as frontend and Django as Backend, where I will be working only on Django (backend). Is that creating an REST API only enough to communicate with front end. Is that only possible in the backend in this case?
Normally while working in Django I used to work in forms, views and will renders in the html and create API for it but in this case where I have no idea how angular would work even. Just creating an API only sufficient when communicating with Angular
Yes, creating API's using Django/DRF is sufficient to communicate with an Angular app.
Below is an illustration of a basic architecture of a Django Angular application.
API endpoints in Django will be served via the urls.py files using the DRF (Django Rest Framework. The angular client will send HTTP requests using the Http Client Module and display the retrieved data on the components/pages. A data service created in Angular will use the HTTP client to send and get data. Angular Router will handle navigations to pages and components.
Yes, you will be using Django for REST API views. Forget about templates and Django forms, you will be just sending and receiving JSONs.
If you want to host it together you will be probably serving just index.htm. The tricky part is that you need match all possible app routes to index too (the whole Angular lives there, handling routing on client side. But initial request after reload still can lead to arbitrary url)
More common way is using two separate containers, one for api and one for angular app. Then you can provide server side rendering on angular app (this will be still calling api from it) and separate api without need to handle index.

Stripe integration with Django rest and Angular/Cli

I want to create a stripe payment integration using Django Rest Framework as backend and Angular/Cli as frontend. And also I want to confirm the payment using stripe webhooks. I could not able to find Angular documentation just for the only frontend. And also the Stripe docs are generally has written for flask and not for the rest framework. Any help will be appreciated. Thank you in advance.
I've found a library and some newer docs that I think will solve your issues: https://richnologies.gitbook.io/ngx-stripe/core-concepts/checkout
Using the ngx-stripe library as a wrapper, you can setup the publishable key on your front end. The library then offers a StripeService.
If you setup some custom endpoints on your backend to handle the dirty work (accept payments, create customers, etc), you can have then have the StripeService listen for the response and react accordingly (create a checkout session, display payment successful message, etc.)

Django REST authentication with React/ Redux

I am building a web app with a Django backend and React/Redux frontend running on separate servers. I have begun to try and start working on authentication and I cannot find a tutorial that suits my needs. Every tutorial either uses deprecated modules like drf-jwt (as opposed to simple-jwt) or has a simple mono-server that houses both the backend and the frontend in one directory. The former is useless and I do not want to do the latter as I like having the two separate servers for when I move on to deployment. Now can someone direct me to a good source of knowledge for getting this done? It doesn't have to be a tutorial it can be anything. I am really lost and I do not know how to begin.
you can use 3rd party packages djoser: Provides a set of views to handle basic actions such as registration, login, logout, password reset and account activation. for more information: https://pypi.org/project/djoser/
I'm using token authentication from Django Rest Framework so, after a login/password verification, the token on response can be used on any DRF endpoint.

emitting Signal from server to the clients in Python Django like SignalR

I'm using Backbone.js and Python Django Combo.
For checking user is authenticated or not, I'm using setTime out method and call a method which make ajax call to the server.
I heard SignalR from my friend who is interested in .Net Technologies. This can emiting signal from server to client. So he say there is no need to poll periodically with signalR.
Any help or idea will be appreciated.
Possible data flow diagram:
.
If you want to control the data that is pushed to your web clients from your Django app, you will need to use SignalR as a relay of sorts which can be hosted with an ASP.NET app.
The ASP.NET app can have REST endpoints accessible only to your Django app, and can then from there based on the REST parameters push messages to some or all of your clients. Example of doing this with ASP.NET MVC.
The SignalR Wiki can be a good resource for this. You will also need to EnableCrossDomain for this setup to work.
If you don't like the idea of setting up another server just to push data to your clients you might prefer a cloud-based offering like Pusher with a prebuilt wrapper around their REST API.
If you want to use Python to actually push to the clients you can use something like tornado.websocket, but that won't support browsers that don't support the final WebSocket spec.