I’ve used the custom code block to write code for a billing page. The objective is for the user to be required to click the checkbox before they are able to click on the ‘subscribe’ button which would navigate them to a payment portal. However, currently ticking the checkbox isn’t unlocking the button. Some help on where the issue is within the code would be really appreciated! The code is as follows:
<script src=**redacted**></script>
<script type="text/javascript">
Paddle.Setup({
token: **redacted** // replace with a client-side token
});
//Paddle.Environment.set("sandbox"); // needs Sandbox token above set
/* PRICE IDs */
const priceIdAnnualSubscription = "*redacted*"
const testSub = "*redacted*"
// Load User ID and EMAIL
const symbaiosysUserId = window['logged_in_user']['airtable_record_id']
const symbaiosysUserEmail = window['logged_in_user']['EMAIL']
function startCheckoutAnnual () {
Paddle.Checkout.open({
//settings: {
// theme: "light",
//},
items: [
{
priceId: priceIdAnnualSubscription,
quantity: 1
},
],
customData: {
symbaiosysUserId: symbaiosysUserId,
symbaiosysUserEmail: symbaiosysUserEmail
},
customer: {
email: symbaiosysUserEmail,
//address: {
// countryCode: "US",
// }
}
});
}
function startCheckoutProfile () {
Paddle.Checkout.open({
//settings: {
// theme: "light",
//},
items: [
{
priceId: priceIdDetailProfile,
quantity: 1
},
],
customData: {
symbaiosysUserId: symbaiosysUserId,
symbaiosysUserEmail: symbaiosysUserEmail
},
customer: {
email: symbaiosysUserEmail,
//address: {
// countryCode: "US",
// }
}
});
}
</script>
<style>
#billing-container .container {
background-color: #ffffff;
color: #000000;
font-family: Montserrat, "Nunito", sans-serif;
width: 100%;
border-radius: 7px;
padding: 5%;
margin: 1% auto;
}
#billing-container .flex {
display: flex;
justify-content: space-around;
}
#billing-container .flex2 {
border-right: 0.1px solid rgba(178, 170, 171, 0.185);
}
#billing-container .flex_content {
padding: 5% 7%;
flex: 1;
}
#billing-container .flex_content h2 {
font-weight: 600;
}
#billing-container .flex_content h4 {
font-weight: 400;
}
.flex_content span {
font-weight: 200;
}
.flex_content h4 {
margin: 0;
}
.flex_content ul {
padding-inline-start: 7%;
margin: 10% 0 5% 0;
}
.flex_content ul li {
font-weight: 200;
}
.flex_content button {
outline: none;
border: none;
background: #38695F;
color: #ffffff;
width: 100%;
height: 50px;
border-radius: 5px;
font-family: "Nunito", sans-serif;
cursor: pointer;
}
.flex_content:nth-of-type(1) button {
background: #38695F;
border: none;
color: #ffffff;
}
.title {
text-align: center;
}
@media screen and (max-width: 540px) {
.flex {
flex-direction: column;
}
.flex2 {
border: none;
}
}
#billing-container button:disabled {
pointer-events: none;
Opacity: 0.5;
cursor: not-allowed;
}
</style>
<div class="title">
<h1>Product Pricing</h1>
</div>
<div id="billing-container">
<div class="container flex">
<div class="flex_content">
<h2>Annual Pilot Subscription</h2>
<h5>A comprehensive solution for institutional investors navigating climate transition.</h5>
<h1>$3000/year</h1>
<ul>
<li>Investment Database: Simplify nature-based solutions deal sourcing with a global database of pre-screened projects across over 70 ecosystem types. Access ~200 data points for financial, environmental, and social analysis aligned with U.N. and IUCN criteria.</li>
<li>Nature Analytics: Explore a Nature-based Solutions Scenario tool aligning over 30 climate risks and opportunities with TCFD. Evaluate over 70 ecosystem types' potential to mitigate risks and generate opportunities with filtering options.</li>
<li>Knowledge Library: Access a searchable indexed database of peer-reviewed studies and grey literature connecting over 70 ecosystem types to over 30 climate risks and opportunities.</li>
<li>Natural Capital Calculator: Quantify the minimum, maximum and average per hectare monetary values of 63 ecosystems in a given location (e.g. mangroves in the Bahamas) on either reducing the impact of a climate-related risk, or increasing the impact of a climate-related opportunity (e.g. flood protection, improving human health).</li>
</ul>
<br>
<input type="checkbox" id="checkmeAnnual"/>
<div style="display:inline">
By placing your order, you agree to the <a href="https://app.symbaiosys.ai/annual-pilot-subscription-agreement">Annual Pilot Subscription Agreement</a>, <a href="https://symbaiosys.ai/wp-content/uploads/2023/11/Symbaiosys-Legal-Disclaimer.pdf">Legal Disclaimer</a>, <a href="https://symbaiosys.ai/terms-of-use/">Terms of Use</a>, <a href="https://symbaiosys.ai/privacy-policy/">and Privacy Policy</a>. You also acknowledge that your subscription will be renewed automatically during each billing period. You can manage your subscription at any time through your account.
</div>
<br>
<br>
<button id="pay-btn-annual" onClick="startCheckoutAnnual()" disabled >
Subscribe
</button>
</div>
</div>
</div>
<script type="text/javascript">
var checkerAnnual = document.getElementById('checkmeAnnual');
var sendbtnAnnual = document.getElementById('pay-btn-annual');
checkerAnnual.onchange = function() {
if(this.checked){
sendbtnAnnual.disabled = false;
} else {
sendbtnAnnual.disabled = true;
}
};
</script> `Preformatted text`