Is there no way to enable quarterly payments? It seems like I can only have a monthly/yearly toggle 
Hey @Tim_ClimatEU,
I would suggest the following workaround.
You can use this code to change the Monthly/Yearly toggle.
<script>
document.addEventListener("DOMContentLoaded", function() {
$('#planos-precos .year').text('example1');
$('#planos-precos .month').text('example2');
});
</script>
Then you will be able to create quarterly payments in Stripe and set the available options for the toggle.
P.S. please note that you should Replace the texts Example 1 for yearly and Example 2 for monthly options.
When creating Payment on Stripe you can edit Subscription schedule and select one of the available cycles or create custom one.
@Suzie just wanted to follow up - maybe it’s a stupid question, but where would I need to insert that code snippet to adjust to quarterly?
Thanks so much again!!!
Hi Tim,
Custom code header, at page level. Footer works too.
Don’t forget to get the right # (the id of your pricing block)
1 Like
This is great, all worked! Thank you so much for taking the time.
I had messed up the id o the blocks the last time I tried.
Much appreciated!!
2 Likes
Hey @Tim_ClimatEU,
I am so sorry I missed the other questions Many thanks to @matthieu_chateau 
1 Like
No worries :))
1 Like
Hey @Suzie and @matthieu_chateau ,
I just updated the pricing block to the newest version and now this custom code does not work anymore. Is there a way I can simply adjust the code to make it work again?
Yes,
But you will need to check it yourself in the dev inspector.
For the first pricing block:
<script>
document.addEventListener("DOMContentLoaded", function() {
$('#pricing1 .css-ty7r4z').text('quarterly');
$('#pricing1 .css-pelz90').text('bi-yearly');
});
</script>
How did I find it? (so you can always replicate with your use case)
Open the browser inspector then hover the Yearly and Monthly elements
In the code, I point the block ID then I put a . just before css-ty7r4z or css-pelz90 because they are class selectors
2 Likes
Amazing!! Thank you so so much!
Why check it with the code inspector and not just preview it via Softr? It seems to be working perfectly btw
You’re welcome.
You can do it live or within the preview mode, but you will always have to open the inspector to check all of these classes, elements, ids etc. They are not accessible anywhere else.
Actually, after some testing, I just realized that it does not work properly.
In Chrome, after I opened the inspector, it started working properly, but if I open it on the phone or in safari, it does not work, and I see monthly and yearly again. The class ID is correct, though. Am I overseeing something?
It does work on my end, on phone too (live). I don’t know what could be the problem… except the use of Jquery.
Here is another method:
<script>
document.addEventListener("DOMContentLoaded", function() {
var pricing1 = document.getElementById('pricing1');
var cssTy7r4z = pricing1.querySelector('.css-ty7r4z');
var cssPelz90 = pricing1.querySelector('.css-pelz90');
if (cssTy7r4z) {
cssTy7r4z.textContent = 'quarterly';
}
if (cssPelz90) {
cssPelz90.textContent = 'bi-yearly';
}
});
</script>
Somehow it’s a lottery. If I keep on refreshing the browser, then every 5th time or so, it is correct, and the other times it is wrong. This is across all devices and browsers, I realized. It’s as if the query would only run sometimes. Any idea how this might be possible?
Did you put the code in the header?
I don’t know what could be the problem here. May be another script wrong interaction, maybe your browser caching is full 
I tried both header and footer, and it’s on all browsers and devices for some reason 
Also cleaned the cache now and the problem still occurs.
I suspect there is a custom code that messes something up in your page (at page level or app level).
It works perfectly here for example: https://test-play.softr.app/pricing
One last try with this one:
<script>
var pricing1 = document.getElementById('pricing1');
var cssTy7r4z = pricing1.querySelector('.css-ty7r4z');
var cssPelz90 = pricing1.querySelector('.css-pelz90');
if (cssTy7r4z) {
cssTy7r4z.textContent = 'quarterly';
}
if (cssPelz90) {
cssPelz90.textContent = 'bi-yearly';
}
</script>
Otherwise you would need to check all your custom codes of the page + app level. Not sure that this would be 100% worth the time. A double card pricing would do the trick for example. (though this is clearly something ULTRA BASIC that should be improved by Softr…)
Page level there is no extra custom code and on app level there is only the loading screen banner - maybe that is the problem.
It’s in the header:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<div id="loading-spinner">
<i class="fas fa-spinner fa-spin"></i>
<p class="loading-text">Cooling the planet...</p>
</div>
<style>
#loading-spinner {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
#loading-spinner i {
font-size: 60px;
color: #2B5472;
}
.loading-text {
font-family: Arial, sans-serif;
font-size: 24px;
font-weight: bold;
color: #2B5472;
margin-left: 20px;
margin-top: 20px;
}
@media (max-width: 768px) {
#loading-spinner {
flex-direction: column;
.loading-text {
margin-left: 0px;
}
}
}
</style>
And in the footer:
<script>
window.addEventListener('load', function() {
var spinner = document.getElementById('loading-spinner');
spinner.style.display = 'none';
});
var loadingTexts = [
'Cooling the planet...',
'Planting trees...',
'Capturing carbon...',
'Reaching net-zero...',
'Cleaning up industry...',
'Electrifying everything...',
];
var randomIndex = Math.floor(Math.random() * loadingTexts.length);
var loadingText = loadingTexts[randomIndex];
document.querySelector('.loading-text').textContent = loadingText;
</script>
Since that spinner loads every time a bit differently with a different text, that might be the problem…
And agreed, this is very basic. I can’t put two blocks for monthly and quarterly, that would look pretty unprofessional 