#quantum1125 - Google Pay Error
mighty dune
Hello! It sounds like paymentRequest is null when this code is being called. Can you share the code that's supposed to be creating the paymentRequest?
karmic ermine
the code is valid because the code that creates paymentRequest is able to call the method canMakePayment here which returns googlePay = true
paymentRequest.canMakePayment().then(result => {
console.log('canMakePayment checkGooglePay',result)
if (result) {
this.setState({ paymentRequest: paymentRequest, googlePay: result.googlePay })
console.log('valid result')
}
})
mighty dune
It sounds like the component is being rendered before the code above runs. I'm asking for the code that creates the paymentRequest. Can you share that?
karmic ermine
const paymentRequest = this.props.stripe.paymentRequest({
country: 'US',
currency: 'usd',
total: {
label: 'Product',
amount: Math.round(this.state.total * 100),
},
requestPayerName: true,
requestPayerEmail: true,
requestPayerPhone: true,
requestShipping: true,
shippingOptions: [
{
id: 'free-shipping',
label: 'Free shipping',
detail: '',
amount: 0,
},
],
}) ```Is that code being called before or after <PaymentRequestButtonElement> is first rendered?
karmic ermine
the code that generates paymentRequest is called inside of componentDidUpdate, but I don't load the button unless paymentRequest is non null via a ternary operator
{this.cartIsEmpty(this.props.cartDetails) || !this.state.paymentRequest ? null:
<button clickHandler={this.handleGooglePay.bind(this)}>
<PaymentRequestButtonElement options={{paymentRequest}} />
</button>
}```That's not the same code as you shared above. Why did you show double {{ around paymentRequest earlier but not here? Are these from two separate spots in your codebase?
karmic ermine
my bad, i used a typo. there are 2 curly braces. same place.
mighty dune
I don't understand why you have ? null at the end?
I'm not very familiar with React, so I might be missing something obvious.
karmic ermine
? marks the end of the expression. the first thing after the ? renders if the expression evaluates to true. if the expression evaluates to false, it renders what is after the colon
i was able to fix the error though, i tweaked the conditional logic
karmic ermine
im getting a super small google pay icon but i am unable to change its settings via css. does stripe have documentation to explain how to modify these properties?
mighty dune
The button will expand to fill the horizontal space available, and the height can be set using this property: https://stripe.com/docs/js/elements_object/create_element?type=paymentRequestButton#elements_create-options-style-height
karmic ermine
What tweak solved it?
before i sent the conditional rendering code earlier, I was requiring both non-empty cart and payment request to be valid but sometimes they would load separately so using the || operator was stricter than the & i was using
karmic ermine
The button will expand to fill the horizontal space available, and the height ca...
what's the syntax to directly make styling edits in the <PaymentRequestButtonElement options={{paymentRequest}} /> ?
stiff goblet
👋 I'm hopping in for @mighty dune - give me a minute to catch up!
karmic ermine
no problem, having trouble getting the google pay icon to fill the horizontal space, which should have been automatic
stiff goblet
I think you'd want something like
<PaymentRequestButtonElement options={{ paymentRequest: paymentRequest, style: { paymentRequestButton: { height: {{PUT_IN_VALUE}}, }, }, }} />
karmic ermine
i am able to access its height with this code
<PaymentRequestButtonElement
options={{paymentRequest,
style: {
paymentRequestButton: {
theme: 'light',
height: '30 px',
}
}}} />
but the width is not filling
stiff goblet
Hmm... that's very strange - is this something that you just have been testing locally or do you have a site that I can access where I can see the problem?
karmic ermine
im using ngrok locally to do this testing
stiff goblet
Can you share that link here?
karmic ermine
don't think so, let me double check though
karmic ermine
i can't share the link but i have another question - why would canMakePayment sometimes return null and sometimes return true for google pay?
high patio
Hello @karmic ermine I am taking over from here, let me catch up first!
Generally canMakePaymentindicates whether your environment is setup correctly to use Google Pay
karmic ermine
it only works sometimes it seems
high patio
You mean at the same device, same browser?
karmic ermine
correct, sometimes i need to clear cache, refresh multiple times
my main issue is that the google pay button does not fill the width of the container it is in
<button clickHandler={this.handleGooglePay.bind(this)}>
<PaymentRequestButtonElement
className="PaymentRequestButton"
options={{paymentRequest,
style: {
paymentRequestButton: {
theme: "light",
height: "64px",
type: "buy"
}
}}}
/>
</button>
Sorry what library is that? React or ReactNative?
high patio
Hi, feel free to open another thread if you come back