diff --git a/client/components/data/query-stored-cards/index.jsx b/client/components/data/query-stored-cards/index.jsx
index aa391c756c212..6671f385a80fe 100644
--- a/client/components/data/query-stored-cards/index.jsx
+++ b/client/components/data/query-stored-cards/index.jsx
@@ -7,21 +7,13 @@ import { connect } from 'react-redux';
 /**
  * Internal dependencies
  */
-import { hasLoadedStoredCardsFromServer, isFetchingStoredCards } from 'state/stored-cards/selectors';
+import { isFetchingStoredCards } from 'state/stored-cards/selectors';
 import { fetchStoredCards } from 'state/stored-cards/actions';
 
 class QueryStoredCards extends Component {
 	componentWillMount() {
-		this.requestStoredCards();
-	}
-
-	componentWillReceiveProps( nextProps ) {
-		this.requestStoredCards( nextProps );
-	}
-
-	requestStoredCards( props = this.props ) {
-		if ( ! props.isRequesting && ! props.hasLoadedFromServer ) {
-			props.fetchStoredCards();
+		if ( ! this.props.isRequesting ) {
+			this.props.fetchStoredCards();
 		}
 	}
 
@@ -38,7 +30,6 @@ QueryStoredCards.propTypes = {
 export default connect(
 	state => {
 		return {
-			hasLoadedFromServer: hasLoadedStoredCardsFromServer( state ),
 			isRequesting: isFetchingStoredCards( state )
 		};
 	},
diff --git a/client/lib/stored-cards/README.md b/client/lib/stored-cards/README.md
deleted file mode 100644
index 6c1e1ceabda37..0000000000000
--- a/client/lib/stored-cards/README.md
+++ /dev/null
@@ -1,16 +0,0 @@
-stored-cards
-=======
-
-`stored-cards` is a collection of all the stored credit cards have saved on WordPress.com as returned from the `/me/stored_cards` REST-API endpoint. It can be required into a file like:
-
-```
-var storedCards = require( 'lib/stored-cards' )();
-```
-
-Currently stored cards just has two public methods, `get()`, and `fetch()`.
-
-`get()`
-The get request will first check for data on the object itself, and if it finds data, will return that. Otherwise it will check localStorage through `store` for a `StoredCards` object, and will return that data or an empty array if null and immediately call the fetch method.
-
-`fetch()`
-The fetch method will call out to the `/me/stored_cards` endpoint, store the results to the `StoredCards` object, emit a 'change' event, and store the new data to localStorage.
diff --git a/client/lib/stored-cards/index.js b/client/lib/stored-cards/index.js
deleted file mode 100644
index 9f3f5fb4d0997..0000000000000
--- a/client/lib/stored-cards/index.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * External dependencies
- */
-var debug = require( 'debug' )( 'calypso:stored-cards' ),
-	reject = require( 'lodash/reject' ),
-	store = require( 'store' );
-
-/**
- * Internal dependencies
- */
-var wpcom = require( 'lib/wp' ),
-	Emitter = require( 'lib/mixins/emitter' );
-
-/**
- * StoredCards component
- *
- * @api public
- */
-function StoredCards() {
-	if ( ! ( this instanceof StoredCards ) ) {
-		return new StoredCards();
-	}
-
-	this.initialized = false;
-}
-
-/**
- * Mixins
- */
-Emitter( StoredCards.prototype );
-
-/**
- * Get list of stored cards from current object or store,
- * trigger fetch on first request to update stale data
- */
-StoredCards.prototype.get = function() {
-	var storedCards;
-	if ( ! this.storedCards ) {
-		debug( 'First time loading stored cards, check store' );
-		storedCards = store.get( 'StoredCards' );
-		if ( storedCards ) {
-			this.initialize( storedCards );
-		} else {
-			this.storedCards = [];
-		}
-		this.fetch();
-	}
-	return this.storedCards;
-};
-
-/**
- * Fetch the user's stored cards from WordPress.com via the REST API.
- *
- * @api public
- */
-StoredCards.prototype.fetch = function() {
-	debug( 'getting stored cards from api' );
-	wpcom.undocumented().getStoredCards( function( error, data ) {
-		var storedCards;
-
-		if ( error ) {
-			debug( 'error fetching stored cards from api', error );
-			return;
-		}
-
-		storedCards = this.parse( data );
-
-		debug( 'Stored cards fetched from api:', storedCards );
-
-		if ( ! this.initialized ) {
-			this.initialize( storedCards );
-		} else {
-			this.update( storedCards );
-		}
-
-		this.emit( 'change' );
-		store.set( 'StoredCards', storedCards );
-
-	}.bind( this ) );
-};
-
-/**
- * Initialize data with StoredCard objects
- **/
-StoredCards.prototype.initialize = function( storedCards ) {
-	this.storedCards = storedCards;
-	this.initialized = true;
-};
-
-/**
- * Parses data retrieved from the API and extracts the list of stored cards.
- *
- * @param {array} data - raw data
- * @return {array} a list of stored cards
- **/
-StoredCards.prototype.parse = function( data ) {
-	return reject( data, '_headers' );
-};
-
-/**
- * Update stored cards list
- **/
-StoredCards.prototype.update = function( storedCards ) {
-	this.storedCards = storedCards;
-};
-
-/**
- * Expose `StoredCards`
- */
-module.exports = StoredCards;
diff --git a/client/me/credit-cards/index.jsx b/client/me/credit-cards/index.jsx
index f836870904de8..4ae8ab52f812f 100644
--- a/client/me/credit-cards/index.jsx
+++ b/client/me/credit-cards/index.jsx
@@ -10,13 +10,14 @@ var connect = require( 'react-redux' ).connect,
 var CreditCardDelete = require( './credit-card-delete' ),
 	Card = require( 'components/card' ),
 	getStoredCards = require( 'state/stored-cards/selectors' ).getStoredCards,
+	hasLoadedStoredCardsFromServer = require( 'state/stored-cards/selectors' ).hasLoadedStoredCardsFromServer,
 	isFetchingStoredCards = require( 'state/stored-cards/selectors' ).isFetchingStoredCards,
 	QueryStoredCards = require( 'components/data/query-stored-cards' ),
 	SectionHeader = require( 'components/section-header' );
 
 var CreditCards = React.createClass( {
 	renderCards: function() {
-		if ( this.props.isFetchingStoredCards ) {
+		if ( this.props.isFetching && ! this.props.hasLoadedFromServer ) {
 			return (
 				<div className="credit-cards__no-results">
 					{ this.translate( 'Loading…' ) }
@@ -61,6 +62,7 @@ var CreditCards = React.createClass( {
 module.exports = connect(
 	state => ( {
 		cards: getStoredCards( state ),
-		isFetchingStoredCards: isFetchingStoredCards( state )
+		hasLoadedFromServer: hasLoadedStoredCardsFromServer( state ),
+		isFetching: isFetchingStoredCards( state )
 	} )
 )( CreditCards );
diff --git a/client/my-sites/upgrades/checkout/checkout.jsx b/client/my-sites/upgrades/checkout/checkout.jsx
index 5b37d3d48e605..7341ef63d3d71 100644
--- a/client/my-sites/upgrades/checkout/checkout.jsx
+++ b/client/my-sites/upgrades/checkout/checkout.jsx
@@ -14,19 +14,21 @@ var connect = require( 'react-redux' ).connect,
 var analytics = require( 'lib/analytics' ),
 	cartItems = require( 'lib/cart-values' ).cartItems,
 	clearPurchases = require( 'lib/upgrades/actions/purchases' ).clearPurchases,
+	clearSitePlans = require( 'state/sites/plans/actions' ).clearSitePlans,
 	DomainDetailsForm = require( './domain-details-form' ),
+	fetchReceiptCompleted = require( 'state/receipts/actions' ).fetchReceiptCompleted,
+	getExitCheckoutUrl = require( 'lib/checkout' ).getExitCheckoutUrl,
+	getStoredCards = require( 'state/stored-cards/selectors' ).getStoredCards,
 	hasDomainDetails = require( 'lib/store-transactions' ).hasDomainDetails,
+	notices = require( 'notices' ),
 	observe = require( 'lib/mixins/data-observe' ),
-	fetchReceiptCompleted = require( 'state/receipts/actions' ).fetchReceiptCompleted,
-	clearSitePlans = require( 'state/sites/plans/actions' ).clearSitePlans,
 	purchasePaths = require( 'me/purchases/paths' ),
+	QueryStoredCards = require( 'components/data/query-stored-cards' ),
 	SecurePaymentForm = require( './secure-payment-form' ),
-	getExitCheckoutUrl = require( 'lib/checkout' ).getExitCheckoutUrl,
-	upgradesActions = require( 'lib/upgrades/actions' ),
+	supportPaths = require( 'lib/url/support' ),
 	themeItem = require( 'lib/cart-values/cart-items' ).themeItem,
 	transactionStepTypes = require( 'lib/store-transactions/step-types' ),
-	notices = require( 'notices' ),
-	supportPaths = require( 'lib/url/support' );
+	upgradesActions = require( 'lib/upgrades/actions' );
 
 import {
 	isValidFeatureKey,
@@ -35,9 +37,10 @@ import {
 import { planItem as getCartItemForPlan } from 'lib/cart-values/cart-items';
 
 const Checkout = React.createClass( {
-	mixins: [ observe( 'sites', 'cards', 'productsList' ) ],
+	mixins: [ observe( 'sites', 'productsList' ) ],
 
 	propTypes: {
+		cards: React.PropTypes.array.isRequired,
 		selectedFeature: React.PropTypes.string
 	},
 
@@ -95,7 +98,7 @@ const Checkout = React.createClass( {
 		props = props || this.props;
 
 		analytics.tracks.recordEvent( 'calypso_checkout_page_view', {
-			saved_cards: props.cards.get().length,
+			saved_cards: props.cards.length,
 			is_renewal: cartItems.hasRenewalItem( props.cart )
 		} );
 	},
@@ -249,6 +252,8 @@ const Checkout = React.createClass( {
 		return (
 			<div className="main main-column" role="main">
 				<div className="checkout">
+					<QueryStoredCards />
+
 					{ this.content() }
 				</div>
 			</div>
@@ -257,7 +262,11 @@ const Checkout = React.createClass( {
 } );
 
 module.exports = connect(
-	undefined,
+	function( state ) {
+		return {
+			cards: getStoredCards( state )
+		}
+	},
 	function( dispatch ) {
 		return {
 			clearSitePlans: function( siteId ) {
diff --git a/client/my-sites/upgrades/checkout/credit-card-selector.jsx b/client/my-sites/upgrades/checkout/credit-card-selector.jsx
index ac42e0ff54222..5d06b9856130d 100644
--- a/client/my-sites/upgrades/checkout/credit-card-selector.jsx
+++ b/client/my-sites/upgrades/checkout/credit-card-selector.jsx
@@ -33,7 +33,7 @@ var CreditCardSelector = React.createClass({
 	},
 
 	storedCards: function() {
-		return this.props.cards.get().map( function( card ) {
+		return this.props.cards.map( function( card ) {
 			var storedCard = <StoredCard card={ card } />;
 			return this.section( card.stored_details_id, storedCard );
 		}, this );
@@ -44,7 +44,7 @@ var CreditCardSelector = React.createClass({
 			<NewCardForm
 				countriesList={ this.props.countriesList }
 				transaction={ this.props.transaction }
-				hasStoredCards={ this.props.cards.get().length > 0 } />
+				hasStoredCards={ this.props.cards.length > 0 } />
 		);
 
 		return this.section( 'new-card', cardForm );
@@ -53,7 +53,7 @@ var CreditCardSelector = React.createClass({
 	section: function( name, content ) {
 		var classes = classNames( 'payment-box-section', {
 			'selected': this.state.section === name,
-			'no-stored-cards' : name === 'new-card' && this.props.cards.get().length === 0
+			'no-stored-cards': name === 'new-card' && this.props.cards.length === 0
 		} );
 
 		return (
@@ -86,10 +86,8 @@ var CreditCardSelector = React.createClass({
 	},
 
 	getStoredCardDetails: function( section ) {
-		var cards = this.props.cards.get();
-		return filter( cards, { stored_details_id: section } )[ 0 ];
+		return filter( this.props.cards, { stored_details_id: section } )[ 0 ];
 	}
-
 } );
 
 module.exports = CreditCardSelector;
diff --git a/client/my-sites/upgrades/checkout/secure-payment-form.jsx b/client/my-sites/upgrades/checkout/secure-payment-form.jsx
index fdc47ec642982..6e7e8017648e0 100644
--- a/client/my-sites/upgrades/checkout/secure-payment-form.jsx
+++ b/client/my-sites/upgrades/checkout/secure-payment-form.jsx
@@ -117,7 +117,7 @@ var SecurePaymentForm = React.createClass( {
 					transaction={ this.props.transaction }
 					cart={ this.props.cart }
 					countriesList={ countriesList }
-					initialCard={ this.initialCard() }
+					initialCard={ this.getInitialCard() }
 					selected={ this.state.visiblePaymentBox === 'credit-card' }
 					selectedSite={ this.props.selectedSite }
 					onToggle={ this.selectPaymentBox }
@@ -137,8 +137,8 @@ var SecurePaymentForm = React.createClass( {
 		);
 	},
 
-	initialCard: function() {
-		return this.props.cards.get()[ 0 ];
+	getInitialCard: function() {
+		return this.props.cards[ 0 ];
 	},
 
 	componentWillMount: function() {
@@ -165,8 +165,8 @@ var SecurePaymentForm = React.createClass( {
 				break;
 
 			case 'credit-card':
-				if ( this.initialCard() ) {
-					newPayment = storeTransactions.storedCardPayment( this.initialCard() );
+				if ( this.getInitialCard() ) {
+					newPayment = storeTransactions.storedCardPayment( this.getInitialCard() );
 				} else {
 					newPayment = storeTransactions.newCardPayment();
 				}
diff --git a/client/my-sites/upgrades/controller.jsx b/client/my-sites/upgrades/controller.jsx
index 05c742403a1a3..40e25ca61d29f 100644
--- a/client/my-sites/upgrades/controller.jsx
+++ b/client/my-sites/upgrades/controller.jsx
@@ -170,7 +170,6 @@ module.exports = {
 			CheckoutData = require( 'components/data/checkout' ),
 			CartData = require( 'components/data/cart' ),
 			SecondaryCart = require( './cart/secondary-cart' ),
-			storedCards = require( 'lib/stored-cards' )(),
 			basePath = route.sectionify( context.path ),
 			product = context.params.product,
 			selectedFeature = context.params.feature;
@@ -189,7 +188,6 @@ module.exports = {
 			(
 				<CheckoutData>
 					<Checkout
-						cards={ storedCards }
 						product={ product }
 						productsList={ productsList }
 						selectedFeature={ selectedFeature }