I have integrated Stripe payment in my ASP.NET MVC app. The checkout button works on desktop and redirects user to Stripe checkout page, but the button doesn't do anything on mobile.
I tried Edge and Chrome on iOS and both are not working.
This is my JavaScript in razor page (Cart.cshtml)
<div>
#using (Html.BeginForm("", "Cart", FormMethod.Post))
{
<input type="submit" id="stripe-checkout-button" value="Stripe" />
}
</div>
<script type="text/javascript">
var stripe = Stripe('MyStripePublishKey');
var checkoutButton = document.getElementById('stripe-checkout-button');
checkoutButton.addEventListener('click', function () {
fetch('https://mywebsite.com/Cart/Checkout_Stripe', {
method: 'POST'
})
.then(function(response) {
return response.json();
})
.then(function (session) {
return stripe.redirectToCheckout({ sessionId: session.id });
})
.then(function(result) {
if (result.error) {
alert(result.error.message);
}
})
.catch(function (error) {
window.location.href = "/Cart/GatewayRedirectFailed";
console.error('Error:', error);
});
});
</script>
The button does submit the form and there is no error. Also I have to mention, the client-side validation happens, because I have a agreement checkbox which is tagged as "required", and there is a pop-over for that checkbox, pressing the button only triggers that validation.
After getting help from Stripe support, they found I can make it work by updating my JavaScript as below:
<script type="text/javascript">
var stripe = Stripe('MyStripePublishKey');
var checkoutButton = document.getElementById('stripe-checkout-button');
checkoutButton.addEventListener('click', function (event) { -- adding event parameter
event.preventDefault(); <<-- this is the key to make it work!
fetch('https://mywebsite.com/Cart/Checkout_Stripe', {
method: 'POST'
})
.then(function(response) {
return response.json();
})
.then(function (session) {
return stripe.redirectToCheckout({ sessionId: session.id });
})
.then(function(result) {
if (result.error) {
alert(result.error.message);
}
})
.catch(function (error) {
window.location.href = "/Cart/GatewayRedirectFailed";
console.error('Error:', error);
});
});
</script>
Because my form does not have any action, looks like in iPhone browser it's not working.
Related
I would like to know if it's important to hide my stripe key in my javascript.
In fact, in my Symfony website, I put this key in my javascript to allow users to pay their orders.
And this is how I made that:
</footer>
</body>
<script src="https://kit.fontawesome.com/47f28c9d14.js" crossorigin="anonymous"></script>
<script type="text/javascript">
var stripe = Stripe("pk_live_....");
var checkoutButton = document.getElementById("checkout-button");
checkoutButton.addEventListener("click", function () {
fetch("/orders/create-session/154154154", {method: "POST"})
.then(function (response) { return response.json(); })
.then(function (session) { if (session.error == 'order')
{ window.location.replace('/orders'); } else { return stripe.redirectToCheckout({sessionId: session.id}); } })
.then(function (result) { if (result.error) { alert(result.error.message); } })
.catch(function(error) { console.error("Error:", error); }); });
</script>
</html>
But if you open console and check the source code you can see my stripe key...
Thanks
Yes, you can use the Stripe 'publishable' key in your client side app.
More information: https://stripe.com/docs/keys?locale=en-GB
I've built a contact form and I'm trying to get my user inputted values to post using axios so I then get an email with the data inputted by the user.
I keep getting undefined values in my emails being sent. My server side is fine, I'm not to worried about that. What's the best approach for this?
document.querySelector(".contact-btn").addEventListener("click", sendIt);
function sendIt(event) {
event.preventDefault();
axios
.post("https://us-central1-selexin-website.cloudfunctions.net/app/sendemail", {
name: "",
email: "",
number: "",
message: "",
})
.then((res) => {
console.log(res);
});
}
this might work, also you can re-read documentation on POST Request Axios Documentation
For Live view how it works you can check on CODEPEN
const form = document.querySelector("form")
const input = document.querySelector("input")
const submitUser = () => {
axios.post('https://us-central1-selexin-website.cloudfunctions.net/app/sendemail', {
firstName: input.value,
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
}
form.addEventListener("submit", (e) => {
submitUser()
e.preventDefault()
})
<form>
<input type="text">
<button type="submit">Submit</button>
</form>
So on my listPage, I have 2 documents, where I want to be able to click the edit button, and it takes me to the editPage. It does do that right now. but what I have it doing, is making the request through an axios.post, so that it sends the id of the document to the backend, and then sends the results to the front end, where it'll only display the one document according to it's id. here's what I have:
listPage:
const editById = (id) => {
console.log(id);
axios
.post(`/getDocToEdit`, { id: id })
.then(() => {
console.log(id, " worked");
window.location = "/admin/services/:site";
})
.catch((error) => {
// Handle the errors here
console.log(error);
});
};
then it hits this backend route:
app.post('/getDocToEdit', (req, res) => {
var id = req.body.id;
ServicesModel.findOne({_id: id}, function(err,result) {
console.log(result);
res.status(200).send(result)
});
})
then I am just trying to display the document on screen in my editPage, but it doesn't load the result that I am sending through res.status(200).send(result). I have just a table that is supposed to show the record. am I supposed to be doing a call from the front end again or something?
you should save post result in your frontend:
const editById = (id) => {
console.log(id);
axios
.post(`/getDocToEdit`, { id: id })
.then((RESPONSE) => {
console.log(RESPONSE); // do it and if you have the response, everything
is fine and you can use it as the returned data
console.log(id, " worked");
window.location = "/admin/services/:site";
})
.catch((error) => {
// Handle the errors here
console.log(error);
});
I am trying to write into Firestore using Javascript but it doesn't work although there is no error. I am using 7.14.1 version. This code ran properly on 7.9.1 so I don't know if this is the error.
<script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-auth.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-analytics.js"></script>
I try to console log before reading data, it works but the console log after reading data does not work.
function retriveid(){
fireauth.onAuthStateChanged(function(user) {
if (user) {
var user = fireauth.currentUser;
if (user != null) {
user.providerData.forEach(function () {
console.log("Firestore loaded");
const songname = document.getElementById('songname');
const singername = document.getElementById('singer');
const youtubelink = document.getElementById('ytlink');
const audiolink = document.getElementById('aulink')
console.log(categoryname.value, songname.value, singername.value, youtubelink.value, audiolink.value, user.uid);
firestore.collection("song").doc("Rock").set({
song_name: songname.value,
singer_name: singername.value,
youtube_link: youtubelink.value,
audio_link: audiolink.value
})
.then(function(){
console.log("Document successfully written!");
})
.catch(function(error){
console.error("Error writing document: ", error);
})
});
}
} else {
// No user is signed in.
console.log("not yet log in")
}
});
}
Hi Doug i have the same error, only you need modify the link in "...firebase-app.js" to "...firebase.js"
<script src="https://www.gstatic.com/firebasejs/7.14.1/firebase.js"></script>
the function ..listAll() works correctly. It will help you a lot, I had to consult several sources, i leave you an example:
storageRef = firebase.storage().ref('images/'+idReport);
storageRef.listAll().then(function(result) {
result.items.forEach(function(imageRef) {
// And finally display them
displayImage(imageRef);
});
}).catch(function(error) {
// Handle any errors
});
function displayImage(imageRef) {
imageRef.getDownloadURL().then(function(url) {
console.log("url", url);
}).catch(function(error) {
console.log("error", error);
});
}
I am building a React Native app, I previously implemented Facebook login using login Manager
export const onLogin = () => {
return (dispatch) => {
console.log('inside login');
dispatch({ type: ON_LOGIN });
LoginManager.logInWithReadPermissions(['public_profile',
'email']).then((res) => {
console.log(res);
MakeGraphRequest(dispatch);
},
(error) => {
console.log(error);
LoginFail(dispatch, error);
});
};
};
function MakeGraphRequest(dispatch) {
const responseInfoCallback = (error: ?Object, result: ?Object) => {
if (error) {
console.log(error);
LoginFail(dispatch, error);
} else {
axios({
method: 'post',
url: 'url',
data: {
first_name: result.first_name,
last_name: result.last_name,
profile_photo: result.picture.data.url,
email: result.email,
spend_history: []
}
}).then((res) => {
if (res.data.userid) {
const userid = res.data.userid;
LoginSuccessForUnregisteredUser(dispatch, result, userid);
} else {
LoginSuccess(dispatch, result);
}
});
}
};
const infoRequest = new GraphRequest(
'/me',
{
parameters: {
fields: {
string: 'email, first_name, last_name, picture.type(large), birthday'
}
}
},
responseInfoCallback
);
new GraphRequestManager().addRequest(infoRequest).start();
}
Also I've used Login Button and Expo Facebook login but I could not find a way to implement this kind of a login.
Should I use Login Manager or Login Button. The Facebook docs are valid for web only. Is there a way to integrate this in my RN(react native) project?
You already have the user data in the response. So you can just start your screen (like in the picture) and ask if the user really wants to sign in with this account. Only after that, call your LoginSuccess events. If the user doesn't want to login just dispose the result data.
.then((res) => {
if (res.data.userid) {
const userid = res.data.userid;
// add screen logic here
// LoginSuccessForUnregisteredUser(dispatch, result, userid);
} else {
// add screen logic here
// LoginSuccess(dispatch, result);
}
});
Same would go with the Facebook Login Button or AuthSession.
Using AsyncStorage to save/fetch the state and get wether he goes or goes not to the "continue as" screen.
try {
await AsyncStorage.setItem('#MySuperStore:key', 'I like to save it.');
} catch (error) {
// Error saving data
}
try {
const value = await AsyncStorage.getItem('#MySuperStore:key');
if (value !== null){
// We have data!!
// show "continue as" screen
console.log(value);
}
} catch (error) {
// Error retrieving data
}