#zeroes_paymentelement-googlepay

1 messages · Page 1 of 1 (latest)

scenic jungleBOT
flat cargoBOT
#

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

scenic jungleBOT
#

👋 Welcome to your new thread!

⏲️ We'll be here soon! We typically respond in a few minutes, but in some cases we might need a bit more time (e.g., server's busy, you've got a complex question, etc.).

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1253480369853038722

📝 Have more to share? Add details, code, screenshots, videos, etc. below.

digital perch
#

@fluid vessel the error looks fairly descriptive here. You can't call this when the sheet is shown so you have to wait for the sheet to be dimissed first

#

zeroes_paymentelement-googlepay

fluid vessel
#

Hello, sorry to bother you again. i understand the description there, just wonder is there any way to dismiss the sheet?

digital perch
#

no you have no control over this

fluid vessel
#

the scenario is: when the form shows up, i select google pay and submit the payment, it will show a google pay popup window, at that point, i cancel the payment by close the popup window. then i try to update the amount, and then submit google pay again.

#

does it mean we can not do this scenario?

digital perch
#

You are asking how to dismiss the UI. But then you say you explicitly dismissed it by hand already so I'm confused and not following your train of thoughts sorry.

#

Do you have an example app I can look at so I understand the issue?

fluid vessel
#

yes, i am trying to do the screenshot and show you what i mean

#

at beginning i try to submit payment for 100

Screenshot_2024-06-20_at_3.56.06_PM.png
#

then this google pay popup window shows up with amount 100

Screenshot_2024-06-20_at_3.59.11_PM.png
#

at this point, i close this google pay popup window, so i didnt pay it

#

then i update the amount to 70

Screenshot_2024-06-20_at_3.59.50_PM.png
#

at this time, i can see the error message "IntegrationError: You cannot update Payment Request options while the payment sheet is showing." in console

#

and i submit the payment still

#

the google pay popup window shows 100 not 70

Screenshot_2024-06-20_at_4.01.32_PM.png
digital perch
#

at this time, i can see the error message "IntegrationError: You cannot update Payment Request options while the payment sheet is showing." in console
I mean once you get that error the rest doesn't matter right? At that point the browser told you "no you can't use that method" so it's normal the 70 never appears. What we need to figure out is why you get that error in the first place. Do you have a clear repro I can look at please?

fluid vessel
#

yeah, i understand at that point when i see the error, it will not update the amount.

#

do u mind that i share the related code here?

digital perch
#

No I would welcome it, the more crisp details you can provide in your questions the less back and forth we do 🙂

fluid vessel
#

const stripeOptions = {
mode: 'payment',
amount: parseFloat(store.get('amount'), 10) *100,
currency: business.get('base_currency').toLowerCase(),
paymentMethodCreation: 'manual'
};

<Dialog
className='stripe-payment-dialog'
title={ dialogHeading() }
size='small'
open={ store.get('open') }
onCancel={ onCancel }
data-role='stripe-payment-dialog'
>
{
store.get('open') &&
(
<Elements stripe={ stripeObj } options={ stripeOptions }>
<StripeElementsForm
account_id={ store.get('account_id') }
amount={ store.get('amount') }
contact={ store.get('contact') }
initial_amount={ store.get('initial_amount') }
invoice_id={ store.get('invoice_id') }
partial_payment={ store.get('partial_payment') }
public_key={ store.get('public_key') }
redirect_uri={ store.get('redirect_uri') }
saving={ store.get('saving') }
useHostedPaymentEndpoint={ store.get('useHostedPaymentEndpoint') }
/>
</Elements>
)
}
</Dialog>

digital perch
#

Where do you call the update?

scenic jungleBOT
#

🧑‍💻 How to format code on Discord

Inline code: wrap in single backticks (`)

This:

The variable `foo` contains the value `bar`.

Will turn into this:

The variable foo contains the value bar.

Code blocks: wrap in three backticks (```)

Also, you can specify the language after the first three backticks to get syntax highlighting.

This:

```javascript
function foo() {
return 'bar';
}
```

Will turn into this:

function foo() {
  return 'bar';
}```

Notes about **code blocks**:
- Specifying the language is optional (e.g., you can omit `javascript` in the example above)
  - If you don't specify the language you won't get syntax highlighting
- When you're inside a code block (after you type \`\`\`) the `Return`/`Enter` key will add a new line instead of sending your message
  - Once you end the code block `Return`/`Enter` works normally again

You can [read more about message formatting on Discord's website.](https://support.discord.com/hc/en-us/articles/210298617)
digital perch
#

Also ^ for next time to understand code formatting (no big deal the code was readable)

fluid vessel
#

const StripeElementsForm = (props) => {
const stripeObj = useStripe();
const elements = useElements();

const i18nScope = { scope: 'stripe_payment_dialog.labels' };
const buttonAmount = props.partial_payment ? props.amount : props.initial_amount;

useEffect(() => {
if (!elements) return;
console.log('amount update to: ', parseFloat(buttonAmount, 10) *100)
elements.update({ amount: parseFloat(buttonAmount, 10) *100 });
}, [buttonAmount]);

const addressElementOption = () => {
return {
mode: 'billing',
autocomplete: {mode: 'disabled'},
defaultValues: {
name: contactInfo('name'),
address: {
line1: contactInfo('address_one'),
line2: contactInfo('address_two'),
city: contactInfo('city'),
state: contactInfo('state'),
postal_code: contactInfo('postal_code'),
country: contactInfo('country') // required by stripe to show all default address values
}
}
};
};

const onSubmit = async (ev) => {
ev.preventDefault();
if (!stripeObj || !elements) {
return;
}
StripePaymentActions.updateValue('saving', true);

const { submitError } = await elements.submit();
if (submitError) {
  StripePaymentActions.updateValue('saving', false);
  return;
}
const {error, paymentMethod } = await stripeObj.createPaymentMethod({
  elements
});

if (error) {
  StripePaymentActions.updateValue('saving', false);
  AppActions.error(error.message);
  return;
}

StripePaymentActions.submitPayment(
  paymentMethod,
  buttonAmount,
  stripeObj
).catch((errorMsg) => {
  AppActions.error(errorMsg);
});

};

#

return (
<Form
id='stripe_payment_dialog_form'
className='stripe-payment-dialog__form'
data-role='stripe-payment-dialog-form'
saveText={ I18n.t('save_text', assign({}, i18nScope, { amount: formattedAmount })) }
saving={ props.saving }
cancel={ false }
onSubmit={ onSubmit }
>
{ submitProgress }
<AddressElement
id='stripe_address_element'
options={ addressElementOption() }
/>
<PartPaymentField
amount={ props.amount }
enabled={ props.partial_payment }
initialAmount={ props.initial_amount }
/>
<PaymentElement id='stripe_payment_element' />
</Form>
);
};

digital perch
#

what is that useEffect exactly? What is triggering it? Are you certain this is not triggered before the GooglePay UI is properly dismissed?

#

Here's what I have in my own code: <button id="increase_amount">Increase by $10</button>
This is a simple button in HTML in my UI. It lets me change the amount I want to show/charge for.

In my JS I have // Add a button to increase the amount document.querySelector("#increase_amount").addEventListener("click", (event) => { options.amount += 1000; elements.update(options); });
This lets me change my global variable with my options for Elements when I click the button.

What I can do is show the UI with $1, dismiss, click the button, show the UI with $11, dismiss, click the button, show the UI with $21, dismiss, etc.

fluid vessel
digital perch
#

Sorry I don't follow your train of thought again. My read is that the useEffect is likely called independently of the UI being dismissed and you're just calling it too early. Try my approach just to understand the behaviour and confirm it works as expected

fluid vessel
#

for elements update, is the format elements.update({ amount: 100}); good as well?

digital perch
#

I just repass the whole original options with a new amount personally but I just tried your version and it works fine too

fluid vessel
#

okay, thanks. i will try your approach and see how it works.