Event Payment - Free but with VIP payment option

[Mstall]

I holding an online marketing masterclass and my website is built on the Yoga template if that helps. I’ve used their existing form for my free events but Now I want to add Free with a $47 VIP option.

I see on the template that they already had a form with a dropdown for free or payment. Here’s that page: Hatha Yoga Training Festival 2

I tested out the Free option and got an error message: “Payment error! Details: Free payment cannot be proceeded with amount not being 0.” Which is great, but I’m not a programmer and I don’t know how to fix it.

My page is here: Marketing Masterclass - Uncover and Eliminate Your Marketing Roadblocks

I did figure out how to modify the existing form for a totally free class but I don’t know how to make the Free or Payment option work. I like to use one form for this because it’s better usability.

I saw on the Forum in my search to figure this out that someone asked a similar question. However, they just said they used java script but didn’t mention the actual script.

Any help and assistance is greatly appreciated. Thanks!

[Adam.Wilson]

Hi @Mstall

This can depend on how everything is set up. But assuming the Event has no price assigned and you are just manually assigning the $47 in the form, here is a possible solution:

Firstly, you’d need to add the payment amount field to your form (either hidden or visible):

<input type="hidden" name="Payment_Amount" readonly value="0">

And also the payment fields.

Let’s assume you include a dropdown in your form to select free tickets or VIP, like this:

<select id="BookingType" name="BookingType">
    <option value="Free">Free</option>
    <option value="VIP">VIP</option>
</select>

Using jQuery to listen for a change on that input and set the price field accordingly and change the free/credit card dropdown automatically:
(and probably trigger a change on the allocation/quantity field… more on that below)

<script>
$('#BookingType').on('change', function () {
    var selectVal = $(this).val();
    if ( selectVal === 'VIP' ) {
        $('input[name="Payment_Amount"]').val('47');
        $('[name="Payment_Type"]').val('Free').change();
    } else {
        $('input[name="Payment_Amount"]').val('0');
        $('[name="Payment_Type"]').val('CreditCard').change();
    }
    $('input[name="Payment_ItemQuantity"]').change(); <!-- should trigger Treepls javascript to calculate price x quantity to set the total cost -->
});
</script>

Now, if you are needing VIPs to also set number of tickets (and this is to book the allocation on the Event), then your ticket dropdown should probably have a NAME value of Payment_ItemQuantity, ie:

<select name="Payment_ItemQuantity" data-trp_quantity="1" class="form-control">
    <option value="1">1 Ticket</option>
    <option value="2">2 Tickets</option>
    <option value="3">3 Tickets</option>
    <option value="4">4 Tickets</option>
</select>

There may be other factors I’m missing here and I haven’t tested this code, so see how you go and let us know if there are any issues.

[Mstall]

Awesome! Thank you! I’ll work with you tomorrow and will definitely let you know. Thanks so very much! I greatly appreciate it.

[Mstall]

This is driving me crazy. The Yoga class (link above) is using the Detail template that has the code to pull up the booking form. I changed my Marketing Class to that template but it doesn’t work. I then duplicated the booking form and duplicated the Detail layout so that I could make changes. I save everything and make sure the layout code brings up the new form. But the form on the marketing page NEVER changes. Then I thought I would pull it up in Safari because Chrome can be a pain sometimes. In Safari it is still showing the original form when I click on Book now. I can send you the code to each or whatever you need but I don’t know what else to do> I went line by line comparing the Yoga and Marketing class. I even changed a word within the layout code to make sure that I had the right one. The word changed but it still doesn’t bring up the right form. I could really use your help. THANK YOU!!

[Mstall]

UPDATE! I decided to try something. I just duplicated the Yoga Event and changed the content including the price. Right now I just set the price to $1.00 to test it out. The payment went through! Yippee. It’s not the prettiest form, but at least it works.
However – the Free selection does NOT work.

The free payment cannot be proceeded with the amount not being 0. So I’m guessing I need a line of code in the form that fixes it. I’m not sure what it needs to be other than zero and still work. Here’s the payment form code:

Credit Card Free Payment

    </select>
</div>
{% component type:"payment_form_fields", formAlias:"{{this.alias}}" %}
<input type="hidden" name="Payment_ModuleItemId" value="{{this.moduleItemId}}"/>
<label for="Payment_Amount"><strong>Total Amount: </strong></label>
<input type="text" disabled="disabled" id="Payment_Amount" class='mt-2' name="Payment_Amount" value="{{this.paymentAmount}}"/>
{% if request.request_data.is_mobile == 1 %}
<div class="captcha-holder">
	<div class="g-recaptcha" data-size="compact" data-sitekey="{{this.recaptcha_sitekey}}"></div>
</div>
{% else %}
<div class="captcha-holder">
	<div class="g-recaptcha" data-sitekey="{{this.recaptcha_sitekey}}"></div>
</div>
{% endif %}
<button type="submit" class="btn btn-primary">Book now</button>

Thanks again for your help. If you can show me what to change so that I can the the form to work I would greatly appreciate it. THANK YOU!!

[Adam.Wilson]

When you change the payment type dropdown to ‘Free’ you need to reset the price to zero both in the input field value and on a data attribute.

This will hopefully work when added to your Form layout:

<script>
$('[name="Payment_Type"]').on('change', function () {
    var selectVal = $(this).val();
    if ( selectVal === 'Free' ) {
        $('input[name="Payment_Amount"]').val('0').attr('data-total_price', '0').change();
    } else {
        $('input[name="Payment_Amount"]').val('{{this.paymentAmount}}').attr('data-total_price', '{{this.paymentAmount}}').change();
    }
});
</script>

[Mstall]

I really appreciate your help. I added the code by copy and paste. I wasn’t sure where to put it so I tried different places. Nothing worked.

There is also code in the Events - Detail page layout. Does that matter?

Masterclass

Cost: {% if this['Price'] != 0 %} ${{this['Price']}} {% else %} Free with Registration {% endif %}

            {% if this['Price'] != 0 %}
                {% component type: "form", alias: "booking_form", eventId: "{{this['id']}}" %}
            {% else %}
                {% component type: "form", alias: "booking_form_free", eventId: "{{this['id']}}" %}
            {% endif %}
        </div>

PLUS-- Now I know I messed up something because the Book Now Button is missing after I added my information on the form.
I’ve been going line by line to see what I accidently deleted but I can’t find it. Here’s the form code:

<div class="form-group list">
    <select id="Payment_Type" name="Payment_Type" placeholder="Choose Payment Type" class="form-control">
    <option value="CreditCard">Credit Card</option>
    <option value="Free">Free Payment</option>
    
    </select>
    <script>

$(‘[name=“Payment_Type”]’).on(‘change’, function () {
var selectVal = $(this).val();
if ( selectVal === ‘Free’ ) {
$(‘input[name=“Payment_Amount”]’).val(‘0’).attr(‘data-total_price’, ‘0’).change();
} else {
$(‘input[name=“Payment_Amount”]’).val(‘{{this.paymentAmount}}’).attr(‘data-total_price’, ‘{{this.paymentAmount}}’).change();
}
});

</div>
{% component type:"payment_form_fields", formAlias:"{{this.alias}}" %}
<input type="hidden" name="Payment_ModuleItemId" value="{{this.moduleItemId}}"/>
<label for="Payment_Amount"><strong>Total Amount: </strong></label>
<input type="text" disabled="disabled" id="Payment_Amount" class='mt-2' name="Payment_Amount" value="{{this.paymentAmount}}"/>
<div class="captcha-holder">
	<div class="g-recaptcha" data-size="compact" data-sitekey="{{this.recaptcha_sitekey}}"></div>
</div>
{% else %}
<div class="captcha-holder">
	<div class="g-recaptcha" data-sitekey="{{this.recaptcha_sitekey}}"></div>
</div>
{% endif %}
<button type="submit" class="btn btn-primary">Book now</button>

[Mstall]

I’m not able to post the entire code for the form. I took a screen shot.

Thanks

[Mstall]

Also, here’s the screenshot when I try to complete the Free version of the checkout form.THe Submit button vanished

[Mstall]

[Adam.Wilson]

From your screenshot it looks like there is broken Liquid code.
There should be some opening IF condition to display the 2 different reCAPTCHAs but it’s missing.
But this is not really needed so for now, just delete the highlighted section below completely:

Also, if you can post a link to your Event page where this form is rendered, that will help too.

[Mstall]

Thanks, I deleted the code you highlighted. The Book Now button came back.THANK YOU! Here’s the link to the page. Event Page

Where do I put the code to correct the error for the Free registration? THANK YOU so very much.

[Adam.Wilson]

You can add the script at the bottom of the paid form’s layout.

However, as mentioned at the start of this thread, this assumes your Event does not have a price assigned to it and you are just setting the price in the code manually (arbitrary payment).
Because I’m pretty sure you can’t take a payment of any other value for an Event that has a price attached (unless you are using a discount code).
Based on your code above, it looks like you are getting the price from the Event itself.

But give this a try anyway to see if you can get the script working and then we can look at the pricing issue if it won’t allow a different amount (eg: $0) to be taken for the Event.

[Mstall]

I put the code at the bottom of the form layout. It did not work.
Yes, I added the price on the Event module. Would using a discount code be better for the free version? I don’t see an option in the Event module for a discount code other than a volume discount. I see a place for a Wholesale price which is at 0. I don’t know how to make it have a price other than how Treepl’s modules and templates are set up. Another option would be to sell the Free course for $10.00 and then the VIP for $47.00. Would that be better than figuring this out? If so, how do I do that? I don’t see a field or option to do multiple pricing or sell prices that would help.

I don’t have to do it exactly like the yoga template has it set up I just thought it worked well for what I am trying to do and since it’s already made I thought it would work. Thanks for all of your help.

[Adam.Wilson]

The script you’ve added to set the price to zero is working. It’s the price set on the Event that is the issue.

Let’s make some changes:

1. In your Event, under the “Prices” tab, delete the price completely.
2. Where you are adding the Form tag, set the price manually like this:
   {% component type: "form", alias: "booking_form", eventId: "{{this['id']}}", price: "19.99" %}
   (ensure the form alias, event ID and price are correct for your setup)
3. Anywhere in your Form layout, replace {{this.paymentAmount}} with {{this.params.price}}
   (this will appear in several places, including the script I provided earlier)

This should work for your individual Event setup.
If you have multiple events with different pricing and want this to be more dynamic, you could add a custom field in the Event module for the pricing and pull the price in that way.