Avinash Jain - Apple Pay | Stripe Developers | Page 1

broken parrot Jan 10, 2022, 5:01 PM

#

Hello! Can you provide more details? Can you share the code that's throwing the error?

golden maple Jan 10, 2022, 5:32 PM

#

Hi Rubeus, yes so i had created paymentRequest on the Mounting phase of the component as shows below

📎 test.js

#

so when i am calling paymentRequest.on i am getting an warning as Unsupported prop change: options.paymentRequest is not a mutable property. also it is not working as expected as it is not working.
Basically i am looking for a way how should we approach or what is the ideal way of using payment request,

broken parrot Jan 10, 2022, 5:37 PM

#

I'm not a React developer, but we do have a Payment Request Button guide with React code here: https://stripe.com/docs/stripe-js/elements/payment-request-button?html-or-react=react

golden maple Jan 10, 2022, 5:49 PM

#

But can you please guide/help me with the ideal way or approch one should have while using the paymentRequest like it shoule be handled on the mounting phase only or there is any way in which one can update/modify it.
because it is not mentioned in the documentation

broken parrot Jan 10, 2022, 5:53 PM

#

Asking for help internally as I don't know React, hang on... 🙂

#

One thing we noticed was this line of code looks like a bad copy/paste:

paymentRequest.on('paymentmethod', async (ev) => {next actions (yet).

Is that the code that's actually being run?

next nexus Jan 10, 2022, 7:58 PM

#

@golden maple It's been a couple of hours since we've heard from you so we're archiving this thread. If you have any follow-up questions let us know in the main channel and we can reopen this thread

high citrus Jan 11, 2022, 5:30 AM

#

Hi @golden maple I have unarchive this thread

golden maple Jan 11, 2022, 5:34 AM

#

thank you jack

#

I have attached the updated code, now can you please guide me further, thank you

📎 test.js

high citrus Jan 11, 2022, 5:42 AM

#

Hi, please give a min to read through the thread

golden maple Jan 11, 2022, 5:45 AM

#

yes sure jack

high citrus Jan 11, 2022, 5:47 AM

#

<PaymentRequestButtonElement options={options} -> where do you create the options object?

golden maple Jan 11, 2022, 5:52 AM

#

created options object before the useEffect as
var options = {
paymentRequest,
style: {
paymentRequestButton: {
type: "default",
theme: props.requestFrom === "phone" ? "light" : "dark"
}
}
};

high citrus Jan 11, 2022, 6:20 AM

#

Could you please send me the full code so that I can try to reproduce the problem?

golden maple Jan 11, 2022, 6:52 AM

#

okay

#

please find the attached code, it is an component we had imported this component to the page where we are doing the checkout process(where we are managing all the states required by the component as props)

📎 test_full_code.js

high citrus Jan 11, 2022, 7:10 AM

#

Hi @golden maple when is updateCart called in your code? was it called before or after the payment interface is shown?

golden maple Jan 11, 2022, 7:31 AM

#

it is called after the change in the cart and as soon as it updates the payment interface will be re-rendered

high citrus Jan 11, 2022, 7:33 AM

#

https://stripe.com/docs/js/payment_request/update according to the doc -> paymentRequest.update can only be called when the browser payment interface is not showing. maybe you wan to make sure that you only update the paymentRequest when the interface is not showing?

Stripe JS Reference

golden maple Jan 11, 2022, 7:38 AM

#

But in my case we are having the cart page included with the payment page so on that page i need to show the payment interface as well on the page and as cart is there user can update that too, but beside that the problem is occurring in the line of code shown
paymentRequest.on('paymentmethod', async (ev) => {})

high citrus Jan 11, 2022, 7:40 AM

#

Can you comment out line 24 (i.e., setPaymentRequest(updatedPr);) and see if you still get the error?

golden maple Jan 11, 2022, 7:52 AM

#

Sure let me check

golden maple Jan 11, 2022, 8:17 AM

#

Same error @high citrus nothing has changed after commenting the setPaymentRequest(updatedPr); error is as Unsupported prop change: options.paymentRequest is not a mutable property.

high citrus Jan 11, 2022, 8:24 AM

#

can you use const options instead of var options?

#

line 30

golden maple Jan 11, 2022, 8:25 AM

#

sure let me check

#

It has not helped same error @high citrus it stucks on the paymentRequest.on('paymentmethod', async (ev) => {}) i think there is the problem

high citrus Jan 11, 2022, 8:31 AM

#

Hmm. according to the error message, the option.paymentRequest is changed. so either it's caused by the setPaymentRequest in line 24, or whole options object is changed outside ApplePay because options is declared as var

golden maple Jan 11, 2022, 8:39 AM

#

i had tried changing the var to const and it still persist so i think that cab be eliminated here, and since we have removed setPaymentRequest(updatedPr); on cart change so i think now it should work but it is not working,
so can you help me with one thing please like what should be the approach while implementing the payment request(it should all be done on the mounting phase) or any other way we can use it using the state for the payment request, because that is not mentioned in the documentation.

high citrus Jan 11, 2022, 8:44 AM

#

I think I know the root cause

#

basically the option object will be changed in every render

#

so instead of creating a option object, consider using inline option

#

      paymentRequest,
      style: {
        paymentRequestButton: {
          type: "default",
          theme: props.requestFrom === "phone" ? "light" : "dark"
        }
      }
    }}
}```

#

Can you change the code to something like this?

golden maple Jan 11, 2022, 8:56 AM

#

okay sure i will try this

#

No it has not made any changes in the error @high citrus

high citrus Jan 11, 2022, 9:24 AM

#

@golden maple my shift is ending. I'll keep this thread open so that my colleague can continue supporting you.

#Avinash Jain - Apple Pay