×
Namespaces

Variants
Actions
(Difference between revisions)

Enabling wallet payment by face recognition

From Nokia Developer Wiki
Jump to: navigation, search
galazzo (Talk | contribs)
m (Galazzo -)
galazzo (Talk | contribs)
m (Galazzo - - Creating the UI)
Line 52: Line 52:
  
 
== Creating the  UI ==
 
== Creating the  UI ==
Add the following code, to put into the main screen .xaml, create the object to display the camera video flow and the snap button to save the captured image, compute and save it.
+
The following code create the object to display the camera video flow and the snap button to save the captured image, compute or save it.
The same code is needed for the secondary screen called '''Wallet.xaml''' we need to create to be opened when the application is called from the waller.
+
Besides MainPage.xml the same code is needed for the secondary screen called '''Wallet.xaml''' we need to create to be opened when the application is called from the wallet.
 
<code xml>         
 
<code xml>         
 
         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
 
         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
Line 67: Line 67:
 
         <!--Application progress bar.-->
 
         <!--Application progress bar.-->
 
         <ProgressBar Height="10" Name="progressBar" Width="460" Visibility="Collapsed" Margin="12,365,8,286" Grid.Row="1" IsIndeterminate="True" />
 
         <ProgressBar Height="10" Name="progressBar" Width="460" Visibility="Collapsed" Margin="12,365,8,286" Grid.Row="1" IsIndeterminate="True" />
 +
</code>
 +
 +
=== Remapping URI ===
 +
Into {{Icode|App.xaml.cs}} add the following code:
 +
<code csharp>
 +
class MyAppUriMapper : UriMapperBase
 +
{
 +
        public override Uri MapUri(Uri uri)
 +
        {
 +
            string tempUri = uri.ToString();
 +
            if (tempUri.Contains("PaymentInstrument"))
 +
            {
 +
                return new Uri("/Wallet.xaml", UriKind.Relative);
 +
            }
 +
            else
 +
            {
 +
                return uri;
 +
            }
 +
        }
 +
}
 +
 +
public partial class App : Application
 +
{
 +
        ..........
 +
 +
        public App()
 +
        {
 +
              ..........
 +
              RootFrame.UriMapper = new MyAppUriMapper();
 +
        }
 +
}
 
</code>
 
</code>

Revision as of 11:55, 11 December 2012

This article, the second of a series based on DSP project and focused on face recognition, shows step by step how to implement a way to process wallet payment authorization.

WP Metro Icon Multimedia.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
Article Metadata
Tested with
Devices(s): Nokia Lumia
Compatibility
Platform(s): Windows Phone 8
Windows Phone 8
Article
Keywords: Wallet, Payment, Face Recognition
Created: galazzo (11 Dec 2012)
Last edited: galazzo (11 Dec 2012)

Contents

Introduction

A new interesting feature of Windows Phone 8 is certainly the Wallet and Deals APIs which allows users to do the following:

  • Collect coupons, credit cards, memberships, loyalty cards, and more in one place.
  • Manage the payment instruments that they use in the app and music store.
  • Link items in the Wallet to apps on their phone.
  • Make contactless transactions, using Near-Field Communication (NFC), in some markets.

The Wallet API offers full programmatic access to the Wallet. It allows you to create, read, update, and delete Wallet items to implement Deals or Payments.
Deals are useful to manage coupons, loyalty cards, Payment instrument manage a balance on an account maintained by your backend.
The sample application we will create first acquires the face sample to compare and store it int oa file. Throught RootFrame.UriMapper rewriting when the app is called from Wallet before to process payment is required to compare your face with the one saved into the system. If there is a match payment process can continue else is stopped.

Required capabilities

In order to use Wallet API in Windows Phone 8 you need to specify in the WMAppManifest.xml the following reqiored capabilities otherwise your app might not work correctly or it might fail the process of submission to the Store.

Capability API that requires this capability
ID_CAP_WALLET Required for all Wallet API, which is anything in Microsoft.Phone.Wallet or Microsoft.Phone.SecureElement.
ID_CAP_WALLET_PAYMENTINSTRUMENTS Required for PaymentInstrument and OnlinePaymentInstrument.
ID_CAP_WALLET_SECUREELEMENT Required for SecureElementSession, SecureElementChannel and SecureElementReader.

Warning.pngWarning: To deploy or submit an app that uses ID_CAP_WALLET_SECUREELEMENT or ID_CAP_WALLET_PAYMENTINSTRUMENTS, you must request special permissions and have that permission applied to your developer account.

Creating the UI

The following code create the object to display the camera video flow and the snap button to save the captured image, compute or save it. Besides MainPage.xml the same code is needed for the secondary screen called Wallet.xaml we need to create to be opened when the application is called from the wallet.

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.Background>
<VideoBrush x:Name="viewfinderBrush">
<VideoBrush.RelativeTransform>
<CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
</VideoBrush.RelativeTransform>
</VideoBrush>
</Grid.Background>
</Grid>
<Button Content="Snap Picture" Click="SaveImage" Margin="0,624,0,0" Grid.Row="1" />
<!--Application progress bar.-->
<ProgressBar Height="10" Name="progressBar" Width="460" Visibility="Collapsed" Margin="12,365,8,286" Grid.Row="1" IsIndeterminate="True" />

Remapping URI

Into App.xaml.cs add the following code:

class MyAppUriMapper : UriMapperBase
{
public override Uri MapUri(Uri uri)
{
string tempUri = uri.ToString();
if (tempUri.Contains("PaymentInstrument"))
{
return new Uri("/Wallet.xaml", UriKind.Relative);
}
else
{
return uri;
}
}
}
 
public partial class App : Application
{
..........
 
public App()
{
..........
RootFrame.UriMapper = new MyAppUriMapper();
}
}
326 page views in the last 30 days.
×