Hi Thank you very much for your tutorial, it helped me a lot! best tutorial I found. I have just one question about the customization of the visual card in WebView. I'm trying to change all placeholders in French but it's not working for the name "Card number". Do you know how can I find a solution? Thanks in advance for your answer.
Hi Jenn, thank you for appreciation. It is possible to change the placeholder and even the look and feel of the card. We can play with the html and css part as you have seen in the video. Here is some link which may help you to understand. stripe.dev/elements-examples/fr/ stripe.com/docs/stripe-js
@@codewithjay Thanks again! I found my problem. Just adding a locale when we write the publishable key. Like this : const stripe = Stripe('pk_test_51HkRBCIYWAaBgiRPucp37PR7JZ8xp8y7gwQuFX7vFNapH4z8VR6Py6RAlAvjoWS2mVZKsmVArFoAYJS2CqwG4EDV00WYc7Rzwu', { locale: 'fr' });
Thanks a lot for appreciation :) Here is the Backend Source code you can set up your own server to handle transactions. Mostly I will post backend tutorial in December only along with the DevOps concept to setup CICD microservices on the cloud platform for a production server. It will be a complete series from Scratch to the Production level. Stay tuned to my channel for more interesting topics. github.com/codergogoi/Payment_Gateway_React_Native
@@codewithjay Ok, I will be looking forward to it! Also, I have a simple question: When you are testing and performing transactions in your simulator, are you really trasferring real money between bank accounts? Or is it some test mode?
I am doing on test Mode. Test Card Number is (4242 4242 4242 4242 12/21 123). Because you need to verify you identify along with Tax Details with Stripe to make live payment / Actual payment with your Physical Credit or Debit Card. Once your test mode is working perfectly you can switch you account to live mode which is giving you an additional security page after entered card details. It will handled by stripe itself inside browser. Thanks and Stay tuned to my channel :)
please i'm trying to know if an app that implements it's payment feature through webview like the one in this video, would not be rejected when published as an ios app
Hi Kelechi, Thank you for writing. It will always depend on type of application features. Example if you wish to collect payment against of monthly, Yearly subscription model or some features like membership, pro version, unlock some features then definitely this is not a right choice. In such case you should implement Apple or google inApp purchase model. But in the tutorial we are representing the payment option for E-Commerce model only to products, like Clothing, Foods, Groceries, Flight, Hotel Tickets and other related products only. So this will fairly comply Apple or google payment policy. I hope above information will you. Cheers!
It is a great tutorial! I just want to ask that If I run it without test mode and I do payment from my app, then how the app holder will receive money?
Dear Abdul, the payment system is certainly working in different way. First of all you need to verify your identity and tax information by submitting some documents and once it is approved you can switch to live mode. There is some settings on dashboard where you need to provide your bank account details and you can set the payout schedule for your transactions. It will deposit into the provided account after deduct payment gateway Share (some % of transactions). Different payment gateway has different rules :) I hope it will help you. Thank you stay tuned to my channel for more updates.
Make sure you're using your own private and public keys which are available on your stripe account. The key is used in the project is already deleted from the dashboard for security reasons. Make sure you have set up the following. Best way: 1. Create your own Stripe account get verified from Stripe 2. Setup your own backend server to handle transactions. 2. Switch to test mode your account 3. Use the test public key on app & use the secret key on Backend running on nodejs. Here is the link of the backend: github.com/codergogoi/Payment_Gateway_React_Native Once test mode is working perfectly. Switch your account to live mode and make sure you are changing the base URL accordingly. Hope above will help you. Cheers!
Hey Buddy, Thank you for writing. You need to replace your live publishable key on the "PaymentView.js" file line number 6: const STRIPE_PK = 'pk_live_XXX.....your_key'. It can be solved using live key with the baseURL. Make sure you have use the live secret key on server side also then only your payment will go through. Mismatch key is leading to error of initialization of sdk may behave white screen or card view will behave differently. Rest of all available on stripe documentation page. Cheers!
@@codewithjay Hi, your video helped me a lot. But I'm also facing an issue with the live key. I'm not getting stripe elements like I was on the test and of course, the stripe is not working. Can you explain to me more about baseURL? Is there any way to run this using just the client side? Because BE doesn't support me with anything except this live key and API which I am calling after I get token from the stripe.
Sir, plz how to deploy app on digital ocean cloud hosting. Plz cloud hosting server setup tuotorials for new developers. What thing should be consider for before hosting app on server
Month of November I will post backend series where I will cover DevOps. Hopefully you can get a picture of all cloud tech setup and deploy products servers right there. Stay tuned to get updates. Thanks
Hi AbdulWahab, Thank you for writing to me. Seems your sentence is interrogating me! :) I am just helping people spending some of my personal time. If you share the issue or logs maybe I can suggest possibly a best solution to get it done Make sure you have set up the following. 1. Setup your own backend server to handle transactions. 2. Get approval from Stripe by verifying your identity and once verified your identity switch it to live mode. 3. Now use the live credential on both Client and Server where it is required as suggested on source code. if you did the above and facing some trouble you can find the exact error code and reason on the stripe website. you can check the below. If still, you are facing trouble drop an email (codergogoi@gmail.com) to me describing your issues and providing the logs. stripe.com/docs/api stripe.com/docs/error-codes Cheers!
You need to setup your own backend for handle transactions and specifically use your own stripe account credentials to work for you. For both App & Backend, Otherwise you will not receive response. I have used temporary credential to show how it works which is already expired. Best way: 1. Create your own Stripe account get verified from Stripe 2. Switch to test mode your account 3. Use the test public key on app & use the secret key on Backend running on nodejs. Here is the link of the backend: github.com/codergogoi/Payment_Gateway_React_Native 4. Use test card to get success result keep smile :)
Bhai excellent video. Moj kardi🕺🕺🕺
Hi, my friend, you did a great job! Thank you so much for sharing such a valuable tutorial!
Great tutorial mate, subscribed. Cheers!
Great tutorial brother . Looking for more great react native contents !
Thank you for appreciation. Definitely I will post more videos related to React Native. Stay tuned to my channel for more updates.
@J Gogoi Hey, I just wanted to say thank you so much, you don't how much you helped me. Please keep up the good work you do.
Greetings from Germany.
great video sir ,keep up the good work
Thank you for the video
please make a video of connecting expo with square in app payments
Sure, I will try to do so.
Hi Thank you very much for your tutorial, it helped me a lot! best tutorial I found. I have just one question about the customization of the visual card in WebView. I'm trying to change all placeholders in French but it's not working for the name "Card number". Do you know how can I find a solution? Thanks in advance for your answer.
Hi Jenn, thank you for appreciation. It is possible to change the placeholder and even the look and feel of the card. We can play with the html and css part as you have seen in the video. Here is some link which may help you to understand.
stripe.dev/elements-examples/fr/
stripe.com/docs/stripe-js
@@codewithjay Thanks again! I found my problem. Just adding a locale when we write the publishable key. Like this : const stripe = Stripe('pk_test_51HkRBCIYWAaBgiRPucp37PR7JZ8xp8y7gwQuFX7vFNapH4z8VR6Py6RAlAvjoWS2mVZKsmVArFoAYJS2CqwG4EDV00WYc7Rzwu', {
locale: 'fr'
});
Thank you
Nice tutorial, when are you going to upload the backend tutorial?
Thanks a lot for appreciation :)
Here is the Backend Source code you can set up your own server to handle transactions. Mostly I will post backend tutorial in December only along with the DevOps concept to setup CICD microservices on the cloud platform for a production server. It will be a complete series from Scratch to the Production level. Stay tuned to my channel for more interesting topics.
github.com/codergogoi/Payment_Gateway_React_Native
@@codewithjay Ok, I will be looking forward to it!
Also, I have a simple question:
When you are testing and performing transactions in your simulator, are you really trasferring real money between bank accounts? Or is it some test mode?
I am doing on test Mode. Test Card Number is (4242 4242 4242 4242 12/21 123). Because you need to verify you identify along with Tax Details with Stripe to make live payment / Actual payment with your Physical Credit or Debit Card. Once your test mode is working perfectly you can switch you account to live mode which is giving you an additional security page after entered card details. It will handled by stripe itself inside browser.
Thanks and Stay tuned to my channel :)
please i'm trying to know if an app that implements it's payment feature through webview like the one in this video, would not be rejected when published as an ios app
Hi Kelechi,
Thank you for writing. It will always depend on type of application features. Example if you wish to collect payment against of monthly, Yearly subscription model or some features like membership, pro version, unlock some features then definitely this is not a right choice. In such case you should implement Apple or google inApp purchase model.
But in the tutorial we are representing the payment option for E-Commerce model only to products, like Clothing, Foods, Groceries, Flight, Hotel Tickets and other related products only. So this will fairly comply Apple or google payment policy.
I hope above information will you.
Cheers!
@@codewithjay Thanks for the information! I was looking a way to implement some premium functionalities for my app and now I have the ideas clear.
It is a great tutorial! I just want to ask that If I run it without test mode and I do payment from my app, then how the app holder will receive money?
Dear Abdul,
the payment system is certainly working in different way. First of all you need to verify your identity and tax information by submitting some documents and once it is approved you can switch to live mode. There is some settings on dashboard where you need to provide your bank account details and you can set the payout schedule for your transactions. It will deposit into the provided account after deduct payment gateway Share (some % of transactions). Different payment gateway has different rules :) I hope it will help you.
Thank you stay tuned to my channel for more updates.
@@codewithjay Thankyou Got It :)
do have an idea why I get an empty white screen when submit the form ? thanks
Make sure you're using your own private and public keys which are available on your stripe account. The key is used in the project is already deleted from the dashboard for security reasons.
Make sure you have set up the following.
Best way:
1. Create your own Stripe account get verified from Stripe
2. Setup your own backend server to handle transactions.
2. Switch to test mode your account
3. Use the test public key on app & use the secret key on Backend running on nodejs.
Here is the link of the backend: github.com/codergogoi/Payment_Gateway_React_Native
Once test mode is working perfectly. Switch your account to live mode and make sure you are changing the base URL accordingly.
Hope above will help you.
Cheers!
@@codewithjay I have got same error, I have change both keys but it give me blank screen after pressing submit button, lease help me out
Can you include payment gateway in the food delivery app you built?
Yes, we will add stripe on that. In coming episodes you can see that. Stay tuned to my channel for more updates.
hi, when i change the test key, to publishable key, the card cannot be viewed correctly. what is the problem? thanks!
Hey Buddy, Thank you for writing. You need to replace your live publishable key on the "PaymentView.js" file line number 6: const STRIPE_PK = 'pk_live_XXX.....your_key'. It can be solved using live key with the baseURL.
Make sure you have use the live secret key on server side also then only your payment will go through. Mismatch key is leading to error of initialization of sdk may behave white screen or card view will behave differently. Rest of all available on stripe documentation page.
Cheers!
@@codewithjay Hi, your video helped me a lot. But I'm also facing an issue with the live key. I'm not getting stripe elements like I was on the test and of course, the stripe is not working. Can you explain to me more about baseURL? Is there any way to run this using just the client side? Because BE doesn't support me with anything except this live key and API which I am calling after I get token from the stripe.
Sir, plz how to deploy app on digital ocean cloud hosting. Plz cloud hosting server setup tuotorials for new developers. What thing should be consider for before hosting app on server
Month of November I will post backend series where I will cover DevOps. Hopefully you can get a picture of all cloud tech setup and deploy products servers right there. Stay tuned to get updates.
Thanks
Stripe is not working on live mode can you tell me why ???
Hi AbdulWahab,
Thank you for writing to me. Seems your sentence is interrogating me! :)
I am just helping people spending some of my personal time. If you share the issue or logs maybe I can suggest possibly a best solution to get it done
Make sure you have set up the following.
1. Setup your own backend server to handle transactions.
2. Get approval from Stripe by verifying your identity and once verified your identity switch it to live mode.
3. Now use the live credential on both Client and Server where it is required as suggested on source code.
if you did the above and facing some trouble you can find the exact error code and reason on the stripe website.
you can check the below. If still, you are facing trouble drop an email (codergogoi@gmail.com) to me describing your issues and providing the logs.
stripe.com/docs/api
stripe.com/docs/error-codes
Cheers!
@@codewithjay thanks for reply
I am getting a network error. Any Solution?
Resolved it was because of localhost address error.
@@immadahmad7108 how you solve that ... kindly tell ....because I have same error
I get error 500 why ?
You need to setup your own backend for handle transactions and specifically use your own stripe account credentials to work for you. For both App & Backend, Otherwise you will not receive response. I have used temporary credential to show how it works which is already expired.
Best way:
1. Create your own Stripe account get verified from Stripe
2. Switch to test mode your account
3. Use the test public key on app & use the secret key on Backend running on nodejs. Here is the link of the backend:
github.com/codergogoi/Payment_Gateway_React_Native
4. Use test card to get success result
keep smile :)
:)@@codewithjay
Online food delivery part3
Coming weekend I will post next two episodes stay tuned to my channel for get updates.
Thanks