Autofill support for PAYONE credit card forms (#178)

Author: cmaier

CHANGELOG.md

@@ -4,11 +4,16 @@ All notable changes to this project will be documented in this file.
 ## UNRELEASED
 ### Added
 * ui/ui-toolkit: i18n using the Lokalise
+* Autofill support for PAYONE credit card forms
 ### Changed
-* ui: The `ProductResolver.Builder` now requires a project as constructor param, since the default value has been removed
 ### Removed
 * ui: Remove phrase for i18n
 ### Fixed
+
+## [0.72.5]
+### Changed
+* ui: The `ProductResolver.Builder` now requires a project as constructor param, since the default value has been removed
+### Fixed
 * core: Handle `SQLiteDatabaseLockedException` to fix app crash when updating the database
 * ui: Avoid npe caused by `isEmpty()` check on a null shopping cart
 * ui: Change project reference in `ProductResolver.kt` to get rid of IllegalArgumentException

core/src/main/java/io/snabble/sdk/Snabble.kt

@@ -21,6 +21,7 @@ import io.snabble.sdk.customization.IsMergeable
 import io.snabble.sdk.events.Events
 import io.snabble.sdk.extensions.getPackageInfoCompat
 import io.snabble.sdk.payment.PaymentCredentialsStore
+import io.snabble.sdk.payment.data.FormPrefillData
 import io.snabble.sdk.utils.*
 import okhttp3.OkHttpClient
 import java.io.ByteArrayInputStream
@@ -313,6 +314,11 @@ object Snabble {
      */
     var isMergeable: IsMergeable? = null
 
+    /**
+     * Set to have PAYONE forms prefilled with the given data.
+     */
+    var formPrefillData: FormPrefillData? = null
+
     /**
      * Setup the snabble SDK.
      *

core/src/main/java/io/snabble/sdk/payment/data/FormPrefillData.kt

@@ -0,0 +1,16 @@
+package io.snabble.sdk.payment.data
+
+import android.os.Parcelable
+import com.google.gson.annotations.SerializedName
+import kotlinx.parcelize.Parcelize
+
+@Parcelize
+data class FormPrefillData(
+    @SerializedName("name") val name: String? = null,
+    @SerializedName("street") val street: String? = null,
+    @SerializedName("zip") val zip: String? = null,
+    @SerializedName("city") val city: String? = null,
+    @SerializedName("countryCode") val countryCode: String? = null,
+    @SerializedName("stateCode") val stateCode: String? = null,
+    @SerializedName("email") val email: String? = null
+) : Parcelable

ui/src/main/java/io/snabble/sdk/ui/payment/PaymentInputViewHelper.kt

@@ -33,7 +33,7 @@ object PaymentInputViewHelper {
                 if (useDatatrans && paymentMethod != null) {
                     Datatrans.registerCard(activity, project, paymentMethod)
                 } else if (usePayone && paymentMethod != null) {
-                    Payone.registerCard(activity, project, paymentMethod)
+                    Payone.registerCard(activity, project, paymentMethod, Snabble.formPrefillData)
                 } else {
                     when (paymentMethod) {
                         PaymentMethod.VISA -> {

ui/src/main/java/io/snabble/sdk/ui/payment/Payone.kt

@@ -8,9 +8,9 @@ import com.google.gson.annotations.SerializedName
 import io.snabble.sdk.PaymentMethod
 import io.snabble.sdk.Project
 import io.snabble.sdk.Snabble
+import io.snabble.sdk.payment.data.FormPrefillData
 import io.snabble.sdk.ui.R
 import io.snabble.sdk.ui.SnabbleUI
-import io.snabble.sdk.ui.payment.creditcard.data.CreditCardInfo
 import io.snabble.sdk.utils.Dispatch
 import io.snabble.sdk.utils.Logger
 import io.snabble.sdk.utils.SimpleJsonCallback
@@ -72,7 +72,8 @@ object Payone {
     fun registerCard(
         activity: FragmentActivity,
         project: Project,
-        paymentMethod: PaymentMethod
+        paymentMethod: PaymentMethod,
+        formPrefillData: FormPrefillData?
     ) {
         val descriptor = project.paymentMethodDescriptors.find { it.paymentMethod == paymentMethod }
         if (descriptor == null) {
@@ -107,6 +108,7 @@ object Payone {
                     args.putString(PayoneInputView.ARG_PROJECT_ID, project.id)
                     args.putSerializable(PayoneInputView.ARG_PAYMENT_TYPE, paymentMethod)
                     args.putParcelable(PayoneInputView.ARG_TOKEN_DATA, response)
+                    args.putParcelable(PayoneInputView.ARG_FORM_PREFILL_DATA, formPrefillData)
                     Dispatch.mainThread {
                         SnabbleUI.executeAction(activity, SnabbleUI.Event.SHOW_PAYONE_INPUT, args)
                     }

ui/src/main/java/io/snabble/sdk/ui/payment/PayoneInputFragment.kt

@@ -3,6 +3,7 @@ package io.snabble.sdk.ui.payment
 import android.os.Bundle
 import android.view.View
 import io.snabble.sdk.PaymentMethod
+import io.snabble.sdk.payment.data.FormPrefillData
 import io.snabble.sdk.ui.BaseFragment
 import io.snabble.sdk.ui.R
 import io.snabble.sdk.ui.utils.parcelableExtra
@@ -16,22 +17,25 @@ open class PayoneInputFragment : BaseFragment(
         const val ARG_PROJECT_ID = PayoneInputView.ARG_PROJECT_ID
         const val ARG_PAYMENT_TYPE = PayoneInputView.ARG_PAYMENT_TYPE
         const val ARG_TOKEN_DATA = PayoneInputView.ARG_TOKEN_DATA
+        const val ARG_FORM_PREFILL_DATA = PayoneInputView.ARG_FORM_PREFILL_DATA
     }
 
     private lateinit var projectId: String
     private lateinit var paymentMethod: PaymentMethod
     private lateinit var tokenizationData: Payone.PayoneTokenizationData
+    private var formPrefillData: FormPrefillData? = null
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
 
         projectId = requireNotNull(arguments?.getString(ARG_PROJECT_ID, null))
         paymentMethod = requireNotNull(arguments?.serializableExtra(ARG_PAYMENT_TYPE) as? PaymentMethod)
         tokenizationData = requireNotNull(arguments?.parcelableExtra(ARG_TOKEN_DATA))
+        formPrefillData = arguments?.parcelableExtra(ARG_FORM_PREFILL_DATA)
     }
 
     override fun onActualViewCreated(view: View, savedInstanceState: Bundle?) {
         view.findViewById<PayoneInputView>(R.id.user_payment_method_view)
-            .load(projectId, paymentMethod, tokenizationData)
+            .load(projectId, paymentMethod, tokenizationData, formPrefillData)
     }
 }

ui/src/main/java/io/snabble/sdk/ui/payment/PayoneInputView.kt

@@ -27,6 +27,7 @@ import io.snabble.sdk.PaymentMethod
 import io.snabble.sdk.Project
 import io.snabble.sdk.Snabble
 import io.snabble.sdk.payment.PaymentCredentials
+import io.snabble.sdk.payment.data.FormPrefillData
 import io.snabble.sdk.ui.Keyguard
 import io.snabble.sdk.ui.R
 import io.snabble.sdk.ui.SnabbleUI
@@ -62,6 +63,7 @@ class PayoneInputView @JvmOverloads constructor(context: Context, attrs: Attribu
     private lateinit var project: Project
     private lateinit var tokenizationData: PayoneTokenizationData
     private lateinit var threeDHint: TextView
+    private var formPrefillData: FormPrefillData? = null
     private var lastPreAuthResponse: Payone.PreAuthResponse? = null
     private var polling = LazyWorker.createLifeCycleAwareJob(context) {
         lastPreAuthResponse?.links?.get("preAuthStatus")?.href?.let { statusUrl ->
@@ -169,11 +171,13 @@ class PayoneInputView @JvmOverloads constructor(context: Context, attrs: Attribu
     fun load(
         projectId: String,
         paymentType: PaymentMethod,
-        tokenizationData: PayoneTokenizationData
+        tokenizationData: PayoneTokenizationData,
+        formPrefillData: FormPrefillData?
     ) {
         this.project = Snabble.projects.first { it.id == projectId }
         this.paymentType = paymentType
         this.tokenizationData = tokenizationData
+        this.formPrefillData = formPrefillData
         inflateView()
     }
 
@@ -418,6 +422,9 @@ class PayoneInputView @JvmOverloads constructor(context: Context, attrs: Attribu
         fun log(message: String?) {
             Logger.d(message)
         }
+
+        @JavascriptInterface
+        fun prefillData(): String = GsonHolder.get().toJson(formPrefillData)
     }
 
     override fun onStateChanged(source: LifecycleOwner, event: Lifecycle.Event) {
@@ -469,6 +476,7 @@ class PayoneInputView @JvmOverloads constructor(context: Context, attrs: Attribu
         const val ARG_PROJECT_ID = "projectId"
         const val ARG_PAYMENT_TYPE = "paymentType"
         const val ARG_TOKEN_DATA = "tokenData"
+        const val ARG_FORM_PREFILL_DATA = "formPrefillData"
     }
 }
 

ui/src/main/res/raw/snabble_payoneform.html

@@ -59,9 +59,6 @@
     outline: none;
     background-color: transparent;
 }
-.form-group:has(select:disabled) {
-    display: none;
-}
 #submit {
     margin: 2rem 0;
     background-color:#07b;
@@ -1075,6 +1072,7 @@
     const stateSelect = document.getElementById('stateSelect')
     stateSelect.replaceChildren()
     stateSelect.disabled = !subdivisions[countryCode]
+    stateSelect.closest('.form-group').style.display = !subdivisions[countryCode] ? 'none' : 'block'
 
     if (!subdivisions[countryCode]) return
 
@@ -1109,6 +1107,27 @@
     handleCountrySelect(localeCountryCode);
 }
 countryOptions();
+
+function prefillForm() {
+    const data = JSON.parse(snabble.prefillData())
+    document.getElementById('name').value = data.name || ''
+    document.getElementById('street').value = data.street || ''
+    document.getElementById('zip').value = data.zip || ''
+    document.getElementById('city').value = data.city || ''
+    document.getElementById('email').value = data.email || ''
+
+    if (typeof data.countryCode !== 'undefined') {
+        const countrySelect = document.getElementById('countrySelect')
+        countrySelect.selectedIndex = countries.findIndex(country => country.code == data.countryCode) + 1
+        handleCountrySelect(data.countryCode);
+
+        if (typeof data.stateCode !== 'undefined') {
+            const selectState = document.getElementById('stateSelect')
+            selectState.selectedIndex = subdivisions[data.countryCode].findIndex(state => state.code == data.stateCode) + 1
+        }
+    }
+}
+prefillForm()
 </script>
 </body>
 </html>