Added App Payment Form

android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/KomojuPaymentScreen.kt

@@ -21,6 +21,7 @@ import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
@@ -64,6 +65,7 @@ fun KomojuPaymentScreen(sdkConfiguration: KomojuSDK.Configuration, onCompleted:
             onDismissRequest = {
                 onCompleted()
             },
+            containerColor = Color.White,
             shape = RectangleShape,
             sheetState = modalBottomSheetState,
             dragHandle = { PaymentSheetHandle(LocalI18nTextsProvider.current["PAYMENT_OPTIONS"], onCloseClicked = {}) },
@@ -73,7 +75,6 @@ fun KomojuPaymentScreen(sdkConfiguration: KomojuSDK.Configuration, onCompleted:
                     else -> SecureFlagPolicy.SecureOn
                 },
                 shouldDismissOnBackPress = false,
-                isFocusable = true,
             ),
         ) {
             Box(

android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/AppPayForm.kt

@@ -0,0 +1,112 @@
+package com.degica.komoju.android.sdk.ui.screens.payment.composables
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.degica.komoju.android.sdk.R
+import com.degica.komoju.android.sdk.types.Language
+import com.degica.komoju.android.sdk.ui.theme.KomojuMobileSdkTheme
+import com.degica.komoju.android.sdk.ui.theme.LocalI18nTextsProvider
+import com.degica.komoju.mobile.sdk.entities.PaymentMethod
+
+@Composable
+internal fun AppPayForm(paymentMethod: PaymentMethod) {
+    val titleKey = remember(paymentMethod) {
+        when (paymentMethod) {
+            is PaymentMethod.AliPay -> "PAYMENT_VIA_ALI_PAY"
+            is PaymentMethod.AuPay -> "PAYMENT_VIA_AU_PAY"
+            is PaymentMethod.LinePay -> "PAYMENT_VIA_LINE_PAY"
+            is PaymentMethod.MerPay -> "PAYMENT_VIA_MER_PAY"
+            is PaymentMethod.PayPay -> "PAYMENT_VIA_PAY_PAY"
+            is PaymentMethod.RakutenPay -> "PAYMENT_VIA_RAKUTEN"
+            else -> null
+        }
+    }
+
+    val messageKey = remember(paymentMethod) {
+        when (paymentMethod) {
+            is PaymentMethod.AliPay -> "ALI_PAY_REDIRECT_MESSAGE"
+            is PaymentMethod.AuPay -> "AU_PAY_REDIRECT_MESSAGE"
+            is PaymentMethod.LinePay -> "LINE_PAY_REDIRECT_MESSAGE"
+            is PaymentMethod.MerPay -> "MER_PAY_REDIRECT_MESSAGE"
+            is PaymentMethod.PayPay -> "PAY_PAY_REDIRECT_MESSAGE"
+            is PaymentMethod.RakutenPay -> "RAKUTEN_REDIRECT_MESSAGE"
+            else -> null
+        }
+    }
+
+    val paymentButtonKey = remember(paymentMethod) {
+        when (paymentMethod) {
+            is PaymentMethod.AliPay -> "CONTINUE_TO_ALI_PAY"
+            is PaymentMethod.AuPay -> "CONTINUE_TO_AU_PAY"
+            is PaymentMethod.LinePay -> "CONTINUE_TO_LINE_PAY"
+            is PaymentMethod.MerPay -> "CONTINUE_TO_MER_PAY"
+            is PaymentMethod.PayPay -> "CONTINUE_TO_PAY_PAY"
+            is PaymentMethod.RakutenPay -> "CONTINUE_TO_RAKUTEN"
+            else -> null
+        }
+    }
+
+    if (titleKey != null && messageKey != null && paymentButtonKey != null) {
+        Column(modifier = Modifier.padding(all = 16.dp)) {
+            Text(text = LocalI18nTextsProvider.current[titleKey], style = TextStyle(fontWeight = FontWeight.Bold, fontSize = 24.sp))
+            Spacer(modifier = Modifier.height(12.dp))
+            Text(text = LocalI18nTextsProvider.current[messageKey])
+            Spacer(modifier = Modifier.height(24.dp))
+            Row(
+                modifier = Modifier
+                    .background(Color(0xFFF3F7F9), shape = RoundedCornerShape(8.dp))
+                    .padding(16.dp),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                Image(
+                    painter = painterResource(R.drawable.komoju_ic_app_opens_info),
+                    contentDescription = "app_opens_info",
+                    modifier = Modifier.size(32.dp),
+                )
+                Spacer(modifier = Modifier.width(16.dp))
+                Text(text = LocalI18nTextsProvider.current["LIGHT_BOX_CONTENT"])
+            }
+            Spacer(modifier = Modifier.height(32.dp))
+            PaymentButton(LocalI18nTextsProvider.current[paymentButtonKey], modifier = Modifier.fillMaxWidth()) { }
+        }
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+private fun AppPayFormPreview() {
+    KomojuMobileSdkTheme(Language.ENGLISH) {
+        AppPayForm(
+            PaymentMethod.LinePay(
+                displayName = "LINE Pay",
+                hashedGateway = "LINE",
+                exchangeRate = 1.0,
+                currency = "JPY",
+                amount = 100.0,
+                additionalFields = listOf(),
+                isOffsite = false,
+            ),
+        )
+    }
+}

android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/PaymentMethodForm.kt

@@ -1,17 +1,10 @@
 package com.degica.komoju.android.sdk.ui.screens.payment.composables
 
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
 import com.degica.komoju.mobile.sdk.entities.PaymentMethod
 
 @Composable
@@ -67,8 +60,20 @@ internal fun PaymentMethodForm(paymentMethod: PaymentMethod) {
             },
         )
 
-        else -> Box(modifier = Modifier.height(420.dp).fillMaxWidth(), contentAlignment = Alignment.Center) {
-            Text("// TODO")
-        }
+        is PaymentMethod.AliPay,
+        is PaymentMethod.AuPay,
+        is PaymentMethod.LinePay,
+        is PaymentMethod.MerPay,
+        is PaymentMethod.PayPay,
+        is PaymentMethod.RakutenPay,
+        -> AppPayForm(paymentMethod)
+
+        is PaymentMethod.BankTransfer -> Unit
+        is PaymentMethod.BitCash -> Unit
+        is PaymentMethod.NetCash -> Unit
+        is PaymentMethod.Paidy -> Unit
+        is PaymentMethod.PayEasy -> Unit
+        is PaymentMethod.WebMoney -> Unit
+        is PaymentMethod.Other -> Unit
     }
 }

android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/PaymentMethodsRow.kt

@@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -51,28 +50,29 @@ private fun PaymentMethodComposable(paymentMethod: PaymentMethod, isSelected: Bo
             .clickable(onClick = onSelected)
             .padding(16.dp),
     ) {
-        Image(painter = painterResource(paymentMethod.displayIcon), contentDescription = "${paymentMethod.displayName} icon", modifier = Modifier.size(32.dp))
+        Image(painter = painterResource(paymentMethod.displayIcon), contentDescription = "${paymentMethod.displayName} icon", modifier = Modifier.height(32.dp))
         Spacer(modifier = Modifier.height(4.dp))
         Text(paymentMethod.displayName)
     }
 }
 
 private val PaymentMethod.displayIcon
     get() = when (this) {
-        is PaymentMethod.AliPay -> R.drawable.komoju_ic_credit_card
+        is PaymentMethod.AliPay -> R.drawable.komoju_ic_alipay
         is PaymentMethod.AuPay -> R.drawable.komoju_ic_au_pay
         is PaymentMethod.BankTransfer -> R.drawable.komoju_ic_bank_transfer
         is PaymentMethod.BitCash -> R.drawable.komoju_ic_bitcash
         is PaymentMethod.CreditCard -> R.drawable.komoju_ic_credit_card
         is PaymentMethod.Konbini -> R.drawable.komoju_ic_konbini
         is PaymentMethod.LinePay -> R.drawable.komoju_ic_linepay
-        is PaymentMethod.MerPay -> R.drawable.komoju_ic_credit_card
+        is PaymentMethod.MerPay -> R.drawable.komoju_ic_merpay
         is PaymentMethod.NetCash -> R.drawable.komoju_ic_credit_card
         is PaymentMethod.Paidy -> R.drawable.komoju_ic_paidy
         is PaymentMethod.PayEasy -> R.drawable.komoju_ic_credit_card
         is PaymentMethod.PayPay -> R.drawable.komoju_ic_paypay
         is PaymentMethod.RakutenPay -> R.drawable.komoju_ic_rakuten_pay
         is PaymentMethod.WebMoney -> R.drawable.komoju_ic_credit_card
+        is PaymentMethod.Other -> R.drawable.komoju_ic_credit_card
     }
 
 @Composable
@@ -108,6 +108,5 @@ private fun PaymentMethodComposablePreview() {
             displayName = "PayPay",
         ),
     )
-    PaymentMethodsRow(paymentMethods, paymentMethods.first()) {
-    }
+    PaymentMethodsRow(paymentMethods, paymentMethods.first()) {}
 }

android/src/main/java/com/degica/komoju/android/sdk/ui/screens/payment/composables/PaymentSheetHandle.kt

@@ -3,14 +3,16 @@ package com.degica.komoju.android.sdk.ui.screens.payment.composables
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Close
 import androidx.compose.material3.Text
 import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
@@ -21,18 +23,18 @@ import androidx.compose.ui.unit.sp
 
 @Composable
 internal fun PaymentSheetHandle(title: String, onCloseClicked: () -> Unit) {
-    Row(modifier = Modifier.padding(top = 16.dp)) {
+    Box(modifier = Modifier.padding(top = 16.dp)) {
         Text(
             title,
             modifier = Modifier
                 .padding(16.dp)
-                .weight(1f),
+                .fillMaxWidth(),
             style = TextStyle(fontWeight = FontWeight.Bold, color = Color.Black, textAlign = TextAlign.Center, fontSize = 16.sp),
         )
         Image(
             imageVector = Icons.Rounded.Close,
             contentDescription = "Close Payment Sheet",
-            modifier = Modifier
+            modifier = Modifier.align(Alignment.CenterEnd)
                 .clickable(
                     indication = ripple(bounded = true, radius = 24.dp),
                     interactionSource = remember { MutableInteractionSource() },

android/src/main/res/drawable/komoju_ic_alipay.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="38dp"
+    android:height="38dp"
+    android:viewportWidth="38"
+    android:viewportHeight="38">
+  <path
+      android:pathData="M30.862,23.864C36.233,25.688 37.519,25.764 37.519,25.764V6.08C37.519,2.736 34.796,0 31.543,0H5.976C2.723,0 0,2.736 0,6.08V31.92C0,35.264 2.723,38 5.976,38H31.468C34.796,38 37.443,35.264 37.443,31.92V31.692C37.443,31.692 27.685,27.588 22.768,25.156C19.44,29.26 15.204,31.768 10.817,31.768C3.328,31.768 0.756,25.156 4.312,20.748C5.068,19.76 6.43,18.924 8.472,18.392C11.649,17.632 16.717,18.924 21.483,20.444C22.315,18.848 23.071,17.1 23.601,15.2H8.926V13.68H16.49V11.02H7.337V9.5H16.49V5.7C16.49,5.7 16.49,5.016 17.171,5.016H20.878V9.5H29.955V11.02H20.878V13.68H28.291C27.61,16.644 26.475,19.304 25.189,21.66C27.383,22.572 29.35,23.332 30.862,23.864Z"
+      android:fillColor="#1677FF"
+      android:fillType="evenOdd"/>
+</vector>

android/src/main/res/drawable/komoju_ic_app_opens_info.xml

@@ -0,0 +1,19 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="32dp"
+    android:height="33dp"
+    android:viewportWidth="32"
+    android:viewportHeight="33">
+  <path
+      android:pathData="M16,0.5L16,0.5A16,16 0,0 1,32 16.5L32,16.5A16,16 0,0 1,16 32.5L16,32.5A16,16 0,0 1,0 16.5L0,16.5A16,16 0,0 1,16 0.5z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M6,6.5h20v20h-20z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M16.833,8.167L9.411,17.073C9.121,17.422 8.975,17.596 8.973,17.744C8.971,17.872 9.028,17.994 9.128,18.074C9.242,18.167 9.469,18.167 9.923,18.167H16L15.167,24.833L22.589,15.927C22.879,15.578 23.025,15.404 23.027,15.256C23.029,15.128 22.972,15.006 22.872,14.926C22.758,14.833 22.531,14.833 22.077,14.833H16L16.833,8.167Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#FFB800"
+      android:strokeColor="#FFB800"
+      android:strokeLineCap="round"/>
+</vector>

android/src/main/res/drawable/komoju_ic_merpay.xml

@@ -0,0 +1,24 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="150dp"
+    android:height="60dp"
+    android:viewportWidth="150"
+    android:viewportHeight="60">
+  <path
+      android:pathData="M143.71,22.74L137.53,38.04L131.27,22.74H125.07L134.74,44.38L129.65,56.29H135L149.46,22.74H143.71Z"
+      android:fillColor="#222222"/>
+  <path
+      android:pathData="M85,11.3H77.4H71.9V46.66H77.4V32.93H85C92.22,32.93 96.54,28.43 96.54,22.18C96.56,15.85 92.24,11.3 85,11.3ZM85.93,27.74H77.5V16.5H85.95C89.66,16.5 90.98,19.92 90.98,22.2C90.98,24.48 89.66,27.74 85.95,27.74H85.93Z"
+      android:fillColor="#222222"/>
+  <path
+      android:pathData="M110.38,22.42C103.25,22.42 98.07,27.55 98.07,34.62C98.07,41.8 102.92,46.82 109.86,46.82C112.71,46.82 115.78,45.13 116.89,43.02V46.67H122.46V34.62C122.46,27.21 117.79,22.42 110.38,22.42ZM110.32,41.92C106.24,41.92 103.68,39.12 103.68,34.61C103.68,30.45 106.54,27.31 110.32,27.31C114.36,27.31 116.82,30.18 116.82,34.61C116.85,38.16 114.64,41.93 110.32,41.93V41.92Z"
+      android:fillColor="#222222"/>
+  <path
+      android:pathData="M30.79,59.5L54,47.87C54.8,47.47 55.48,46.85 55.95,46.09C56.42,45.33 56.67,44.45 56.67,43.55V16.45C56.67,15.55 56.42,14.67 55.95,13.91C55.48,13.15 54.8,12.53 54,12.13L30.79,0.5C30.11,0.16 29.36,-0.01 28.61,-0.01C27.85,-0.01 27.1,0.16 26.42,0.5L3.22,12.13C2.42,12.53 1.74,13.15 1.27,13.91C0.8,14.67 0.55,15.55 0.54,16.45V43.55C0.55,44.45 0.8,45.33 1.27,46.09C1.74,46.85 2.42,47.47 3.22,47.87L26.42,59.5C27.1,59.84 27.85,60.01 28.61,60.01C29.36,60.01 30.11,59.84 30.79,59.5Z"
+      android:fillColor="#FF0211"/>
+  <path
+      android:pathData="M47.96,29.36C54.91,29.36 60.54,23.72 60.54,16.78C60.54,9.83 54.91,4.2 47.96,4.2C41.01,4.2 35.38,9.83 35.38,16.78C35.38,23.72 41.01,29.36 47.96,29.36Z"
+      android:fillColor="#4DC9FF"/>
+  <path
+      android:pathData="M8.27,39.76L5.81,38.53V31.25C5.81,29.12 7.01,27 9.49,27.25C11.8,27.5 13.59,29.56 14.14,30.9C14.51,30.56 14.96,30.31 15.45,30.17C15.93,30.04 16.45,30.03 16.94,30.14C18.21,30.31 22.98,32.14 22.98,38.59V47.18L20.28,45.82V37.79C20.28,35.43 18.84,33.46 16.9,33.24C16.1,33.14 15.4,33.79 15.4,35.17C15.4,36.56 15.4,43.34 15.4,43.34L12.93,42.1V34.5C12.93,31.15 10.76,30.09 9.81,30C9.28,29.94 8.28,30.26 8.28,32L8.27,39.76Z"
+      android:fillColor="#ffffff"/>
+</vector>

shared/src/commonMain/kotlin/com/degica/komoju/mobile/sdk/entities/PaymentMethod.kt

@@ -162,4 +162,13 @@ sealed interface PaymentMethod {
             data class SeicoMart(override val key: String) : KonbiniBrand
         }
     }
+
+    data class Other(
+        override val displayName: String,
+        override val hashedGateway: String,
+        override val exchangeRate: Double,
+        override val currency: String,
+        override val amount: Double,
+        override val additionalFields: List<String>,
+    ) : PaymentMethod
 }

shared/src/commonMain/kotlin/com/degica/komoju/mobile/sdk/remote/mappers/SessionMapper.kt

@@ -164,8 +164,15 @@ internal object SessionMapper {
                     secondIcon = paymentMethod.secondIcon.orEmpty(),
                     displayName = i18nTexts[paymentMethodType],
                 )
-
-                else -> null
+                null -> null
+                else -> PaymentMethod.Other(
+                    hashedGateway = paymentMethod.hashedGateway.orEmpty(),
+                    exchangeRate = paymentMethod.exchangeRate ?: 1.0,
+                    currency = paymentMethod.currency.orEmpty(),
+                    amount = paymentMethod.amount ?: 0.0,
+                    additionalFields = paymentMethod.additionalFields?.filterNotNull().orEmpty(),
+                    displayName = i18nTexts[paymentMethodType],
+                )
             }
         }.orEmpty(),
     )