December 22, 2014
Hot Topics:

Understanding and Using the Wallet in Your Windows Phone 8 Application

  • January 23, 2013
  • By Vipul Patel
  • Send Email »
  • More Articles »

Introduction

Microsoft recently announced Windows Phone 8, the latest avatar of its new mobile platform. Among the new features announced was the support for “Wallet”.

With Wallet, the Windows Phone 8 platform supports

1. storing information about coupons, store loyalty cards, membership cards and credit cards in one central location

2. managing the payment instruments for use in Windows Phone stores

3. making transactions using NFC technology, which means contactless touch-and-go purchases

Application developers can build Windows Phone 8 applications that can easily integrate with the Wallet functionality.

Windows Phone 8 exposes the Wallet API, which is hosted in the Microsoft.Phone.Wallet namespace.

The Wallet function is a good candidate to be used in banking and couponing applications as well as applications that track membership information.

The Wallet APIs offers the ability to create, update and delete Wallet items. 

Windows Phone 8, which needs to leverage Wallet capabilities need to declare a few capabilities depending on the functionality the application needs.

ID_CAP_WALLET capability is needed if any API in the Windows.Phone.Wallet namespace is needed.

ID_CAP_WALLET_PAYMENTINSTRUMENTS capability is needed if the application needs to provide support for Payment instruments.

ID_CAP_WALLET_SECUREELEMENT capability is needed if the application needs to provide support for a secure session. The APIs reside in Windows.Phone.SecureElement namespace.

All these capabilities need to be declared in the WMAppManifest.xml file.

Hands-On

In our hands-on, we will develop a Windows Phone 8 application, which will store offers/deals into the Wallet. We will explore how to add an item to the wallet and how to remove it.

Start Visual Studio 2012 and create a new Windows Phone application titled WindowsPhoneWalletDemo.

New Windows Phone application
New Windows Phone application

When prompted, select Windows Phone OS 8.0 as the target Windows Phone OS version.

Target Windows Phone OS Version
Target Windows Phone OS Version

Next, open WMAppManifest.xml in Visual Studio by double-clicking it and select the capabilities associated with Wallet. These are ID_CAP_WALLET, ID_CAP_WALLET_PAYMENTINSTRUMENTS and ID_CAP_WALLET_SECUREELEMENT.

Select the capabilities associated with Wallet
Select the capabilities associated with Wallet

Save WMAppManifest.xml.

Add two buttons – One called “Choose Offers” and “View Offers in your Wallet”.

Add two buttons
Add two buttons

Add 2 Windows Phone Portrait Pages – one titled ViewExistingOffers and the other titled ViewMyOffers.

The ViewExistingOffers page will show all offers that can be saved to the Wallet and provide a button, which will allow us to add the offer to the Wallet.

ViewMyOffers will show all offers that are currently in the Wallet and provide the ability to remove the offer from the Wallet.

Add New Item
Add New Item

Add three checkboxes and one button to the page. Call the checkboxes “Offer 1”, “Offer 2”, and “Offer 3”. For VIewExistingOffers page, the default state of all the checkboxes is Enabled.

Add three checkboxes and one button
Add three checkboxes and one button

Add the following statement to ViewExistingOffers.xaml.cs.

using Microsoft.Phone.Wallet;

On Click of the button, we want to add the Offer in our Waller.

Now, add the following code in the click event for the button.

private async void buttonAddOfferToWallet_Click_1(object sender, RoutedEventArgs e)
        {
            if(checkBoxOffer1.IsEnabled && (bool)checkBoxOffer1.IsChecked)
 
            {
                Deal deal = new Deal(checkBoxOffer1.Content.ToString());
                deal.MerchantName = checkBoxOffer1.Content.ToString();
                deal.DisplayName = checkBoxOffer1.Content.ToString();
                await deal.SaveAsync();
                checkBoxOffer1.IsEnabled =  false;
            }
 
            if (checkboxOffer2.IsEnabled && (bool)checkboxOffer2.IsChecked)
            {
                Deal deal = new Deal(checkboxOffer2.Content.ToString());
                deal.MerchantName = checkboxOffer2.Content.ToString();
                deal.DisplayName = checkboxOffer2.Content.ToString();
                await deal.SaveAsync();
                checkboxOffer2.IsEnabled = false;
            }
 
            if (checkboxOffer3.IsEnabled && (bool)checkboxOffer3.IsChecked)
            {
                Deal deal = new Deal(checkboxOffer3.Content.ToString());
                deal.MerchantName = checkboxOffer3.Content.ToString();
                deal.DisplayName = checkboxOffer3.Content.ToString();
                await deal.SaveAsync();
                checkboxOffer3.IsEnabled = false;
            }
        }

In the code above, we created a new Deal object and added it asynchronously to the Wallet. Upon successful save, we disable the offer (since we already have it in the Wallet).

To only show offers that are not already in the Wallet, we will update the offers on the page load event.

private void PhoneApplicationPage_Loaded_1(object sender, RoutedEventArgs e)
        {
            UpdateOffers();
        }

Now, we will implement the UpdateOffers() method to only enable those offers that are not already in the Wallet.

private async void UpdateOffers()
        {
            WalletItemCollection wc = await Wallet.GetItemsAsync();
            foreach (WalletItem w in wc)
            {
                if (w.Id == checkBoxOffer1.Content.ToString())
                    checkBoxOffer1.IsEnabled = false;
                if (w.Id == checkboxOffer2.Content.ToString())
                    checkboxOffer2.IsEnabled= false;
                if (w.Id == checkboxOffer3.Content.ToString())
                    checkboxOffer3.IsEnabled = false;
            }
        }

Now, we will Add the second Windows Phone portrait Page called ViewMyOffers.xaml.

Add the second Windows Phone portrait Page
Add the second Windows Phone portrait Page

As before, we will add three checkboxes and a button. However, in this case, by default, the checkboxes are not enabled (IsEnabled = false).

On this page, we will show all the offers in the Wallet and provide a button to remove the selected offer from the Wallet.

We will wire the button’s click event on the page to do this.

private void buttonRemoveOffer_Click(object sender, RoutedEventArgs e)
        {
            if (checkBoxOffer1.IsEnabled && (bool)checkBoxOffer1.IsChecked)
            {
                WalletItem wi = Wallet.FindItem(checkBoxOffer1.Content.ToString());
                if(wi != null)
                    Wallet.Remove(wi);
                checkBoxOffer1.IsChecked = false;
                checkBoxOffer1.IsEnabled = false;
                
            }
 
            if (checkboxOffer2.IsEnabled && (bool)checkboxOffer2.IsChecked)
            {
                WalletItem wi = Wallet.FindItem(checkboxOffer2.Content.ToString());
                if (wi != null)
                    Wallet.Remove(wi);
                checkboxOffer2.IsChecked = false;
                checkboxOffer2.IsEnabled = false;
 
            }
 
            if (checkboxOffer3.IsEnabled && (bool)checkboxOffer3.IsChecked)
            {
                WalletItem wi = Wallet.FindItem(checkboxOffer3.Content.ToString());
                if (wi != null)
                    Wallet.Remove(wi);
                checkboxOffer3.IsChecked = false;
                checkboxOffer3.IsEnabled = false;
 
            }
            
        }
 

Next, we add logic to show only those offers as enabled, which are actually in the Wallet.

We use the PageLoad event to retrieve the offers in the Wallet and update the UI.

private void PhoneApplicationPage_Loaded_1(object sender, RoutedEventArgs e)
        {
            UpdateOffers();
        }
 
        private async void UpdateOffers()
        {
            WalletItemCollection wc = await Wallet.GetItemsAsync();
            foreach (WalletItem w in wc)
            {
                
                if (w.Id == checkBoxOffer1.Content.ToString())
                    checkBoxOffer1.IsEnabled= true;
                
                if (w.Id == checkboxOffer2.Content.ToString())
                    checkboxOffer2.IsEnabled = true;
                if (w.Id == checkboxOffer3.Content.ToString())
                    checkboxOffer3.IsEnabled = true;
            }
        }
 

Finally, on MainPage.xaml, we add two buttons, one titled “Choose Offers” and the other titled “View offers in your Wallet”.

We will now add code to navigate to the corresponding page when the button is clicked.

Add the following code as part of the click event handler for the buttons on the MainPage.

private void buttonChooseOffers_Click(object sender, RoutedEventArgs e)
        {
            NavigationService.Navigate(new Uri("/ViewExistingOffers.xaml", UriKind.Relative));
        }
 
        private void buttonViewYourOffers_Click(object sender, RoutedEventArgs e)
        {
            NavigationService.Navigate(new Uri("/ViewMyOffers.xaml", UriKind.Relative));
        }
 

We are now done implementing our application and should be able to run and test our application.

If you are having trouble following, you can download the sample code from here.

Summary

In this article, we learned about the Wallet support and also built a simple Windows Phone 8 application, which stores offers in the Wallets.

WindowsPhoneWalletDemo

About the author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com


Tags: mobile, application, Windows Phone 8




Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Rocket Fuel