Redesign payment screen

This uses a slightly different layout in landscape mode
and doesn't lock the QR code scanning orientation to fix orientation
detection which sometimes uses a wrong layout.

21 files changed, 590 insertions, 268 deletions

diff --git a/app/build.gradle b/app/build.gradle
index 8f40e5f..921bbb1 100644
--- a/app/build.gradle
+++ b/app/build.gradle
@@ -48,19 +48,15 @@ android {
 }
 
 dependencies {
-    implementation fileTree(dir: 'libs', include: ['*.jar'])
+    implementation project(":akono")
+
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
     implementation 'androidx.appcompat:appcompat:1.1.0'
     implementation 'androidx.core:core-ktx:1.2.0'
-    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
     implementation 'com.google.android.material:material:1.1.0'
     implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
-    testImplementation 'junit:junit:4.12'
-    androidTestImplementation 'androidx.test:runner:1.2.0'
-    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
-    implementation project(":akono")
-    implementation 'com.google.guava:guava:28.0-android'
 
+    // Navigation Library
     def nav_version = "2.2.1"
     implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
     implementation "androidx.navigation:navigation-ui-ktx:$nav_version"
@@ -79,5 +75,9 @@ dependencies {
     implementation 'me.zhanghai.android.materialprogressbar:library:1.6.1'
 
     // JSON parsing and serialization
-    implementation "com.fasterxml.jackson.module:jackson-module-kotlin:2.9.7"
+    implementation 'com.fasterxml.jackson.module:jackson-module-kotlin:2.10.2'
+
+    testImplementation 'junit:junit:4.13'
+    androidTestImplementation 'androidx.test:runner:1.2.0'
+    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
 }
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
index 99d83c2..4b9e4da 100644
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@@ -1,5 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
+<?xml version="1.0" encoding="utf-8"?><!--
   ~ This file is part of GNU Taler
   ~ (C) 2020 Taler Systems S.A.
   ~
@@ -20,7 +19,8 @@
         package="net.taler.wallet">
 
     <uses-permission android:name="android.permission.NFC" />
-    <uses-feature android:name="android.hardware.nfc.hce"
+    <uses-feature
+            android:name="android.hardware.nfc.hce"
             android:required="false" />
 
     <application
@@ -36,17 +36,24 @@
                 android:label="@string/app_name"
                 android:theme="@style/AppTheme.NoActionBar">
             <intent-filter>
-                <action android:name="android.intent.action.MAIN"/>
-                <category android:name="android.intent.category.LAUNCHER"/>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
             <intent-filter>
                 <action android:name="android.intent.action.VIEW" />
+
                 <category android:name="android.intent.category.DEFAULT" />
                 <category android:name="android.intent.category.BROWSABLE" />
+
                 <data android:scheme="taler" />
             </intent-filter>
         </activity>
 
+        <activity
+                android:name="com.journeyapps.barcodescanner.CaptureActivity"
+                android:screenOrientation="fullSensor"
+                tools:replace="screenOrientation" />
+
         <service
                 android:name=".HostCardEmulatorService"
                 android:exported="true"
diff --git a/app/src/main/java/net/taler/wallet/MainActivity.kt b/app/src/main/java/net/taler/wallet/MainActivity.kt
index e9b00f6..b2e716e 100644
--- a/app/src/main/java/net/taler/wallet/MainActivity.kt
+++ b/app/src/main/java/net/taler/wallet/MainActivity.kt
@@ -31,7 +31,8 @@ import androidx.appcompat.app.AppCompatActivity
 import androidx.core.view.GravityCompat
 import androidx.drawerlayout.widget.DrawerLayout
 import androidx.lifecycle.Observer
-import androidx.navigation.findNavController
+import androidx.navigation.NavController
+import androidx.navigation.fragment.NavHostFragment
 import androidx.navigation.ui.AppBarConfiguration
 import androidx.navigation.ui.setupWithNavController
 import com.google.android.material.navigation.NavigationView.OnNavigationItemSelectedListener
@@ -48,13 +49,12 @@ class MainActivity : AppCompatActivity(), OnNavigationItemSelectedListener,
 
     private val model: WalletViewModel by viewModels()
 
+    private lateinit var nav: NavController
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContentView(R.layout.activity_main)
 
-        nav_view.menu.getItem(0).isChecked = true
-        nav_view.setNavigationItemSelectedListener(this)
-
         fab.setOnClickListener {
             val integrator = IntentIntegrator(this)
             integrator.setPrompt("Place merchant's QR Code inside the viewfinder rectangle to initiate payment.")
@@ -62,13 +62,17 @@ class MainActivity : AppCompatActivity(), OnNavigationItemSelectedListener,
         }
         fab.hide()
 
-        setSupportActionBar(toolbar)
-        val navController = findNavController(R.id.nav_host_fragment)
-        val appBarConfiguration = AppBarConfiguration(
-            setOf(R.id.showBalance, R.id.settings, R.id.walletHistory),
-            drawer_layout
-        )
-        toolbar.setupWithNavController(navController, appBarConfiguration)
+        val navHostFragment =
+            supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
+        nav = navHostFragment.navController
+        nav_view.setupWithNavController(nav)
+        nav_view.setNavigationItemSelectedListener(this)
+        if (savedInstanceState == null) {
+            nav_view.menu.getItem(0).isChecked = true
+        }
+
+        val appBarConfiguration = AppBarConfiguration(nav.graph, drawer_layout)
+        toolbar.setupWithNavController(nav, appBarConfiguration)
 
         model.init()
         model.getBalances()
@@ -81,13 +85,13 @@ class MainActivity : AppCompatActivity(), OnNavigationItemSelectedListener,
         registerReceiver(object : BroadcastReceiver() {
             override fun onReceive(p0: Context?, p1: Intent?) {
 
-                if (navController.currentDestination?.id == R.id.promptPayment) {
+                if (nav.currentDestination?.id == R.id.promptPayment) {
                     return
                 }
 
                 val url = p1!!.extras!!.get("contractUrl") as String
 
-                findNavController(R.id.nav_host_fragment).navigate(R.id.action_global_promptPayment)
+                nav.navigate(R.id.action_global_promptPayment)
                 model.paymentManager.preparePay(url)
 
             }
@@ -156,13 +160,13 @@ class MainActivity : AppCompatActivity(), OnNavigationItemSelectedListener,
         // Handle navigation view item clicks here.
         when (item.itemId) {
             R.id.nav_home -> {
-                findNavController(R.id.nav_host_fragment).navigate(R.id.showBalance)
+                nav.navigate(R.id.showBalance)
             }
             R.id.nav_settings -> {
-                findNavController(R.id.nav_host_fragment).navigate(R.id.settings)
+                nav.navigate(R.id.settings)
             }
             R.id.nav_history -> {
-                findNavController(R.id.nav_host_fragment).navigate(R.id.walletHistory)
+                nav.navigate(R.id.walletHistory)
             }
         }
         val drawerLayout: DrawerLayout = findViewById(R.id.drawer_layout)
@@ -176,7 +180,8 @@ class MainActivity : AppCompatActivity(), OnNavigationItemSelectedListener,
             return
         }
 
-        val scanResult: IntentResult? = IntentIntegrator.parseActivityResult(requestCode, resultCode, data)
+        val scanResult: IntentResult? =
+            IntentIntegrator.parseActivityResult(requestCode, resultCode, data)
 
         if (scanResult == null || scanResult.contents == null) {
             Snackbar.make(nav_view, "QR Code scan canceled.", LENGTH_SHORT).show()
@@ -191,12 +196,12 @@ class MainActivity : AppCompatActivity(), OnNavigationItemSelectedListener,
         when {
             url.toLowerCase(ROOT).startsWith("taler://pay/") -> {
                 Log.v(TAG, "navigating!")
-                findNavController(R.id.nav_host_fragment).navigate(R.id.action_showBalance_to_promptPayment)
+                nav.navigate(R.id.action_showBalance_to_promptPayment)
                 model.paymentManager.preparePay(url)
             }
             url.toLowerCase(ROOT).startsWith("taler://withdraw/") -> {
                 Log.v(TAG, "navigating!")
-                findNavController(R.id.nav_host_fragment).navigate(R.id.action_showBalance_to_promptWithdraw)
+                nav.navigate(R.id.action_showBalance_to_promptWithdraw)
                 model.getWithdrawalInfo(url)
             }
             url.toLowerCase(ROOT).startsWith("taler://refund/") -> {
diff --git a/app/src/main/java/net/taler/wallet/ShowBalance.kt b/app/src/main/java/net/taler/wallet/ShowBalance.kt
index 7ff5bfe..b9e52ff 100644
--- a/app/src/main/java/net/taler/wallet/ShowBalance.kt
+++ b/app/src/main/java/net/taler/wallet/ShowBalance.kt
@@ -36,6 +36,7 @@ import androidx.recyclerview.widget.LinearLayoutManager
 import androidx.recyclerview.widget.RecyclerView
 import com.google.android.material.snackbar.Snackbar
 import com.google.zxing.integration.android.IntentIntegrator
+import com.google.zxing.integration.android.IntentIntegrator.QR_CODE_TYPES
 import me.zhanghai.android.materialprogressbar.MaterialProgressBar
 import org.json.JSONObject
 
@@ -244,9 +245,10 @@ class ShowBalance : Fragment(), PendingOperationClickListener {
         val view = inflater.inflate(R.layout.fragment_show_balance, container, false)
         val payQrButton = view.findViewById<Button>(R.id.button_pay_qr)
         payQrButton.setOnClickListener {
-            val integrator = IntentIntegrator(activity)
-            integrator.setPrompt("Place merchant's QR Code inside the viewfinder rectangle to initiate payment.")
-            integrator.initiateScan(listOf("QR_CODE"))
+            IntentIntegrator(activity).apply {
+                setBeepEnabled(true)
+                setOrientationLocked(false)
+            }.initiateScan(QR_CODE_TYPES)
         }
 
         this.balancesView = view.findViewById(R.id.list_balances)
@@ -321,8 +323,11 @@ class ShowBalance : Fragment(), PendingOperationClickListener {
         when (type) {
             "proposal-choice" -> {
                 Log.v(TAG, "got action click on proposal-choice")
-                val json = detail.toString(4)
-                throw IllegalStateException("proposal-choice wasn't aborted automatically: $json")
+                val proposalId = detail.optString("proposalId", "")
+                if (proposalId == "") {
+                    return
+                }
+                model.paymentManager.abortProposal(proposalId)
             }
         }
     }
diff --git a/app/src/main/java/net/taler/wallet/Utils.kt b/app/src/main/java/net/taler/wallet/Utils.kt
new file mode 100644
index 0000000..673fa2b
--- /dev/null
+++ b/app/src/main/java/net/taler/wallet/Utils.kt
@@ -0,0 +1,35 @@
+/*
+ * This file is part of GNU Taler
+ * (C) 2020 Taler Systems S.A.
+ *
+ * GNU Taler is free software; you can redistribute it and/or modify it under the
+ * terms of the GNU General Public License as published by the Free Software
+ * Foundation; either version 3, or (at your option) any later version.
+ *
+ * GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+package net.taler.wallet
+
+import android.view.View
+import android.view.View.INVISIBLE
+import android.view.View.VISIBLE
+
+fun View.fadeIn() {
+    alpha = 0f
+    visibility = VISIBLE
+    animate().alpha(1f).start()
+}
+
+fun View.fadeOut() {
+    if (visibility == INVISIBLE) return
+    animate().alpha(0f).withEndAction {
+        visibility = INVISIBLE
+        alpha = 1f
+    }.start()
+}
diff --git a/app/src/main/java/net/taler/wallet/WithdrawSuccessful.kt b/app/src/main/java/net/taler/wallet/WithdrawSuccessful.kt
index bb2abac..4ff7478 100644
--- a/app/src/main/java/net/taler/wallet/WithdrawSuccessful.kt
+++ b/app/src/main/java/net/taler/wallet/WithdrawSuccessful.kt
@@ -34,7 +34,7 @@ class WithdrawSuccessful : Fragment() {
         savedInstanceState: Bundle?
     ): View? {
         val view = inflater.inflate(R.layout.fragment_withdraw_successful, container, false)
-        view.findViewById<Button>(R.id.button_success_back).setOnClickListener {
+        view.findViewById<Button>(R.id.backButton).setOnClickListener {
             activity!!.findNavController(R.id.nav_host_fragment).navigateUp()
         }
         return view
diff --git a/app/src/main/java/net/taler/wallet/payment/AlreadyPaidFragment.kt b/app/src/main/java/net/taler/wallet/payment/AlreadyPaidFragment.kt
index b1abbf2..33e3a1d 100644
--- a/app/src/main/java/net/taler/wallet/payment/AlreadyPaidFragment.kt
+++ b/app/src/main/java/net/taler/wallet/payment/AlreadyPaidFragment.kt
@@ -39,7 +39,7 @@ class AlreadyPaidFragment : Fragment() {
     }
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-        button_success_back.setOnClickListener {
+        backButton.setOnClickListener {
             findNavController().navigateUp()
         }
     }
diff --git a/app/src/main/java/net/taler/wallet/payment/PaymentManager.kt b/app/src/main/java/net/taler/wallet/payment/PaymentManager.kt
index 5ddd5fa..a00a686 100644
--- a/app/src/main/java/net/taler/wallet/payment/PaymentManager.kt
+++ b/app/src/main/java/net/taler/wallet/payment/PaymentManager.kt
@@ -106,7 +106,7 @@ class PaymentManager(
         resetPayStatus()
     }
 
-    private fun abortProposal(proposalId: String) {
+    internal fun abortProposal(proposalId: String) {
         val args = JSONObject(mapOf("proposalId" to proposalId))
 
         Log.i(TAG, "aborting proposal")
diff --git a/app/src/main/java/net/taler/wallet/payment/PaymentSuccessfulFragment.kt b/app/src/main/java/net/taler/wallet/payment/PaymentSuccessfulFragment.kt
index 54b9b8d..2084c45 100644
--- a/app/src/main/java/net/taler/wallet/payment/PaymentSuccessfulFragment.kt
+++ b/app/src/main/java/net/taler/wallet/payment/PaymentSuccessfulFragment.kt
@@ -24,6 +24,7 @@ import androidx.fragment.app.Fragment
 import androidx.navigation.fragment.findNavController
 import kotlinx.android.synthetic.main.fragment_payment_successful.*
 import net.taler.wallet.R
+import net.taler.wallet.fadeIn
 
 /**
  * Fragment that shows the success message for a payment.
@@ -38,7 +39,9 @@ class PaymentSuccessfulFragment : Fragment() {
     }
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-        button_success_back.setOnClickListener {
+        successImageView.fadeIn()
+        successTextView.fadeIn()
+        backButton.setOnClickListener {
             findNavController().navigateUp()
         }
     }
diff --git a/app/src/main/java/net/taler/wallet/payment/PromptPaymentFragment.kt b/app/src/main/java/net/taler/wallet/payment/PromptPaymentFragment.kt
index 754a43e..2f7807a 100644
--- a/app/src/main/java/net/taler/wallet/payment/PromptPaymentFragment.kt
+++ b/app/src/main/java/net/taler/wallet/payment/PromptPaymentFragment.kt
@@ -21,7 +21,6 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.View.GONE
-import android.view.View.INVISIBLE
 import android.view.View.VISIBLE
 import android.view.ViewGroup
 import androidx.fragment.app.Fragment
@@ -31,10 +30,13 @@ import androidx.lifecycle.observe
 import androidx.navigation.fragment.findNavController
 import androidx.recyclerview.widget.LinearLayoutManager
 import androidx.transition.TransitionManager.beginDelayedTransition
-import kotlinx.android.synthetic.main.fragment_prompt_payment.*
+import kotlinx.android.synthetic.main.payment_bottom_bar.*
+import kotlinx.android.synthetic.main.payment_details.*
 import net.taler.wallet.Amount
 import net.taler.wallet.R
 import net.taler.wallet.WalletViewModel
+import net.taler.wallet.fadeIn
+import net.taler.wallet.fadeOut
 
 /**
  * Show a payment and ask the user to accept/decline.
@@ -69,7 +71,7 @@ class PromptPaymentFragment : Fragment() {
             layoutManager = LinearLayoutManager(requireContext())
         }
 
-        button_abort_payment.setOnClickListener {
+        abortButton.setOnClickListener {
             paymentManager.abortPay()
             findNavController().navigateUp()
         }
@@ -84,6 +86,11 @@ class PromptPaymentFragment : Fragment() {
 
     private fun showLoading(show: Boolean) {
         model.showProgressBar.value = show
+        if (show) {
+            progressBar.fadeIn()
+        } else {
+            progressBar.fadeOut()
+        }
     }
 
     private fun onPaymentStatusChanged(payStatus: PayStatus) {
@@ -91,18 +98,19 @@ class PromptPaymentFragment : Fragment() {
             is PayStatus.Prepared -> {
                 showLoading(false)
                 showOrder(payStatus.contractTerms, payStatus.totalFees)
-                button_confirm_payment.isEnabled = true
-                button_confirm_payment.setOnClickListener {
-                    showLoading(true)
+                confirmButton.isEnabled = true
+                confirmButton.setOnClickListener {
+                    model.showProgressBar.value = true
                     paymentManager.confirmPay(payStatus.proposalId)
-                    button_confirm_payment.isEnabled = false
+                    confirmButton.fadeOut()
+                    confirmProgressBar.fadeIn()
                 }
             }
             is PayStatus.InsufficientBalance -> {
                 showLoading(false)
                 showOrder(payStatus.contractTerms, null)
-                error_text.setText(R.string.payment_balance_insufficient)
-                fadeInView(error_text)
+                errorView.setText(R.string.payment_balance_insufficient)
+                errorView.fadeIn()
             }
             is PayStatus.Success -> {
                 showLoading(false)
@@ -116,8 +124,8 @@ class PromptPaymentFragment : Fragment() {
             }
             is PayStatus.Error -> {
                 showLoading(false)
-                error_text.text = getString(R.string.payment_error, payStatus.error)
-                fadeInView(error_text)
+                errorView.text = getString(R.string.payment_error, payStatus.error)
+                errorView.fadeIn()
             }
             is PayStatus.None -> {
                 // No payment active.
@@ -131,29 +139,23 @@ class PromptPaymentFragment : Fragment() {
     }
 
     private fun showOrder(contractTerms: ContractTerms, totalFees: Amount?) {
-        order_summary.text = contractTerms.summary
+        orderView.text = contractTerms.summary
         adapter.setItems(contractTerms.products)
         val amount = contractTerms.amount
         @SuppressLint("SetTextI18n")
-        order_amount.text = "${amount.amount} ${amount.currency}"
+        totalView.text = "${amount.amount} ${amount.currency}"
         if (totalFees != null && !totalFees.isZero()) {
             val fee = "${totalFees.amount} ${totalFees.currency}"
-            order_fees_amount.text = getString(R.string.payment_fee, fee)
-            fadeInView(order_fees_amount)
+            feeView.text = getString(R.string.payment_fee, fee)
+            feeView.fadeIn()
         } else {
-            order_fees_amount.visibility = INVISIBLE
+            feeView.visibility = GONE
         }
-        fadeInView(order_summary_label)
-        fadeInView(order_summary)
-        if (contractTerms.products.isNotEmpty()) fadeInView(detailsButton)
-        fadeInView(order_amount_label)
-        fadeInView(order_amount)
-    }
-
-    private fun fadeInView(v: View) {
-        v.alpha = 0f
-        v.visibility = VISIBLE
-        v.animate().alpha(1f).start()
+        orderLabelView.fadeIn()
+        orderView.fadeIn()
+        if (contractTerms.products.isNotEmpty()) detailsButton.fadeIn()
+        totalLabelView.fadeIn()
+        totalView.fadeIn()
     }
 
 }
diff --git a/app/src/main/res/drawable/ic_check_circle.xml b/app/src/main/res/drawable/ic_check_circle.xml
new file mode 100644
index 0000000..c299cc3
--- /dev/null
+++ b/app/src/main/res/drawable/ic_check_circle.xml
@@ -0,0 +1,26 @@
+<!--
+  ~ This file is part of GNU Taler
+  ~ (C) 2020 Taler Systems S.A.
+  ~
+  ~ GNU Taler is free software; you can redistribute it and/or modify it under the
+  ~ terms of the GNU General Public License as published by the Free Software
+  ~ Foundation; either version 3, or (at your option) any later version.
+  ~
+  ~ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+  ~ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+  ~ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License along with
+  ~ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+  -->
+
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="24dp"
+        android:height="24dp"
+        android:alpha="0.56"
+        android:viewportWidth="24.0"
+        android:viewportHeight="24.0">
+    <path
+            android:fillColor="@color/green"
+            android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM10,17l-5,-5 1.41,-1.41L10,14.17l7.59,-7.59L19,8l-9,9z" />
+</vector>
diff --git a/app/src/main/res/layout-w550dp/payment_bottom_bar.xml b/app/src/main/res/layout-w550dp/payment_bottom_bar.xml
new file mode 100644
index 0000000..f9fa32a
--- /dev/null
+++ b/app/src/main/res/layout-w550dp/payment_bottom_bar.xml
@@ -0,0 +1,124 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ This file is part of GNU Taler
+  ~ (C) 2020 Taler Systems S.A.
+  ~
+  ~ GNU Taler is free software; you can redistribute it and/or modify it under the
+  ~ terms of the GNU General Public License as published by the Free Software
+  ~ Foundation; either version 3, or (at your option) any later version.
+  ~
+  ~ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+  ~ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+  ~ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License along with
+  ~ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+  -->
+
+<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
+        xmlns:app="http://schemas.android.com/apk/res-auto"
+        xmlns:tools="http://schemas.android.com/tools"
+        android:id="@+id/bottomView"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        app:cardCornerRadius="0dp"
+        app:cardElevation="8dp"
+        tools:showIn="@layout/fragment_prompt_payment">
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content">
+
+        <TextView
+                android:id="@+id/totalLabelView"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:text="@string/payment_label_amount_total"
+                android:visibility="invisible"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toStartOf="@+id/totalView"
+                app:layout_constraintHorizontal_bias="1.0"
+                app:layout_constraintHorizontal_chainStyle="packed"
+                app:layout_constraintStart_toEndOf="@+id/abortButton"
+                app:layout_constraintTop_toTopOf="@+id/totalView"
+                app:layout_constraintVertical_bias="0.0"
+                tools:visibility="visible" />
+
+        <TextView
+                android:id="@+id/totalView"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:layout_marginTop="8dp"
+                android:layout_marginEnd="16dp"
+                android:textColor="?android:attr/textColorPrimary"
+                android:textStyle="bold"
+                android:visibility="invisible"
+                app:layout_constraintBottom_toTopOf="@+id/feeView"
+                app:layout_constraintEnd_toStartOf="@+id/confirmButton"
+                app:layout_constraintHorizontal_chainStyle="packed"
+                app:layout_constraintStart_toEndOf="@+id/totalLabelView"
+                app:layout_constraintTop_toTopOf="parent"
+                app:layout_goneMarginBottom="8dp"
+                tools:text="10 TESTKUDOS"
+                tools:visibility="visible" />
+
+        <TextView
+                android:id="@+id/feeView"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:layout_marginEnd="16dp"
+                android:layout_marginBottom="8dp"
+                android:visibility="gone"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toStartOf="@+id/confirmButton"
+                app:layout_constraintHorizontal_bias="1.0"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/totalView"
+                tools:text="@string/payment_fee"
+                tools:visibility="visible" />
+
+        <Button
+                android:id="@+id/abortButton"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_margin="8dp"
+                android:backgroundTint="@color/red"
+                android:text="@string/payment_button_abort"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toStartOf="@+id/confirmButton"
+                app:layout_constraintHorizontal_chainStyle="spread_inside"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent" />
+
+        <Button
+                android:id="@+id/confirmButton"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_margin="8dp"
+                android:backgroundTint="@color/green"
+                android:enabled="false"
+                android:text="@string/payment_button_confirm"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintHorizontal_bias="0.5"
+                app:layout_constraintStart_toEndOf="@+id/abortButton"
+                app:layout_constraintTop_toTopOf="parent"
+                tools:enabled="true" />
+
+        <ProgressBar
+                android:id="@+id/confirmProgressBar"
+                style="?android:attr/progressBarStyle"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:visibility="invisible"
+                app:layout_constraintBottom_toBottomOf="@+id/confirmButton"
+                app:layout_constraintEnd_toEndOf="@+id/confirmButton"
+                app:layout_constraintStart_toStartOf="@+id/confirmButton"
+                app:layout_constraintTop_toTopOf="@+id/confirmButton"
+                tools:visibility="visible" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+
+</com.google.android.material.card.MaterialCardView>
diff --git a/app/src/main/res/layout/content_main.xml b/app/src/main/res/layout/content_main.xml
index acfb4ef..c43af48 100644
--- a/app/src/main/res/layout/content_main.xml
+++ b/app/src/main/res/layout/content_main.xml
@@ -25,7 +25,7 @@
         tools:showIn="@layout/app_bar_main"
         tools:context=".MainActivity">
 
-    <fragment
+    <androidx.fragment.app.FragmentContainerView
             android:id="@+id/nav_host_fragment"
             android:name="androidx.navigation.fragment.NavHostFragment"
             android:layout_width="0dp"
@@ -37,4 +37,4 @@
             app:defaultNavHost="true"
             app:navGraph="@navigation/nav_graph" />
 
-</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/fragment_already_paid.xml b/app/src/main/res/layout/fragment_already_paid.xml
index f7f9d87..beda615 100644
--- a/app/src/main/res/layout/fragment_already_paid.xml
+++ b/app/src/main/res/layout/fragment_already_paid.xml
@@ -47,7 +47,7 @@
                 android:text="Go Back"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:id="@+id/button_success_back"/>
+                android:id="@+id/backButton"/>
 
     </LinearLayout>
 
diff --git a/app/src/main/res/layout/fragment_payment_successful.xml b/app/src/main/res/layout/fragment_payment_successful.xml
index f52380a..cf9e5e8 100644
--- a/app/src/main/res/layout/fragment_payment_successful.xml
+++ b/app/src/main/res/layout/fragment_payment_successful.xml
@@ -1,5 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
+<?xml version="1.0" encoding="utf-8"?><!--
   ~ This file is part of GNU Taler
   ~ (C) 2020 Taler Systems S.A.
   ~
@@ -15,40 +14,50 @@
   ~ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
   -->
 
-<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
-             xmlns:tools="http://schemas.android.com/tools"
-             android:layout_width="match_parent"
-             android:layout_height="match_parent"
-             android:layout_margin="15dp"
-             tools:context=".payment.PaymentSuccessfulFragment">
-
-
-    <LinearLayout
-            android:orientation="vertical"
-            android:layout_width="match_parent"
-            android:layout_height="match_parent">
-
-        <Space android:layout_width="match_parent" android:layout_height="0dp"
-        android:layout_weight="1"/>
-
-        <TextView
-                android:layout_gravity="center"
-                android:layout_width="match_parent"
-                android:textAlignment="center"
-                android:layout_height="50dp"
-                android:text="@string/payment_successful"
-                android:autoSizeTextType="uniform"
-                android:textColor="@android:color/holo_green_dark"/>
-
-
-        <Space android:layout_width="match_parent" android:layout_height="0dp"
-               android:layout_weight="1"/>
-        <Button
-                android:text="Go Back"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:id="@+id/button_success_back"/>
-
-    </LinearLayout>
-
-</FrameLayout>
\ No newline at end of file
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+        xmlns:app="http://schemas.android.com/apk/res-auto"
+        xmlns:tools="http://schemas.android.com/tools"
+        android:id="@+id/frameLayout"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:layout_margin="16dp"
+        tools:context=".payment.PaymentSuccessfulFragment">
+
+    <ImageView
+            android:id="@+id/successImageView"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:layout_margin="32dp"
+            android:src="@drawable/ic_check_circle"
+            app:layout_constraintBottom_toTopOf="@+id/successTextView"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            tools:ignore="ContentDescription" />
+
+    <androidx.appcompat.widget.AppCompatTextView
+            android:id="@+id/successTextView"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:layout_marginBottom="16dp"
+            android:text="@string/payment_successful"
+            android:textAlignment="center"
+            android:textColor="@color/green"
+            app:autoSizeMaxTextSize="48sp"
+            app:autoSizeMinTextSize="10sp"
+            app:autoSizeTextType="uniform"
+            app:layout_constraintBottom_toTopOf="@+id/backButton"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/successImageView" />
+
+    <Button
+            android:id="@+id/backButton"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:text="@string/payment_back_button"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/fragment_prompt_payment.xml b/app/src/main/res/layout/fragment_prompt_payment.xml
index 808abf4..26cbeb6 100644
--- a/app/src/main/res/layout/fragment_prompt_payment.xml
+++ b/app/src/main/res/layout/fragment_prompt_payment.xml
@@ -1,5 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
+<?xml version="1.0" encoding="utf-8"?><!--
   ~ This file is part of GNU Taler
   ~ (C) 2020 Taler Systems S.A.
   ~
@@ -22,159 +21,24 @@
         android:layout_height="match_parent"
         tools:context=".payment.PromptPaymentFragment">
 
-    <ScrollView
+    <include
+            android:id="@+id/scrollView"
+            layout="@layout/payment_details"
             android:layout_width="0dp"
             android:layout_height="0dp"
-            android:layout_marginBottom="16dp"
-            android:fillViewport="true"
-            app:layout_constraintBottom_toTopOf="@+id/button_abort_payment"
+            app:layout_constraintBottom_toTopOf="@+id/bottomView"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent">
+            app:layout_constraintTop_toTopOf="parent" />
 
-        <androidx.constraintlayout.widget.ConstraintLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content">
-
-            <TextView
-                    android:id="@+id/error_text"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_margin="@dimen/activity_horizontal_margin"
-                    android:textColor="@android:color/holo_red_dark"
-                    android:textSize="22sp"
-                    android:visibility="gone"
-                    app:layout_constraintBottom_toTopOf="@+id/order_summary_label"
-                    app:layout_constraintEnd_toEndOf="parent"
-                    app:layout_constraintStart_toStartOf="parent"
-                    app:layout_constraintTop_toTopOf="parent"
-                    app:layout_constraintVertical_chainStyle="packed"
-                    tools:text="@string/payment_balance_insufficient"
-                    tools:visibility="visible" />
-
-            <TextView
-                    android:id="@+id/order_summary_label"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_margin="@dimen/activity_horizontal_margin"
-                    android:text="@string/payment_label_order_summary"
-                    android:visibility="invisible"
-                    app:layout_constraintBottom_toTopOf="@+id/order_summary"
-                    app:layout_constraintEnd_toEndOf="parent"
-                    app:layout_constraintStart_toStartOf="parent"
-                    app:layout_constraintTop_toBottomOf="@+id/error_text"
-                    tools:visibility="visible" />
-
-            <TextView
-                    android:id="@+id/order_summary"
-                    android:layout_width="0dp"
-                    android:layout_height="wrap_content"
-                    android:layout_margin="@dimen/activity_horizontal_margin"
-                    android:layout_marginTop="16dp"
-                    android:gravity="center_horizontal"
-                    android:textAppearance="@style/TextAppearance.AppCompat.Headline"
-                    android:textSize="25sp"
-                    android:visibility="invisible"
-                    app:layout_constraintBottom_toTopOf="@+id/detailsButton"
-                    app:layout_constraintEnd_toEndOf="parent"
-                    app:layout_constraintStart_toStartOf="parent"
-                    app:layout_constraintTop_toBottomOf="@+id/order_summary_label"
-                    tools:text="2 x Cappuccino, 1 x Hot Meals, 1 x Dessert"
-                    tools:visibility="visible" />
-
-            <Button
-                    android:id="@+id/detailsButton"
-                    style="@style/Widget.AppCompat.Button.Colored"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:backgroundTint="@color/colorPrimary"
-                    android:text="@string/payment_show_details"
-                    android:visibility="gone"
-                    app:layout_constraintBottom_toTopOf="@+id/productsList"
-                    app:layout_constraintEnd_toEndOf="parent"
-                    app:layout_constraintStart_toStartOf="parent"
-                    app:layout_constraintTop_toBottomOf="@+id/order_summary"
-                    tools:visibility="visible" />
-
-            <androidx.recyclerview.widget.RecyclerView
-                    android:id="@+id/productsList"
-                    android:layout_width="0dp"
-                    android:layout_height="wrap_content"
-                    android:layout_margin="@dimen/activity_horizontal_margin"
-                    android:visibility="gone"
-                    app:layout_constraintBottom_toTopOf="@+id/order_amount_label"
-                    app:layout_constraintEnd_toEndOf="parent"
-                    app:layout_constraintStart_toStartOf="parent"
-                    app:layout_constraintTop_toBottomOf="@+id/detailsButton"
-                    tools:listitem="@layout/list_item_product"
-                    tools:visibility="visible" />
-
-            <TextView
-                    android:id="@+id/order_amount_label"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_margin="@dimen/activity_horizontal_margin"
-                    android:text="@string/payment_label_amount_total"
-                    android:visibility="invisible"
-                    app:layout_constraintBottom_toTopOf="@+id/order_amount"
-                    app:layout_constraintEnd_toEndOf="parent"
-                    app:layout_constraintStart_toStartOf="parent"
-                    app:layout_constraintTop_toBottomOf="@+id/productsList"
-                    tools:visibility="visible" />
-
-            <TextView
-                    android:id="@+id/order_amount"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_margin="@dimen/activity_horizontal_margin"
-                    android:textAppearance="@style/TextAppearance.AppCompat.Headline"
-                    android:visibility="invisible"
-                    app:layout_constraintBottom_toTopOf="@+id/order_fees_amount"
-                    app:layout_constraintEnd_toEndOf="parent"
-                    app:layout_constraintStart_toStartOf="parent"
-                    app:layout_constraintTop_toBottomOf="@+id/order_amount_label"
-                    tools:text="10 TESTKUDOS"
-                    tools:visibility="visible" />
-
-            <TextView
-                    android:id="@+id/order_fees_amount"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_margin="8dp"
-                    android:visibility="invisible"
-                    app:layout_constraintBottom_toBottomOf="parent"
-                    app:layout_constraintEnd_toEndOf="parent"
-                    app:layout_constraintStart_toStartOf="parent"
-                    app:layout_constraintTop_toBottomOf="@+id/order_amount"
-                    tools:text="@string/payment_fee"
-                    tools:visibility="visible" />
-
-        </androidx.constraintlayout.widget.ConstraintLayout>
-
-    </ScrollView>
-
-    <Button
-            android:id="@+id/button_abort_payment"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_margin="@dimen/activity_horizontal_margin"
-            android:text="@string/payment_button_abort"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintEnd_toStartOf="@+id/button_confirm_payment"
-            app:layout_constraintHorizontal_chainStyle="spread_inside"
-            app:layout_constraintStart_toStartOf="parent" />
-
-    <Button
-            android:id="@+id/button_confirm_payment"
-            style="@style/Widget.AppCompat.Button.Colored"
-            android:layout_width="wrap_content"
+    <include
+            android:id="@+id/bottomView"
+            layout="@layout/payment_bottom_bar"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_margin="@dimen/activity_horizontal_margin"
-            android:enabled="false"
-            android:text="@string/payment_button_confirm"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toEndOf="@+id/button_abort_payment"
-            tools:enabled="true" />
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/scrollView" />
 
 </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/fragment_withdraw_successful.xml b/app/src/main/res/layout/fragment_withdraw_successful.xml
index 60e1344..b1474de 100644
--- a/app/src/main/res/layout/fragment_withdraw_successful.xml
+++ b/app/src/main/res/layout/fragment_withdraw_successful.xml
@@ -60,7 +60,7 @@
                 android:layout_weight="1" />
 
         <Button
-                android:id="@+id/button_success_back"
+                android:id="@+id/backButton"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:text="Go Back" />
diff --git a/app/src/main/res/layout/payment_bottom_bar.xml b/app/src/main/res/layout/payment_bottom_bar.xml
new file mode 100644
index 0000000..5b5c9f3
--- /dev/null
+++ b/app/src/main/res/layout/payment_bottom_bar.xml
@@ -0,0 +1,124 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ This file is part of GNU Taler
+  ~ (C) 2020 Taler Systems S.A.
+  ~
+  ~ GNU Taler is free software; you can redistribute it and/or modify it under the
+  ~ terms of the GNU General Public License as published by the Free Software
+  ~ Foundation; either version 3, or (at your option) any later version.
+  ~
+  ~ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+  ~ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+  ~ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License along with
+  ~ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+  -->
+
+<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
+        xmlns:app="http://schemas.android.com/apk/res-auto"
+        xmlns:tools="http://schemas.android.com/tools"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        app:cardCornerRadius="0dp"
+        app:cardElevation="8dp"
+        tools:showIn="@layout/fragment_prompt_payment">
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content">
+
+        <TextView
+                android:id="@+id/totalLabelView"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:layout_marginTop="8dp"
+                android:layout_marginBottom="8dp"
+                android:text="@string/payment_label_amount_total"
+                android:visibility="invisible"
+                app:layout_constraintBottom_toTopOf="@+id/abortButton"
+                app:layout_constraintEnd_toStartOf="@+id/totalView"
+                app:layout_constraintHorizontal_bias="1.0"
+                app:layout_constraintHorizontal_chainStyle="spread_inside"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                app:layout_constraintVertical_bias="0.0"
+                tools:visibility="visible" />
+
+        <TextView
+                android:id="@+id/totalView"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:layout_marginTop="8dp"
+                android:layout_marginEnd="8dp"
+                android:textColor="?android:attr/textColorPrimary"
+                android:textStyle="bold"
+                android:visibility="invisible"
+                app:layout_constraintBottom_toTopOf="@+id/feeView"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintHorizontal_bias="1.0"
+                app:layout_constraintHorizontal_chainStyle="packed"
+                app:layout_constraintStart_toEndOf="@+id/totalLabelView"
+                app:layout_constraintTop_toTopOf="parent"
+                app:layout_constraintVertical_bias="0.0"
+                tools:text="10 TESTKUDOS"
+                tools:visibility="visible" />
+
+        <TextView
+                android:id="@+id/feeView"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:layout_marginEnd="8dp"
+                android:visibility="gone"
+                app:layout_constraintBottom_toTopOf="@+id/confirmButton"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintHorizontal_bias="1.0"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/totalView"
+                tools:text="@string/payment_fee"
+                tools:visibility="visible" />
+
+        <Button
+                android:id="@+id/abortButton"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_margin="8dp"
+                android:backgroundTint="@color/red"
+                android:text="@string/payment_button_abort"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toStartOf="@+id/confirmButton"
+                app:layout_constraintHorizontal_chainStyle="spread_inside"
+                app:layout_constraintStart_toStartOf="parent" />
+
+        <Button
+                android:id="@+id/confirmButton"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_margin="8dp"
+                android:backgroundTint="@color/green"
+                android:enabled="false"
+                android:text="@string/payment_button_confirm"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintHorizontal_bias="0.5"
+                app:layout_constraintStart_toEndOf="@+id/abortButton"
+                app:layout_constraintTop_toBottomOf="@+id/feeView"
+                tools:enabled="true" />
+
+        <ProgressBar
+                android:id="@+id/confirmProgressBar"
+                style="?android:attr/progressBarStyle"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:visibility="invisible"
+                app:layout_constraintBottom_toBottomOf="@+id/confirmButton"
+                app:layout_constraintEnd_toEndOf="@+id/confirmButton"
+                app:layout_constraintStart_toStartOf="@+id/confirmButton"
+                app:layout_constraintTop_toTopOf="@+id/confirmButton"
+                tools:visibility="visible" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+
+</com.google.android.material.card.MaterialCardView>
diff --git a/app/src/main/res/layout/payment_details.xml b/app/src/main/res/layout/payment_details.xml
new file mode 100644
index 0000000..60d1d73
--- /dev/null
+++ b/app/src/main/res/layout/payment_details.xml
@@ -0,0 +1,119 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ This file is part of GNU Taler
+  ~ (C) 2020 Taler Systems S.A.
+  ~
+  ~ GNU Taler is free software; you can redistribute it and/or modify it under the
+  ~ terms of the GNU General Public License as published by the Free Software
+  ~ Foundation; either version 3, or (at your option) any later version.
+  ~
+  ~ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+  ~ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+  ~ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License along with
+  ~ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+  -->
+
+<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
+        xmlns:app="http://schemas.android.com/apk/res-auto"
+        xmlns:tools="http://schemas.android.com/tools"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:fillViewport="true"
+        tools:showIn="@layout/fragment_prompt_payment">
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content">
+
+        <TextView
+                android:id="@+id/errorView"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_margin="@dimen/activity_horizontal_margin"
+                android:textAlignment="center"
+                android:textColor="@android:color/holo_red_dark"
+                android:textSize="22sp"
+                android:visibility="gone"
+                app:layout_constraintBottom_toTopOf="@+id/orderLabelView"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                app:layout_constraintVertical_chainStyle="packed"
+                tools:text="@string/payment_balance_insufficient"
+                tools:visibility="visible" />
+
+        <TextView
+                android:id="@+id/orderLabelView"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="@dimen/activity_horizontal_margin"
+                android:layout_marginTop="@dimen/activity_horizontal_margin"
+                android:layout_marginEnd="@dimen/activity_horizontal_margin"
+                android:text="@string/payment_label_order_summary"
+                android:textAlignment="center"
+                android:visibility="invisible"
+                app:layout_constraintBottom_toTopOf="@+id/orderView"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/errorView"
+                tools:visibility="visible" />
+
+        <TextView
+                android:id="@+id/orderView"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_margin="@dimen/activity_horizontal_margin"
+                android:layout_marginTop="16dp"
+                android:textAlignment="center"
+                android:textAppearance="@style/TextAppearance.AppCompat.Headline"
+                android:textSize="25sp"
+                android:visibility="invisible"
+                app:layout_constraintBottom_toTopOf="@+id/detailsButton"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/orderLabelView"
+                tools:text="2 x Cappuccino, 1 x Hot Meals, 1 x Dessert"
+                tools:visibility="visible" />
+
+        <Button
+                android:id="@+id/detailsButton"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/payment_show_details"
+                android:visibility="gone"
+                app:layout_constraintBottom_toTopOf="@+id/productsList"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/orderView"
+                tools:visibility="visible" />
+
+        <androidx.recyclerview.widget.RecyclerView
+                android:id="@+id/productsList"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_margin="@dimen/activity_horizontal_margin"
+                android:visibility="gone"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/detailsButton"
+                tools:listitem="@layout/list_item_product"
+                tools:visibility="visible" />
+
+        <ProgressBar
+                android:id="@+id/progressBar"
+                style="?android:attr/progressBarStyleLarge"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:indeterminate="false"
+                android:visibility="invisible"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                tools:visibility="visible" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+
+</ScrollView>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 707ace7..7bfb004 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -52,15 +52,16 @@
     <string name="history_reload">Reload History</string>
     <string name="history_empty">The wallet history is empty</string>
 
-    <string name="payment_fee">(plus an additional %s payment fee)</string>
+    <string name="payment_fee">+%s payment fee</string>
     <string name="payment_button_confirm">Confirm Payment</string>
-    <string name="payment_button_abort">Abort Payment</string>
-    <string name="payment_label_amount_total">Total Amount</string>
-    <string name="payment_label_order_summary">Order Summary</string>
+    <string name="payment_button_abort">Abort</string>
+    <string name="payment_label_amount_total">Total Amount:</string>
+    <string name="payment_label_order_summary">Order</string>
     <string name="payment_error">Error: %s</string>
     <string name="payment_balance_insufficient">Balance Insufficient!</string>
     <string name="payment_show_details">Show Details</string>
     <string name="payment_hide_details">Hide Details</string>
     <string name="payment_successful">Payment was successful</string>
+    <string name="payment_back_button">Go Back</string>
 
 </resources>
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index 6b40dbe..dadd00a 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -16,9 +16,7 @@
 
 <resources>
 
-    <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
-        <!-- Customize your theme here. -->
+    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
         <item name="colorPrimary">@color/colorPrimary</item>
         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
         <item name="colorAccent">@color/colorAccent</item>
@@ -27,8 +25,8 @@
         <item name="windowActionBar">false</item>
         <item name="windowNoTitle">true</item>
     </style>
-    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>
-    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>
+    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar"/>
+    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.MaterialComponents.Light"/>
 
     <style name="HistoryTitle">
         <item name="android:textSize">17sp</item>