Update Subscription quantity on front end

[mark-chief]

Description

Hello, is it possible to update the subscription plan quantity dynamically from a number field? Without reloading the page

{{ craft.enupalstripe.paymentForm('leadersSeat', {quantity: number}) }}

I am loading the above line through ajax and updating the number there, but i keep getting :

[HTTP 404 – Not Found] – [yii\web\NotFoundHttpException](https://www.yiiframework.com/doc-2.0/yii-web-notfoundhttpexception.html)
Strong Customer Authentication is enabled on this site, this endpoint is disabled

Full code below:

                <input type="number" id="quantityInput" min="1" max="8" value="1">

                <!-- JavaScript to update the quantity parameter -->
                {% js %}
                // Example JavaScript using jQuery
                $(document).on('change', '#quantityInput', function() {
                    var updatedNumber = $(this).val();
                    var csrfToken = '{{ craft.app.request.getCsrfToken() }}';
                    $.ajax({
                        url: 'actions/leaders/leaders/loadcart',
                        method: 'GET',
                        data: { number: updatedNumber },
                        headers: {
                            'X-CSRF-Token': csrfToken // Include CSRF token in the headers
                        },
                        success: function(response) {
                            // Update parent template with received Twig template
                            $('#target-container').html(response);
                        },
                        error: function(xhr, status, error) {
                            console.error('Error:', error);
                        }
                    });
                });

                {% endjs %}

                <div id="target-container"></div>

_stripeCart.twig:

<div class="container">
    <p>The updated number is: {{ number }}</p>
    {{ craft.enupalstripe.paymentForm('leadersSeat', {quantity: number}) }}
</div>

Or is there a much easier way to do this?

thanks

Craft 4 Plugin version 5.5.1

[mark-chief]

Also just to note, the product sync doesn't update with my subscription plan (tier), just remains empty.

[mark-chief]

I have also tried this, but it returns a 404, i;m not 100 sure how to fomrat that jason and price/product.

                $(document).on('change', '#quantityInput', function() {
                    var updatedNumber = $(this).val();
                    var csrfToken = '{{ craft.app.request.getCsrfToken() }}';

                    var formData = {
                        "updates": {
                            "prod_PeNmrSJtZFGKf4": {
                                "quantity": updatedNumber
                            }
                        }
                    };

                    $.ajax({
                        type:"POST",
                        url:"enupal-stripe/cart/update",
                        data: formData,
                        dataType : 'json',
                        success: function(response) {
                            console.log(response);
                        }.bind(this),
                        error: function(xhr, status, err) {
                            console.error(xhr, status, err.toString());
                        }.bind(this)
                    });

                });

Thanks for your help.

[mark-chief]

@andrelopez hey, I dont suppose you have had time to help with this? Thank you in advance.

[andrelopez]

Hi @mark-chief

Sorry, there is no way to update the quantity of subscriptions on the Stripe Checkout page (as one-time payments).

So, you might have a couple of options:

1. Create a 2-step checkout workflow, where you first ask for the quantity of the product and then redirect to the final checkout page where you display the PaymentForm with the passed quantity.
2. Use the Cart API flow, here you will have a dynamic update of the quantity for products fully supported by JS. Besides the docs, you can also take a look to the video tutorial here

Please let me know if you have any questions