Greetings,
We take payments on our site using Portal. Any way to have Portal toggle default to “monthly” rather than “yearly” payment?
Notably, I’m testing out tiers, and the /monthly/ or /yearly/ links, that worked before, now just generate links for direct purchase on Stripe.
Thanks for any help,
Damir
Did you ever find a solution to this? I’d really like to be able to flip this switch.
Is this possible in Ghost Pro?
It’s not possible but I wish it was.
They need to add this.
Another vote for this to be configurable.
My client has a strong preference for monthly signups, but wants to support yearly if it’s necessary.
Their reasons are legitimate: they have stakeholders who want to see monthly membership churn in the short term, and yearly memberships won’t provide those insights. Also, they simply prefer that users opt into paying a slightly higher rate at first if possible, only to opt into a reduced rate once they determine the service is right in the longer term. There are other reasons as well, but these two seemed sufficient to justify it to me.
Another vote for this.
It would also be great to have the choice to opt for monthly and yearly levels for each tier. For instance, let’s say we prefer to display monthly plan for Tiers A and B, but yearly for Tier C.
been waiting but hopefully it happens soon. Would love to be able to even add a tier that is 1 time purchase while having others tiers with month/yr options or full control of each tier individually. You can do this by creating the links in stripe but it bypasses portal and isn’t clean. Would love for them to add cash app as-well which can call be done as stripe offers it but told me Ghost has to build that integration which would be 1 days work for them.
I could care less about the new pic resize tool but they charge non pro members for that feature so it had priority. I hope they add these things sooner than later but overall I love ghost.
+1 for this. I think there must be a way to do this via customizing themes but would love to have a switch to click.
Yeah one time purchase would be legend
I am about to launch my site and I would love this too!
Upvote, should definietly be an option.
This is the code of the monthly/yearly button but it keeps being loaded in the yearly state whatever I try. Maybe someone is outthere to help to make it load in the monthly state? Neiterh Bard nor Chat GPT found a solution to this peculiar task.
function Nf({ selectedInterval: e, setSelectedInterval: t }) {
const { site: n, t: a } = k.useContext(N);
const { portal_plans: r } = n;
return !r.includes("monthly") || !r.includes("yearly") ? null : (
<div className="gh-portal-logged-out-form-container">
<div className={`gh-portal-products-pricetoggle${e === "month" ? " left" : ""}`}>
<button
data-test-button="switch-monthly"
className={`gh-portal-btn${e === "month" ? " active" : ""}`}
onClick={() => {
t("month");
}}
>
{a("Monthly")}
</button>
<button
data-test-button="switch-yearly"
className={`gh-portal-btn${e === "year" ? " active" : ""}`}
onClick={() => {
t("year");
}}
>
{a("Yearly")}
</button>
</div>
</div>
);
}
My workaround was to turn off yearly so that only monthly shows:
It’s not ideal, but IMO it’s my preference for folks so I simply feature that.
I have other support options on a different page:
That option is in the portal settings under “prices available at signup”: https://yoursite.com/ghost/#/settings/portal/edit
Hey guys,
I found this thread by googling search how to do this… seems theres a few threads but nobody has done it yet.
I searched through the code after running a trace on the CSS elements and found the code
inside this piece of code:
Ghost/apps/portal/src/components/common/ProductsSection.js
ProductPriceSwitch is the function inside that piece of javascript.
I’ve captured a screenshot here of the entire function
however the function is not where I want to change the values here I just want the CSS to switch the default so onclick goes to annual instead of monthly…
so the easiest way is down in the code to swap the CSS elements around so that the before is the switch to monthly and vice versa:
.gh-portal-products-pricetoggle:before {
position: absolute;
content: "";
display: block;
width: 50%;
top: 4px;
bottom: 4px;
right: 4px;
background: var(--white);
box-shadow: 0px 1px 3px rgba(var(--blackrgb), 0.08);
border-radius: 999px;
transition: all 0.15s ease-in-out;
}
.gh-portal-products-pricetoggle.left:before {
transform: translateX(calc(-100% + 8px));
}
because this is in a default build codebase im testing it to change it on my live site ill have to either spin a new build or remote in to my server and replace these files on the server with my tested code.
ill see how it goes and let you guys know how to make the change when ive finished.
Yo! Super curious if this ended up working out? Seems legit!
Does anyone know if the option for this is being worked on for the core product? I’d like to simply add an option to portal setup for “Default Interval” that defaults to “Yearly” but can be changed to “Monthly” and add required code on the signup page. But I don’t want to do the work and submit a Pull Request if someone else is working on this already.
Looks like it, and it’s live on my Ghost Pro site! (But they do rolling releases, so if yours isn’t today, check tomorrow.)
That’s great news! How do I install this with a self-hosted Ghost instance? Just download the new portal.min.js file and link to it on my server?
Because I tried this already but can’t see the new portal functions.
I’m not an authoritative source here (despite having a cool Ghost beanie for being their biggest fan girl), but I’m suspecting you might need to update Ghost itself so that you’ll have the newest version of the admin panel, which will let you enter the portal settings needed.
