Implementing Stripe with React-native and Django - 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.

Related

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.)

When you use DRF(Server API) + React(public Web Client), how do you implement for OAuth2 social login?

I am developing Django(Server) with React(Web Client).
And I want to use facebook social login.
I knew that client is public client, server is confidential. So I want to use authentication code grant way for authenticating user.
So I find out the way but there is no way to implement that. All the python oauth2 library limplements is just for django server side rendering.(Django Server + Web client).
So I confused about I am wrong or just the others just did not make the grant way.
When you use DRF(Server API) + React(public Web Client),
how do you implement for OAuth2 social login?
I wonder that. please give me some advise to me.
Thanks.
Let's start from basics, people usually split frontend and backend to improve the production speed as frontend and backend can be developed by two separate teams. But in order for the frontend and backend to work together, there needs to be a connection interface, an API.
React is a frontend that runs in the browser, so in order to talk to the server, it uses a REST protocol.
As the backend in this scenario is Django we use DRF as React uses REST API. DRF provides easy flexible pre-built packages to carry out this communication job between server and client.
Now the authenticator for web login you choose to be Facebook hence you will get the identity token from facebook, which will correspond to the rows in the Django User table which will give you access to the user's data in Django.
You don't need to do everything at once, you need to first implement the Facebook social auth and after test(test using postman app) only think about connecting React
A good place to start is this DRF documentation, look into Social OAuth2
https://www.django-rest-framework.org/api-guide/authentication/#django-oauth-toolkit

How should I implement reCaptcha v3 if my front and backend live on different domains?

I have several websites (SPAs), each one running on it's own domain. All these SPAs use the same API, which is hosted on another domain.
I'd like to implement reCaptcha v3 on my SPAs, but I'm not really sure how exactly the entire validation process would work.
Who would be in charge of receiving the callback from Google's service? If the backend, how does the frontend validate itself to the backend?
The SPAs are made with Vue and the backend is a Django app with Django Rest Framework. The backend is stateless, so there are no cookies.

Using Django REST Framework as an authentication backend for Django

I currently have a large Django project leveraging Django REST Framework.
I have another, smaller Django project that I would like to build off of the main one that doesn't share the database directly but rather grabs necessary data over API.
I would like to override the AUTHENTICATION_BACKEND for the smaller project and have it use the API auth endpoint from the larger one as the authenticator.
Basically the process would go as follows:
User attempts to log into the small Django project using credentials for their user in the large Django-DRF project.
Small Django project sends API login request to large Django-DRF project.
Large Django-DRF project returns API token and serialized user information.
Small Django project auto-adds/updates user to its database with information from large Django-DRF project's response.
Small Django project responds to user client with token so that AJAX requests from Small Django project's pages can be made directly to large Django-DRF project's endpoints.
Are there existing plugins worth leveraging for this use case or should I write my own AUTHENTICATION_BACKEND?
It sounds like you may want to look into django-rest-framework-jwt. This would allow you to use JWT as your authentication mechanism, which can easily handle your case. The project actually provides an endpoint specifically for what you want, verify_jwt_token. According to the documentation:
In some microservice architectures, authentication is handled by a single service. Other services delegate the responsibility of confirming that a user is logged in to this authentication service. This usually means that a service will pass a JWT received from the user to the authentication service, and wait for a confirmation that the JWT is valid before returning protected resources to the user.
So your workflow would be something like:
User authenticates to your larger API
User receives a JWT back from the authentication request
User sends the JWT along with each request to the smaller API
The smaller API, upon receiving a JWT, forwards it to the verify_jwt_token endpoint in your larger API

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

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