How to use coupon codes with Edpay

Since we are not able to use the Kajabi coupon codes directly in the Klarna/MobilePay payment flows, we need to be a little creative. 

The solution is to use two different offers in Edpay - one with the full price and one with the discounted price. So when a customer adds a valid coupon code, we want to switch the full price button with the discounted price button. 

Step 1 (first time only):

Add the following code to "Footer tracking code" in your Checkout Settings:

<script> // Coupons
  $(document).ready(function (){
    $('.edpay-coupon-button').each(function() {
      $(".panel-heading").append($(this).html());
    });

    $('.edpay-button-with-coupon').each(function() {
      $(this).hide();
    });
  });

  var edpayCoupon = function(){
    setTimeout(function() {
      if($(".price-breakdown").length == 1){
        $('.edpay-button-with-coupon').each(function() {
          $(this).show();
        });

        $('.edpay-button-without-coupon').each(function() {
          $(this).hide();
        });
      } else {
        $('.edpay-button-with-coupon').each(function() {
          $(this).hide();
        });

        $('.edpay-button-without-coupon').each(function() {
          $(this).show();
        });
      }

    }, 2000);
  };

  $(".coupon-code-button").on('click', function() {
    edpayCoupon();
  });

  $(".coupon-code-field").on('keypress', function(e) {
    if(e.which == 13){
      edpayCoupon();
    }
  });
</script>

Step 2

Find the URL to each offer in Edpay:

You need the URLs to the full price offer and the discounted offer. Then remove the "FULLPRICE-URL" and "DISCOUNTED-URL" in the codes below: 

For MobilePay (DK)

<div class="edpay-coupon-button" style="display: none;">
  <a class="edpay-button-without-coupon edpay-button" href="FULLPRICE-URL">
  <img src="https://app.edpay.no/buttons/mobilepay.png" style="max-width: 309px; border-radius: 4px;"/></a>
</div>
<div class="edpay-coupon-button" style="display: none;">
  <a class="edpay-button-with-coupon edpay-button" href="DISCOUNTED-URL">
  <img src="https://app.edpay.no/buttons/mobilepay.png" style="max-width: 309px; border-radius: 4px;"/></a>
</div>

For MobilePaylla (FI)

<div class="edpay-coupon-button" style="display: none;">
  <a class="edpay-button-without-coupon edpay-button" href="FULLPRICE-URL">
  <img src="https://app.edpay.no/buttons/mobilepaylla.png" style="max-width: 309px; border-radius: 4px;"/></a>
</div>
<div class="edpay-coupon-button" style="display: none;">
  <a class="edpay-button-with-coupon edpay-button" href="DISCOUNTED-URL">
  <img src="https://app.edpay.no/buttons/mobilepaylla.png" style="max-width: 309px; border-radius: 4px;"/></a>
</div>

For Klarna

<div class="edpay-coupon-button" style="display: none;">
  <a class="edpay-button-without-coupon edpay-button" href="FULLPRICE-URL">
  <img src="https://app.edpay.no/buttons/klarna_checkout.png" style="max-width: 309px; border-radius: 4px;"/></a>
</div>
<div class="edpay-coupon-button" style="display: none;">
  <a class="edpay-button-with-coupon edpay-button" href="DISCOUNTED-URL">
  <img src="https://app.edpay.no/buttons/klarna_checkout.png" style="max-width: 309px; border-radius: 4px;"/></a>
</div>

Step 3

And finally, copy the code you created in step 2 and paste it under "Source code" in "Checkout description" on the Offer page: 

That is it! When a customer enters a valid coupon code, the fullprice button is not switched to a discounted button and they can pay the discounted price 🥳

If you have any questions, please reach out to us at [email protected] 😊