var CreditsManager = function (products, features, paymentHandler, can_purchase_credits) {
    'use strict';
    var self = this;

    self.products = ko.observableArray();
    self.features = ko.observableArray();

    self.init = function () {
        _.each(products, function (product) {
            self.products.push(new CreditItem('product', product, paymentHandler, can_purchase_credits));
        });
        _.each(features, function (feature) {
            self.features.push(new CreditItem('feature', feature, paymentHandler, can_purchase_credits));
        });
    }
};

var CreditItem = function (category, data, paymentHandler, can_purchase_credits) {
    'use strict';
    var self = this;

    self.category = ko.observable(category);
    self.name = ko.observable(data.name);
    self.creditType = ko.observable(data.type);
    self.usage = ko.observable(data.usage);
    self.remaining = ko.observable(data.remaining);
    self.monthlyFee = ko.observable(data.monthly_fee);
    self.amount = ko.observable(data.credit.amount);
    self.hasAmount = ko.observable(data.credit.is_visible);
    self.canPurchaseCredits = ko.observable(can_purchase_credits);
    self.paymentHandler = paymentHandler;

    self.isVisible = ko.computed(function () {
        return self.hasAmount() && self.canPurchaseCredits();
    });

    self.triggerPayment = function () {
        self.paymentHandler.reset();
        self.paymentHandler.costItem(new CreditCostItem({
            creditType: self.creditType(),
            category: self.category(),
            creditItem: self
        }));
    };
};

@@ -1010,32 +1010,48 @@
 = ko.observable(
+(data.credit) ? 
 data.credit.amou
@@ -1052,16 +1052,20 @@
 t.amount
+ : 0
 );%0A    s
@@ -1105,16 +1105,31 @@
 a.credit
+ && data.credit
 .is_visi

handle data.credit when it's null