Memberstack NextJS Stripe prorate

Post author
Hedito SAS

Hi,
I am having issue with the prorate plan with NextJS and Memberstack. I am adding the correct attribute in the html code but I am still redirected to Stripe payment without the prorate.

React.useEffect(() => {
const handleLoad = () => {
const priceElement = document.querySelector('#price-element');
if (priceElement) {
priceElement.setAttribute('data-ms-price:update', 'prc_pro-yearly-763ea0rp5');
} else {
console.log('priceElement not found');
}
}; if (document.readyState === 'complete') {
handleLoad();
} else {
window.addEventListener('load', handleLoad);
} return () => {
window.removeEventListener('load', handleLoad);
};
}, []); const handleClick = (e: any) => {
e.preventDefault()
checkout({ priceId: 'prc_pro-yearly-763ea0rp5' })
} return ( <div >
<h1>Test upgrading</h1>
<button
id="price-element"
onClick={handleClick}
>
Pay now</button>
</div>
);

Any ideas, what I am doing wrong ?

Comments

2 comments

  • Comment author
    Josh Lopez

    Hey Hedito SAS

    Thank you for posting. If I understand your problem correctly I think you are having trouble because you are trying to use data attributes with the react package. The only package that has data attributes is the webflow package. Instead, you would need to use the DOM package. The react package is a wrapper around the DOM package that adds react components and the webflow package is a wrapper around the DOM package that adds data attributes.

    0
  • Comment author
    Hedito SAS

    Hey Josh,

    Thanks for your reply.
    I checked the DOM Package and I cannot see any function to upgrade a plan (stripe subscription) with the prorate. I only a function name <purchasePlanWithCheckout> and I am don't see parameters to actually upgrade an existing plan.  Can you confirm this Package is enough to upgrade and existing plan ?

    Thanks
    Nicolas

    0

Please sign in to leave a comment.