Push to Authenticate Confirmation Screens UI Customization

SDK for Android

Customize the Authentication Confirmation Screen

When starting an authentication from the web, a prompt is shown on the phone confirming the user wants to perform the authentication.

Customize the screen by customizing the XML or by overriding the class.

XML Override

By creating a layout file with the same name as the one you want to override, the SDK will present that layout file instead.

Create a file called hypr_common_fragment_accept_authentication.xml in <module_name>/srv/main/res/layout using the example file shown here. Once created, you will be able to alter the app's views.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/hyprColorWhiteBackground"
    android:orientation="vertical"
    android:weightSum="4">

    <View
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            android:id="@+id/text_authentication_account"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="@font/dinot_medium"
            android:gravity="center_horizontal"
            android:textColor="@color/hyprColorAcceptText"
            android:textSize="@dimen/hypr_common_accept_title_text" />

        <TextView
            android:id="@+id/text_authentication_username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:textColor="@color/hyprColorAcceptText"
            android:textSize="@dimen/hypr_common_accept_subtitle_text" />

    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2">

        <TextView
            android:layout_width="@dimen/hypr_common_accept_desc_width"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:gravity="center"
            android:text="@string/hypr_accept_authentication_desc"
            android:textColor="@color/hyprColorAcceptText"
            android:textSize="@dimen/hypr_common_accept_desc_text" />

        <include
            android:id="@+id/button_ok"
            layout="@layout/hypr_common_view_accept_ok"
            android:layout_width="@dimen/hypr_common_accept_button_ok_size"
            android:layout_height="@dimen/hypr_common_accept_button_ok_size"
            android:layout_centerInParent="true" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/button_ok"
            android:gravity="center">

            <com.hypr.hyprandroidcommon.uiadapter.ui.icons.AcceptCancel
                android:id="@+id/button_cancel"
                android:layout_width="@dimen/hypr_common_selection_cancel_button_width"
                android:layout_height="@dimen/hypr_common_selection_cancel_button_height"
                android:layout_centerInParent="true" />

        </RelativeLayout>

    </RelativeLayout>

</LinearLayout>

Class Override

Outside of UI Customization, you can also add additional functionality to the confirmation fragment. To do this, create a class that extends HyprPushNotificationAcceptAuthenticationFragment; it should look similar to the following example:

public class CustomAcceptAuthenticationFragment extends HyprPushNotificationAcceptAuthenticationFragment {

    @Override
    public int getFragmentLayout() {
        // Optional: If you want to use a different layout file other than the
        // default one, which is: R.layout.hypr_common_fragment_accept_authentication
        return R.layout.layout_that_you_want_to_use;
    }

    @Override
    public void onResume() {
        super.onResume();
        setupButtonConfirm();
        setupButtonCancel();
        displayAccountInfo();
        
        // Any other functionality you want to add
    }

    private void setupButtonConfirm() {
        getView().findViewById(R.id.id_for_confirm_button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mPresenter.onOk(getBaseActivity());
            }
        });
    }

    private void setupButtonCancel() {
        getView().findViewById(R.id.id_for_cancel_button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mPresenter.onCancel(getBaseActivity());
            }
        });
    }

    private void displayAccountInfo() {
        Activity activity = getBaseActivity();
        try {
            HyprMachineProfileData curMachine = App.getHyprDbAdapter().getCurHyprAppProfileData(activity).getCurHyprUserProfileData().getCurHyprMachineProfileData();
            String machineName = curMachine.getMachineName();
            String machineDisplayName = curMachine.getMachineDisplayName();
            
            // Display account information

        } catch (HyprException e) {
            e.printStackTrace();
        }
    }
}

In the neighboring values directory, create (or append to) overrides.xml; then create a string for hypr_accept_authentication_fragment_class_override that contains the package path to the class:

<resources>
  <string name="hypr_accept_authentication_fragment_class_override">path.to.this.file.CustomAcceptAuthenticationFragment</string>
</resources>

Customize Transaction Confirmation Screen

When starting a step up authentication (transaction) from the web, the following prompt is shown on the phone confirming that the user wants to perform the transaction:

This screen can be customized either by altering the XML or by overriding the class.

XML Override

By creating a layout file with the same name as the one you want to override, the SDK will present that layout file instead.

Create a file called hypr_common_fragment_accept_transaction.xml in <module_name>/src/main/res/layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/hyprColorWhiteBackground"
    android:orientation="vertical"
    android:weightSum="4">

    <View
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            android:id="@+id/text_transaction_amount"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="@font/dinot_medium"
            android:gravity="center_horizontal"
            android:textColor="@color/hyprColorAcceptText"
            android:textSize="@dimen/hypr_common_accept_title_text" />

    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2">

        <TextView
            android:id="@+id/text_transaction_question"
            android:layout_width="@dimen/hypr_common_accept_desc_width"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:gravity="center"
            android:text="@string/hypr_accept_transaction_desc"
            android:textColor="@color/hyprColorAcceptText"
            android:textSize="@dimen/hypr_common_accept_desc_text" />

        <include
            android:id="@+id/button_ok"
            layout="@layout/hypr_common_view_accept_ok"
            android:layout_width="@dimen/hypr_common_accept_button_ok_size"
            android:layout_height="@dimen/hypr_common_accept_button_ok_size"
            android:layout_centerInParent="true" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/button_ok"
            android:gravity="center">

            <com.hypr.hyprandroidcommon.uiadapter.ui.icons.AcceptCancel
                android:id="@+id/button_cancel"
                android:layout_width="@dimen/hypr_common_selection_cancel_button_width"
                android:layout_height="@dimen/hypr_common_selection_cancel_button_height"
                android:layout_centerInParent="true" />

        </RelativeLayout>

    </RelativeLayout>

</LinearLayout>

Class Override

Outside of UI Customization, you can also add additional functionality to the confirmation fragment. To do this, create a class that extends HyprPushNotificationAcceptTransactionFragment. This should look similar to the example file here:

public class CustomAcceptTransactionFragment extends HyprPushNotificationAcceptTransactionFragment {

    @Override
    public int getFragmentLayout() {
        // Optional: If you want to use a different layout file other than the
        // default one, which is: R.layout.hypr_common_fragment_accept_transaction
        return R.layout.layout_that_you_want_to_use;
    }

    @Override
    public void onResume() {
        super.onResume();
        setupButtonConfirm();
        setupButtonCancel();
        displayAccountInfo();
        displayTransactionInfo();
        
        // Any other functionality you want to add
    }

    private void setupButtonConfirm() {
        getView().findViewById(R.id.id_for_confirm_button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mPresenter.onOk(getBaseActivity());
            }
        });
    }

    private void setupButtonCancel() {
        getView().findViewById(R.id.id_for_cancel_button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mPresenter.onCancel(getBaseActivity());
            }
        });
    }

    private void displayAccountInfo() {
        Activity activity = getBaseActivity();
        try {
            HyprMachineProfileData curMachine = App.getHyprDbAdapter().getCurHyprAppProfileData(activity).getCurHyprUserProfileData().getCurHyprMachineProfileData();
            String machineName = curMachine.getMachineName();
            String machineDisplayName = curMachine.getMachineDisplayName();
            
            // Display account information
            
        } catch (HyprException e) {
            e.printStackTrace();
        }
    }
    
    private void displayTransactionInfo() {
        String transactionType = mFragmentData.getTransactionType();
        String transactionAmount = mFragmentData.getTransactionAmount();
        String transactionText = mFragmentData.getTransactionText();
        
        // Display transaction information
  
    }
}

Inside the neighboring values directory, in overrides.xml, create a string resource for hypr_accept_transaction_fragment_class_override that contains the package path to the class, as in the code sample below:

<resources>
  <string name="hypr_accept_transaction_fragment_class_override">path.to.this.file.CustomAcceptTransactionFragment</string>
</resources>

SDK for iOS

Customize the Authentication Confirmation Screen

When starting an authentication from the web, a prompt on the mobile device asks the user to confirm that they want to perform the authentication.

Overriding the Authentication Confirmation UI

Here is sample code for modifying the confirmation view controller with an alert controller. You can use any ViewController you'd like in place of the alert controller.

let alertController = UIAlertController(title: "Login?", message: "", preferredStyle: .alert)
alertController.addAction(UIAlertAction(title: "Cancel", style: .default), handler: { _ in
  HYPRPromptHeadlessController.sharedInstance.cancel()
})
alertController.addAction(UIAlertAction(title: "OK", style: .default, handler: { _ in
  HYPRPromptHeadlessController.sharedInstance.confirm()
}))
HYPRPromptHeadlessController.sharedInstance().confirmationController = alertController

Customize the Transaction Confirmation Screen

When starting a transaction from the web, a prompt on the phone asks the user to confirm that they want to perform the authentication.

Overriding the Transaction Confirmation UI

Here is sample code for modifying the transaction view controller with an alert controller. You can use any ViewController you'd like in place of the alert controller.

let alertController = UIAlertController(title: "Login?", message: "", preferredStyle: .alert)
alertController.addAction(UIAlertAction(title: "Cancel", style: .default), handler: { _ in
  HYPRPromptHeadlessController.sharedInstance.cancel()
})
alertController.addAction(UIAlertAction(title: "OK", style: .default, handler: { _ in
  HYPRPromptHeadlessController.sharedInstance.confirm()
}))
HYPRPromptHeadlessController.sharedInstance().transactionViewController = alertController