Stripe Checkout Loading Indicator Does Not Go Away - javascript

I am using Stripe's custom integration, I know in their example they are adding an event listener, but in my javascript code I am skipping that, not sure if that is why the loading indicator never goes away when someone closes out of it.
Here is my code:
var handler = StripeCheckout.configure({
key: 'tests',
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
locale: 'auto',
token: function(token) {
// You can access the token ID with `token.id`.
// Get the token ID to your server-side code for use.
},
closed: function() {
// Close Checkout on page navigation:
closehandler();
}
});
handler.open({
name: 'Jungle Exchange',
description: 'Get your Amazon On!',
amount: amount
});
function closehandler() {
handler.close();
}
When clicking on the x for the modal, the loading icon does not disappear from the center of the screen and overlays everything. Any thoughts?
Thanks!

That seems unexpected! I'd recommend writing into Stripe support with the exact URL with this happened and different things you've tried, as well as any errors in your Web Inspector console.
https://support.stripe.com/email/login

Related

Click method is not clicking the intended web element rather application logs out

I am trying to navigate to a screen and have created an automation script in Cypress using Javascript for the same. Following is the code -
describe("Login Test",function(){
it("Sign In", function(){
cy.visit("abc.com/login")
cy.get('input[id = userName]').type('admin')
cy.get('input[id = userPassword]').type('P#ssword01')
cy.get('.btn-primary').should('be.visible').click()
cy.contains('Home', { timeout: 10000 }).should('be.visible')
})
it("User Management Test", function(){
cy.get('a[id = settings]').click()
cy.contains('User Management').click({force:true},{timeout : 3000})
cy.contains('Manage Users').should('be.visible')
})
})
login test case works fine. I am able to click on 'Settings' option. When I try to click on 'User Management' sub-menu option in settings drop-down it does not work. I am adding application screenshot and dom.
HTML of application
Application screen
Cypress runner - before
2
Cypress runner - after
If you see carefully click method is not clicking on 'User Management', rather 'User Management' disappears and cypress clicks on screen below it and eventually application logs out without hitting log out link/button. I have tried multiple ways for example -
cy.contains('User Management').click({force:true},{timeout : 3000})
OR
cy.contains('User Management').click({force:true})
OR
cy.contains('User Management').click()
OR
cy.contains('User Management').should('be.visible').click()
OR
cy.contains('User Management').wait(3000).click()
I request cypress community to please have a look and help me resolve this issue. Thanks
You can install the cypress-real-events. And then add import "cypress-real-events/support"; under cypress/support/index.js. And in your test you can:
it('User Management Test', function () {
cy.get('a[id = settings]').realHover()
cy.contains('User Management').realClick()
cy.contains('Manage Users').should('be.visible')
})
The href of the 'User Management' menu item is /posadmin/tigerge1/users and that appears well down in the log. Perhaps you should wait for it
it("User Management Test", function() {
cy.intercept('POST', '**/posadmin/tigerge1/users/*').as('userManagement')
cy.get('a[id = settings]').click()
cy.contains('User Management').click({force:true})
cy.wait('#userManagement')
cy.contains('Manage Users', {timeout: 10000}) // put the timeout here
.should('be.visible') // and decrease it if it works
})
The other thing to check is the preceding part of that route. It shows /api/auth/login, but is that correct? You should be navigating on the main site when the link is clicked.
Run the steps manually in the browser and see if the same URL's come up on the network tab.
If not, then it seems like the login is not succeeding.
Try this, We are trying to invoke the dropdown to show without even clicking the settings link.
it("User Management Test", function(){
cy.get('div[id = settings-dropdown]').invoke('show')
cy.contains('a','User Management').click({force:true},{timeout : 3000})
cy.contains('Manage Users').should('be.visible')
})

Stripe Javascript library confirmCardPayment not returning

I'm attempting to use Stripe as a payment method, on an ASP.Net MVC project
We've gone the route of using stripe elements to define our own look and feel for the card details.
I've followed the tutorials, and have managed to get the card widgit displaying nicely.
Where it fails is on the submission.
I've hooked up the following JS to the button (taken straight from the guides)
var form = document.getElementById('payment-form');
var clientSecret = $("#authcode").val();
form.addEventListener('submit', function(ev) {
ev.preventDefault();
stripe.confirmCardPayment(clientSecret, {
payment_method: {
card: card,
billing_details: {
name: 'Jenny Rosen'
}
}
}).then(function(result) {
if (result.error) {
// Show error to your customer (e.g., insufficient funds)
console.log(result.error.message);
} else {
// The payment has been processed!
if (result.paymentIntent.status === 'succeeded') {
// Show a success message to your customer
// There's a risk of the customer closing the window before callback
// execution. Set up a webhook or plugin to listen for the
// payment_intent.succeeded event that handles any business critical
// post-payment actions.
}
}
});
});
Now when I put a breakpoint on it does enter the stripe.confirmCardPayment function
However I never get a response. I've put a break point on the line if (result.error) { but it never fires. I've sat and left it for over two minutes.
No errors in the chrome console, and also no network traffic.
I am happy that the JS is all loaded correctly because if I hit submit again the Stripe JS lib correctly tells me I have an in-flight confirmCardPayment
Any suggestions are most appreciated.
Looks you are using jQuery at:
var clientSecret = $("#authcode").val();
You should wrap js with
$(document).ready(function(){
....
}):
Right, I've finally got it working.
Yes I believe with the answers given by Nolan / Raphael that it was indeed a caching issue!
However. Deleting the cache with CTRL+SHIFT+DEL had no effect.
Only way I could get the cache to clear was to physically alter the JS.
Thanks again to Nolan / Raphael for their suggestions :)

Image not displaying using cordova-plugin-local-notifications attachment property

I am new with Cordova android development and looking to create a very simple app to show what is the latest movies and show the banner of the movie to users my code is below, the notification is showing but it's not displaying the banner. my image is saved inside the www/img folder
cordova.plugins.notification.local.schedule({
id: 1,
title: 'My first notification',
text: 'Thats pretty easy...',
attachments: ['file://img/logo.png'],
foreground: true,
vibrate: true
});
Here is my file path
Below is an example of what I want to achieve, any suggestion would be great.
How does your push notification look like and take a look of the name of the file and its extension, not that the file is named Logo.jpg and you write logo.jpg. Android is linuxbased and this can cause errors.
my try to build it with your code, the pure push is without image, after clicking pull it from above, it will show the image like that:
My Code is a simple one in index.js:
// deviceready Event Handler
//
// Bind any cordova events here. Common events are:
// 'pause', 'resume', etc.
onDeviceReady: function() {
cordova.plugins.notification.local.schedule({
id: 1,
title: 'My first notification',
text: 'Thats pretty easy...',
attachments: ['file://img/logo.png'],
foreground: true,
vibrate: true
});
}
The Push Message out of the App
Look at this Gif to see the image (i know, the quality is horrible):

Google OAuth via gapi.signin2.render button not hitting callbacks in react app

I have the Google Signin Button properly rendering inside my react component using the gapi.signin2.render method on the latest Google platform web-client api (https://apis.google.com/js/platform.js).
But, for the life of me, I can't get it to properly call my success or failure callbacks.
The button renders, clicking the button opens the account auth window, clicking a Google account closes the window, but no callback.
function myCallback(obj) {
console.log(obj);
}
gapi.signin2.render('my-signin2', {
scope: 'https://www.googleapis.com/auth/plus.login',
width: 200,
height: 50,
longtitle: true,
theme: 'dark',
onsuccess: myCallback,
onfailure: myCallback
});
I have no clue what I'm missing here. Any help is much appreciated!
The docs tell you to add this:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
But that won't work with React. I found that removing data-onsuccess and class (className) from the div did the trick. So if you have something like this:
useEffect(() => {
window.gapi.signin2.render('gs2', {
'scope': 'https://www.googleapis.com/auth/plus.login',
'width': 200,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': onGoogleSignIn
});
}, []);
const onGoogleSignIn = user => {
console.log('user', user);
}
then your jsx for the google button can simply be this:
<div id="gs2"></div>
note that I removed the class and added id because gapi.signin2.render is looking for an id.
The caveat is that now you lose the styling. Unfortunately, addingclassName="g-signin2" back to the div actually breaks the callbacks.
When you created your client ID you set your url to , let us say 'localhost'. Now you running you code on, let us say 'localhost:8080'.
your 'myCallback' is not running because there is no data coming back from google api, the data is sent to the trusted url that you specified which is 'localhost'.
The idea is simple, the request can come from anywhere, but google api is sending the data to your trusted url as a security step, if the request is coming from there you get it, if it is not someone is trying to hack using your client ID.

Windows Live API connexion issue

I'm trying to get a user's contact through Windows Live js API. I've read the official documentation, but I'm having trouble performing a simple connexion.
Here is what I've made :
WL.init({
client_id: 'myclientId',
redirect_uri: 'http://www.salezeotest.lan',
});
function signInUser() {
WL.login({
scope: ["wl.signin", "wl.basic", "wl.birthday", "wl.emails"]
}).then(
function(response)
{
console.log("logedin");
},
function(responseFailed)
{
console.debug(responseFailed);
console.log('error');
}
);
}
The 'signInUser' function is trigerred after a button click. What's happening is that when I click on it, I get the live popup to enter my credentials, and allow my application to access the stuff I put in the 'scope'.
Then, I click the 'yes' button to allow access, and I get redirected to my redirectURI inside a popup (I can see the access token in the url). But nothing happens then, the console doesn't log anything untill I close the popup, then I get this message :
[WL]WL.login: The popup is closed without receiving consent.
I'm testing this locally, and I've already tweaked my host file.
Any thoughts?!
Found my problem, didn't pay attention that my redirectURI wasn't the same as the page that requested loggin.

Categories