diff --git a/app/src/main/java/org/mozilla/fenix/settings/creditcards/CreditCardEditorFragment.kt b/app/src/main/java/org/mozilla/fenix/settings/creditcards/CreditCardEditorFragment.kt
index 1cc7c5843..efad06313 100644
--- a/app/src/main/java/org/mozilla/fenix/settings/creditcards/CreditCardEditorFragment.kt
+++ b/app/src/main/java/org/mozilla/fenix/settings/creditcards/CreditCardEditorFragment.kt
@@ -12,6 +12,9 @@ import android.view.View
 import androidx.lifecycle.lifecycleScope
 import androidx.navigation.fragment.findNavController
 import androidx.navigation.fragment.navArgs
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.launch
+import kotlinx.coroutines.withContext
 import org.mozilla.fenix.R
 import org.mozilla.fenix.SecureFragment
 import org.mozilla.fenix.databinding.FragmentCreditCardEditorBinding
@@ -65,10 +68,14 @@ class CreditCardEditorFragment : SecureFragment(R.layout.fragment_credit_card_ed
 
         val binding = FragmentCreditCardEditorBinding.bind(view)
 
-        creditCardEditorState =
-            args.creditCard?.toCreditCardEditorState(storage) ?: getInitialCreditCardEditorState()
-        creditCardEditorView = CreditCardEditorView(binding, interactor)
-        creditCardEditorView.bind(creditCardEditorState)
+        lifecycleScope.launch(Dispatchers.Main) {
+            creditCardEditorState = withContext(Dispatchers.IO) {
+                args.creditCard?.toCreditCardEditorState(storage)
+                    ?: getInitialCreditCardEditorState()
+            }
+            creditCardEditorView = CreditCardEditorView(binding, interactor)
+            creditCardEditorView.bind(creditCardEditorState)
+        }
     }
 
     /**
diff --git a/app/src/main/java/org/mozilla/fenix/settings/creditcards/CreditCardEditorState.kt b/app/src/main/java/org/mozilla/fenix/settings/creditcards/CreditCardEditorState.kt
index f3fc4c0c3..529f7b6a4 100644
--- a/app/src/main/java/org/mozilla/fenix/settings/creditcards/CreditCardEditorState.kt
+++ b/app/src/main/java/org/mozilla/fenix/settings/creditcards/CreditCardEditorState.kt
@@ -31,9 +31,9 @@ data class CreditCardEditorState(
 /**
  * Returns a [CreditCardEditorState] from the given [CreditCard].
  */
-fun CreditCard.toCreditCardEditorState(storage: AutofillCreditCardsAddressesStorage): CreditCardEditorState {
+suspend fun CreditCard.toCreditCardEditorState(storage: AutofillCreditCardsAddressesStorage): CreditCardEditorState {
     val crypto = storage.getCreditCardCrypto()
-    val key = crypto.key()
+    val key = crypto.getOrGenerateKey()
     val cardNumber = crypto.decrypt(key, encryptedCardNumber)?.number ?: ""
     val startYear = expiryYear.toInt()
     val endYear = startYear + NUMBER_OF_YEARS_TO_SHOW
diff --git a/app/src/test/java/org/mozilla/fenix/settings/creditcards/CreditCardEditorStateTest.kt b/app/src/test/java/org/mozilla/fenix/settings/creditcards/CreditCardEditorStateTest.kt
index acda1e412..49babaf64 100644
--- a/app/src/test/java/org/mozilla/fenix/settings/creditcards/CreditCardEditorStateTest.kt
+++ b/app/src/test/java/org/mozilla/fenix/settings/creditcards/CreditCardEditorStateTest.kt
@@ -6,6 +6,7 @@ package org.mozilla.fenix.settings.creditcards
 
 import io.mockk.every
 import io.mockk.mockk
+import kotlinx.coroutines.runBlocking
 import mozilla.components.concept.storage.CreditCard
 import mozilla.components.concept.storage.CreditCardNumber
 import mozilla.components.service.sync.autofill.AutofillCreditCardsAddressesStorage
@@ -36,7 +37,7 @@ class CreditCardEditorStateTest {
     )
 
     @Test
-    fun testToCreditCardEditorState() {
+    fun testToCreditCardEditorState() = runBlocking {
         val storage: AutofillCreditCardsAddressesStorage = mockk(relaxed = true)
         val crypto: AutofillCrypto = mockk(relaxed = true)
 
diff --git a/app/src/test/java/org/mozilla/fenix/settings/creditcards/CreditCardEditorViewTest.kt b/app/src/test/java/org/mozilla/fenix/settings/creditcards/CreditCardEditorViewTest.kt
index ca8543985..a02b9dcca 100644
--- a/app/src/test/java/org/mozilla/fenix/settings/creditcards/CreditCardEditorViewTest.kt
+++ b/app/src/test/java/org/mozilla/fenix/settings/creditcards/CreditCardEditorViewTest.kt
@@ -10,6 +10,7 @@ import io.mockk.every
 import io.mockk.mockk
 import io.mockk.spyk
 import io.mockk.verify
+import kotlinx.coroutines.runBlocking
 import mozilla.components.concept.storage.CreditCard
 import mozilla.components.concept.storage.CreditCardNumber
 import mozilla.components.concept.storage.NewCreditCardFields
@@ -99,7 +100,7 @@ class CreditCardEditorViewTest {
     }
 
     @Test
-    fun `GIVEN a credit card THEN credit card form inputs are displaying the provided credit card information`() {
+    fun `GIVEN a credit card THEN credit card form inputs are displaying the provided credit card information`() = runBlocking {
         creditCardEditorView.bind(creditCard.toCreditCardEditorState(storage))
 
         assertEquals(cardNumber, fragmentCreditCardEditorBinding.cardNumberInput.text.toString())
@@ -120,7 +121,7 @@ class CreditCardEditorViewTest {
     }
 
     @Test
-    fun `GIVEN a credit card WHEN the delete card button is clicked THEN interactor is called`() {
+    fun `GIVEN a credit card WHEN the delete card button is clicked THEN interactor is called`() = runBlocking {
         creditCardEditorView.bind(creditCard.toCreditCardEditorState(storage))
 
         assertEquals(View.VISIBLE, fragmentCreditCardEditorBinding.deleteButton.visibility)
@@ -271,7 +272,7 @@ class CreditCardEditorViewTest {
     }
 
     @Test
-    fun `GIVEN a valid credit card WHEN the save button is clicked THEN interactor is called`() {
+    fun `GIVEN a valid credit card WHEN the save button is clicked THEN interactor is called`() = runBlocking {
         creditCardEditorView.bind(creditCard.toCreditCardEditorState(storage))
 
         fragmentCreditCardEditorBinding.saveButton.performClick()