Freemius checkout button

freemius-checkout-button.markdown

Freemius checkout button

Inspired by James Kemp's interface - This example has tabs for monthly, annual and lifetime billing cycles.

You can choose between 1, 10 and 50 sites - each with different pricing.

There is a place to enter coupon code + user can choose between big buy button or a 7-day trial.

A Pen by Lars Koudal on CodePen.

License.

index.html

<div class="getlicense">
  <div class="billingcycles">
    <div class="tab-row">
      <input type="radio" name="billing_cycle" id="tab0" value="monthly">
      <label for="tab0">Monthly</label>
      <input type="radio" name="billing_cycle" id="tab1" value="annual" checked>
      <label for="tab1">Annual</label>
      <input type="radio" name="billing_cycle" id="tab2" value="lifetime">
      <label for="tab2">Lifetime</label>
    </div>
    <div class="tab-details">
      <div class="tab monthly">
        <p>1 month of updates and support. Your subscription will auto-renew until cancelled.</p>
      </div>

      <div class="tab annual">
        <p>1 year of updates and support. Your subscription will auto-renew each year until cancelled.</p>
      </div>
      <div class="tab lifetime">
        <p>One-time payment gives you updates and support forever, no subscription.</p>
      </div>
    </div>
    <!-- .tab-details -->
  </div>
  <!-- .billingcycles -->
  <div id="licenses_cont">
    <div>
      <input type="radio" id="sites_1" name="licences" value="1" checked>
      <label for="sites_1"><span class="sites">1 Site</span> <span class="monthly">$9</span> <span class="annual">$49</span> <span class="lifetime">$149</span></label>
    </div>
    <div>
      <input type="radio" id="sites_10" name="licences" value="10">
      <label for="sites_10"><span class="sites">10 Sites</span> <span class="monthly">$19.99</span> <span class="annual">$79.99</span><span class="lifetime">$250</span></label>
    </div>
    <div>
      <input type="radio" id="sites_50" name="licences" value="50">
      <label for="sites_50"><span class="sites">50 Sites</span> <span class="monthly">$49.99</span> <span class="annual">$150</span><span class="lifetime">$450</span></label>
    </div>
  </div>
  <!-- .licenses_cont -->

  <p class="expander">Have a coupon code?</p>

  <div id="couponcont"><input type="text" name="coupon" id="couponinput" placeholder="Enter coupon"></div>

  <button id="purchasenow" class="fspurchase" data-fstrial="false">Buy Now</button>
  <p class="aligncenter">or</p>
  <button id="freetrial" class="fspurchase" data-fstrial="free">7-day Free Trial</button>
</div>

script.js

jQuery(document).ready(function($) {
  var handler = FS.Checkout.configure({
    plugin_id: "3690",
    plan_id: "5949",
    public_key: "pk_f990ec18700a90c02db544f1aa986",
    image:
      "https://wpsecurityninja.com/wp-content/uploads/2019/05/icon-256x256-simplified.png"
  });

  // Expands the coupon input field
  jQuery(".expander").on("click", function() {
    jQuery("#couponcont").slideToggle();
  });

  // Toggles between billing cycles
  jQuery(".billingcycles").on("change", function(e) {
    // 'click' seems to be too early, so updated value are not always parsed.
    var billing_cycle = jQuery(
      "input:radio[name ='billing_cycle']:checked"
    ).val();
    switch (billing_cycle) {
      case "monthly":
        //jQuery('.tab-details .tab.monthly').show();
        jQuery(".getlicense .monthly").show();
        jQuery(".getlicense .annual").hide();
        jQuery(".getlicense .lifetime").hide();
        break;
      case "annual":
        jQuery(".getlicense .monthly").hide();
        jQuery(".getlicense .annual").show();
        jQuery(".getlicense .lifetime").hide();
        break;
      case "lifetime":
        jQuery(".getlicense .monthly").hide();
        jQuery(".getlicense .lifetime").show();
        jQuery(".getlicense .annual").hide();
        break;
    }
  });

  jQuery(".fspurchase").on("click", function(e) {
    e.preventDefault();
    handler.open({
      name: "Security Ninja",
      coupon: $("#couponinput").val(),
      licenses: $("input:radio[name ='licences']:checked").val(),
      // You can consume the response for after purchase logic.
      billing_cycle: $("input:radio[name ='billing_cycle']:checked").val(),
      trial: $(this).data("fstrial"), // picked up from clicked button data-fstrial value
      purchaseCompleted: function(response) {
        // The logic here will be executed immediately after the purchase confirmation.                                // alert(response.user.email);
      },
      success: function(response) {
        // The logic here will be executed after the customer closes the checkout, after a successful purchase.                                // alert(response.user.email);
      }
    });
  });
});

scripts

<script src="https://checkout.freemius.com/checkout.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

style.css

.getlicense {
  font-family: Roboto, sans-serif;
width:100%;
  display:block;
  float:left;
  clear:both;
}

.sites {

  display:inline-block;
  min-width:80px;
}

#billing_cycle,
#licenses {
  width: 100%;
  float: left;
  clear: both;
  margin-bottom: 20px;
  font-size: 20px;
}

#purchasenow {
  width: 100%;
  max-width:250px;
  margin:0 auto;
  clear: both;
  display: block;
  padding: 10px;
  font-size: 22px;
  background-color: #67a100;
  color: #ffffff;
}

#freetrial {
  color: #000000;
  font-size: 18px;
  border-color: #000000;
  background-color: #ffffff;
}

.expander {
  text-decoration: underline;
  cursor: pointer;
}

.fspurchase {
  margin: 0 auto;
  display: block;
  font-weight: 500;
  font-size: 22px;
  border: 1px solid #67a100;
  border-radius: 5px;
  padding: 5px 20px 5px 20px;
  margin-bottom: 20px;
}

#licenses_cont {
  clear: both;
  float: left;
  width: 100%;
  margin-bottom: 20px;
  margin-top: 20px;
  font-size: 1.2em;
  padding-left: 10px;
  box-sizing: border-box;
  padding-right: 10px;
}

#licenses_cont div {
  margin-bottom: 10px;
}

#licenses_cont div label {
  cursor: pointer;
}
#licenses_cont div label:hover {
  font-weight: bold;
}

/* Hides monthly and lifetime details initially */
.monthly,
.lifetime {
  display: none;
}

/* Container for the coupon */
#couponcont {
  width: 100%;
}

#couponinput {
  width: 100%;
  box-sizing: border-box;
  clear: both;
  float: left;
  display: block;
  padding: 10px;
  margin-bottom: 20px;
}

.tab-details {
  clear: both;
  float: left;
}

#licenses_cont label {
  margin-left: 10px;
}

#couponcont {
  display: none;
}

.billingcycles {
  width: 100%;
  clear: both;
  float: left;
}
.billingcycles .tab-row {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
  background: #eeeeee;
}

.billingcycles .tab {
  font-size: 1.2em;
}

.billingcycles label {
  width: 33%;
  float: left;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor:pointer;

}

.billingcycles .tab {
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
  margin: 0 auto;
  min-height: 70px;
}

.billingcycles .tab p {
  font-size: 0.8em;
}
.billingcycles input {
  display: none;
}

.aligncenter {
  text-align: center;
}



.billingcycles input:checked + label {
  background: black;
  color: white;
  cursor: default;
}

.billingcycles div.tab {
  padding: 5px 10px;
  clear: left;
}