1. Memberstack 2.0
  2. Guides & Tutorials
  3. Code Snippets

[Code] Free Trial without a Credit Card

Article author
Duncan from Memberstack

By default, Memberstack requires a credit card when purchasing a paid plan with a free trial.

If you'd like to grant member's a free trial without collecting payment information we've created a code solution for you. In summary, we'll be using free plans to grant access to content and then using a bit of code to remove the free plan after a certain number of days. 

A) Require a Trial on Signup

1. First, create a free plan and use it to grant access to gated content. 

2. Second, add the data-ms-plan:add="Your_Plan_ID" attribute to your sign up form. 

3. Third, create a "/wecome" page and set your On Signup redirect so that new members land here after creating an account. Add this code snippet before the closing </body> tag. This code is setting the trial expiration date in hours. So be sure to update the default 240 (or 10-days) to equal you desired trial length. 

<!-- 💙 MEMBERSCRIPT #27 v0.1 💙 SET ONE TIME DATE -->
<script>
document.addEventListener("DOMContentLoaded", async function() {
  const memberstack = window.$memberstackDom;

  const updateDate = async function() {
    const member = await memberstack.getMemberJSON();

    if (!member.data) {
      member.data = {};
    }

    if (!member.data['free-trial-date']) {
      const currentTime = new Date();
      const expirationTime = new Date(currentTime.getTime() + (240 * 60 * 60 * 1000)); // Set the expiration time to 10 days (adjust as needed)
      member.data['free-trial-date'] = expirationTime.toISOString();
      
      // Update member JSON
      await memberstack.updateMemberJSON({
        json: member.data
      });
    }
  };

  updateDate();
});
</script>

4. Then, add this code snippet before the closing </body> tag of any page with Members Only content. This code will check the expiration date and automatically remove the free plan once the date has passed. 

<!-- 💙 MEMBERSCRIPT #37 v0.1 💙 MAKE FREE TRIAL EXPIRE AFTER SET TIME -->
<script>
let memberPlanId = "Your_pln_ID"; // replace with your actual FREE plan ID

document.addEventListener("DOMContentLoaded", async function() {
  const memberstack = window.$memberstackDom;

  // Fetch the member's data
  const member = await memberstack.getMemberJSON();

  // Fetch the member's planConnections from local storage
  const memberDataFromLocalStorage = JSON.parse(localStorage.getItem('_ms-mem'));
  const planConnections = memberDataFromLocalStorage.planConnections;

  // Check if the member has x plan
  let hasPlan = false;
  if (planConnections) {
    hasPlan = planConnections.some(planConnection => planConnection.planId === memberPlanId);
  }

  if (hasPlan) {
    // Check the members free-trial-date
    let currentDate = new Date();
    let oneTimeDate = new Date(member.data['free-trial-date']);

    if (currentDate > oneTimeDate) {
      // If the members' one time date has passed, remove x plan
      memberstack.removePlan({
        planId: memberPlanId
      }).then(() => {
        // Redirect to /free-trial-expired
        window.location.href = "/free-trial-expired";
      }).catch(error => {
        // Handle error
      });
    }
  }
});
</script>

5. Finally, create a "/free-trial-expired" page. Members will land on this page if they log in after their trial has expired. 

B) Begin Trial Anytime

Note: Only implement Option A or Option B. Do not try to setup both. 

1. First, create a free plan and use it to grant access to gated content. 

2. Second, add the data-ms-plan:add="Your_Plan_ID" attribute to a button on your site. This can be before or after your sign up form.  

3. Third, create a "/wecome" page and set your On Signup redirect so that new members land here after joining the plan. Add this code snippet before the closing </body> tag. This code is setting the trial expiration date in hours. So be sure to update the default 240 (or 10-days) to equal you desired trial length. 

<!-- 💙 MEMBERSCRIPT #27 v0.1 💙 SET ONE TIME DATE -->
<script>
document.addEventListener("DOMContentLoaded", async function() {
  const memberstack = window.$memberstackDom;

  const updateDate = async function() {
    const member = await memberstack.getMemberJSON();

    if (!member.data) {
      member.data = {};
    }

    if (!member.data['free-trial-date']) {
      const currentTime = new Date();
      const expirationTime = new Date(currentTime.getTime() + (240 * 60 * 60 * 1000)); // Set the expiration time to 10 days (adjust as needed)
      member.data['free-trial-date'] = expirationTime.toISOString();
      
      // Update member JSON
      await memberstack.updateMemberJSON({
        json: member.data
      });
    }
  };

  updateDate();
});
</script>

4. Then, add this code snippet before the closing </body> tag of any page with Members Only content. This code will check the expiration date and automatically remove the free plan once the date has passed. 

<!-- 💙 MEMBERSCRIPT #37 v0.1 💙 MAKE FREE TRIAL EXPIRE AFTER SET TIME -->
<script>
let memberPlanId = "Your_pln_ID"; // replace with your actual FREE plan ID

document.addEventListener("DOMContentLoaded", async function() {
  const memberstack = window.$memberstackDom;

  // Fetch the member's data
  const member = await memberstack.getMemberJSON();

  // Fetch the member's planConnections from local storage
  const memberDataFromLocalStorage = JSON.parse(localStorage.getItem('_ms-mem'));
  const planConnections = memberDataFromLocalStorage.planConnections;

  // Check if the member has x plan
  let hasPlan = false;
  if (planConnections) {
    hasPlan = planConnections.some(planConnection => planConnection.planId === memberPlanId);
  }

  if (hasPlan) {
    // Check the members free-trial-date
    let currentDate = new Date();
    let oneTimeDate = new Date(member.data['free-trial-date']);

    if (currentDate > oneTimeDate) {
      // If the members' one time date has passed, remove x plan
      memberstack.removePlan({
        planId: memberPlanId
      }).then(() => {
        // Redirect to /free-trial-expired
        window.location.href = "/free-trial-expired";
      }).catch(error => {
        // Handle error
      });
    }
  }
});
</script>

5. Finally, create a "/free-trial-expired" page. Members will land on this page if they log in after their trial has expired. 

Known Limitations

The free plan will only be removed IF the members logs in after the trial has ended. If the member does not return, then it will appear they are still trialing. This can create some issues if you are tracking the number of active trialing accounts. 

Was this article helpful?

Comments

10 comments

Please sign in to leave a comment.