In-App purchases not working in chrome extension

The In-App purchases screen is returning:

Screenshot of In-App screen

The error is:

An unexpected error has occurred. Please try again later. Dismiss

And as you can see, half of it is also black.

Buy.js:

  /*GOOGLE's CODE
...
*/



 /*CODE FOR IN-APP PURCHASES*/


var prodButPrefix = "btnProdID-";
var statusDiv;

function init() {
  console.log("App Init");
  statusDiv = $("#status");
  //  getProductList();

}

$("#div1").click(function() {
  checkIfBought("package2016");
});


/*****************************************************************************
* Get the list of purchased products from the Chrome Web Store
*****************************************************************************/
var purchased = false;
function getLicenses() {
  console.log("google.payments.inapp.getPurchases");
  console.log("Retreiving list of purchased products...");
  google.payments.inapp.getPurchases({
    'parameters': {env: "prod"},
    'success': onLicenseUpdate,
    'failure': onLicenseUpdateFailed
  });
}

function checkIfBought(sku_init){
  getLicenses();
  function getLicenses() {
    console.log("google.payments.inapp.getPurchases");
    console.log("Retreiving list of purchased products...");
    google.payments.inapp.getPurchases({
      'parameters': {env: "prod"},
      'success': onLicenseUpdate,
      'failure': onLicenseUpdateFailed
    });
  }

  function onLicenseUpdate(response) {
    console.log("onLicenseUpdate", response);
    var licenses = response.response.details;
    var count = licenses.length;
    for (var i = 0; i < count; i++) {
      var license = licenses[i];
      if(sku_init == licenses[i].response.details.sku){ //if purchased
        purchased = true;
      }
      addLicenseDataToProduct(license);
    }
    console.log("");
  }

  function onLicenseUpdateFailed(response) {
    console.log("onLicenseUpdateFailed", response);
    console.log("Error retreiving list of purchased products.");
  }

  if(purchased == false){
    buyProduct("package2016");
  }
}



/*****************************************************************************
* Purchase an item
*****************************************************************************/


function buyProduct(sku) {
  console.log("google.payments.inapp.buy", sku);
  //var sku = "";
  google.payments.inapp.buy({
    'parameters': {'env': 'prod'},
    'sku': sku,
    'success': onPurchase,
    'failure': onPurchaseFailed
  });
}


function onPurchase(purchase) {
  console.log("onPurchase", purchase);
  var jwt = purchase.jwt;
  var cartId = purchase.request.cardId;
  var orderId = purchase.response.orderId;
  console.log("Purchase completed. Order ID: " + orderId);
  getLicenses();
}

function onPurchaseFailed(purchase) {
  console.log("onPurchaseFailed", purchase);
  var reason = purchase.response.errorType;
  console.log("Purchase failed. " + reason);
}

This is what is being printed in the console:

google.payments.inapp.buy package2016

When I close the In-App payment screen this is printed:

onPurchaseFailed Object {request: Object, response: Object} Purchase failed. PURCHASE_CANCELED