#lucasgerroir-payment-request
vocal violet
Can you provide a request ID for the request that's returning null? Here's how you can find a request ID: https://support.stripe.com/questions/finding-the-id-for-an-api-request
loud raft
looking now
not seeing it in the request logs, what would the endpoint look like for canMakePayment
vocal violet
I'm not sure. Can you run a test transaction using paymentRequest.canMakePayment() and filter logs by GET to make sure you're seeing all logs?
loud raft
filtered by get and not seeing anything that would correspond to can make payment. In network the calls look like
https://r.stripe.com/0
https://play.google.com/log?format=json&hasfast=true&authuser=0
https://r.stripe.com/0
vocal violet
Are you able to send over all the relevant code that's producing the NULL return value?
Sorry to keep badgering for more info. It's just hard to debug GET requests
loud raft
yeah np
` async createPaymentRequestElement() {
const paymentRequest = this.stripe.paymentRequest({
country: 'US',
currency: 'usd',
total: {
label: 'Demo total',
amount: 1099,
},
requestPayerName: true,
requestPayerEmail: true,
});
const prButton = this.elements.create('paymentRequestButton', {
paymentRequest,
});
console.log(paymentRequest, 'paymentRequest');
// Check the availability of the Payment Request API first.
const check = await paymentRequest.canMakePayment();
if (check) {
prButton.mount('#payment-request-button');
}
paymentRequest.on('paymentmethod', (e) => {
console.log(e.paymentmethod, 'Payment Method');
});
},`
async loadStripe() { if (this.stripe) return this.stripe; return loadStripe(process.env.STRIPE_KEY); },
async createElements() { try { this.stripe = await this.loadStripe(); this.elements = this.stripe.elements({ // clientSecret: this.clientSecret, appearance: this.appearance, }); } catch (e) { this.$store.dispatch('alert', { message: 'Could not load stripe elements.', error: true, }); } },
vocal violet
I think it might be that the request is made asynchronously, but it's not being chain-loaded, so the if-block that takes check as an input is being executed before you get a response back from const check = await paymentRequest.canMakePayment();
Can you do:
const check = await paymentRequest.canMakePayment().then( function(result) { if (check): //Do the thing
});
loud raft
okay trying it out
const check = paymentRequest .canMakePayment() .then((res) => { console.log(res, 'res'); });
res is null
vocal violet
Hmmm, interesting. Let me see if I can repro on my end
loud raft
okay thank you
vocal violet
And you said that you are showing a Google Pay wallet show up in the browser that is making the request?
loud raft
when I go to the testing page which I assume runs the same code. It detects google pa
pay
but on localhost within out app I just keep getting null
vocal violet
And Google Pay is turned on for your account?
You can check via the Dashbaord by navigating to the gear icon in the top right ⚙️ and selecting "Payment Methods"
loud raft
oh okay checking
vocal violet
Also, make sure you're in the appropriate test-mode/live-mode view (there's a toggle at the top right to turn test-mode on/off)
loud raft
in test mode and I go to the /settings/payment_methods/connected_accounts
says apple pay and google turned on by default
also went to settings/payment_methods?platform_id=
and methods are turned on
vocal violet
And that's for both live and test modes?
loud raft
yeah
neat urchin
HI 👋 I'm stepping in for @vocal violet. Are you seeing any errors in the browser console?
Can you see the network requests to load pay.js from Google?
loud raft
but ah ya seeing
No UI will be shown. CanMakePayment and hasEnrolledInstrument will always return false. Show will be rejected with NotSupportedError.
SSL certificate is not valid. Security level: DANGEROUS.
neat urchin
On your localhost? That seems....odd
loud raft
yeah
neat urchin
Oh, wait...no that does make sense.
I forgot I had to tunnel my localhost so it was served through a valid HTTPS url to show Google Pay
loud raft
yeah I guess you used ngrok
neat urchin
Yup
neat urchin
Some parts of web dev are less fun than others but at least I hope we got you on the right track