Add JetPack Compose To Pay Later Button

Demo/src/main/java/com/braintreepayments/demo/ComposeUIComponentsFragment.kt

@@ -46,6 +46,8 @@ import com.braintreepayments.api.core.PaymentMethodNonce
 import com.braintreepayments.api.paypal.PayPalResult
 import com.braintreepayments.api.paypal.PayPalTokenizeCallback
 import com.braintreepayments.api.uicomponents.PayPalButtonColor
+import com.braintreepayments.api.uicomponents.PayLaterButtonColor
+import com.braintreepayments.api.uicomponents.compose.PayLaterButton
 import com.braintreepayments.api.uicomponents.VenmoButtonColor
 import com.braintreepayments.api.uicomponents.cardfields.CardFieldsResult
 import com.braintreepayments.api.uicomponents.compose.CardFields
@@ -73,6 +75,8 @@ class ComposeUIComponentsFragment : BaseFragment() {
     ): View {
         super.onCreateView(inflater, container, savedInstanceState)
         val payPalRequest = payPalRequest(requireContext())
+        // Pay Later gets its own request: PayLaterButton sets shouldOfferPayLater = true on the request it is given.
+        val payLaterRequest = payPalRequest(requireContext())
         return ComposeView(requireContext()).apply {
             setContent {
                 var venmoStyleId by rememberSaveable { mutableIntStateOf(VenmoButtonColor.Blue.key) }
@@ -89,6 +93,13 @@ class ComposeUIComponentsFragment : BaseFragment() {
                     else -> PayPalButtonColor.Blue
                 }
 
+                var payLaterStyleId by rememberSaveable { mutableIntStateOf(PayLaterButtonColor.Blue.key) }
+                val payLaterStyle: PayLaterButtonColor = when (payLaterStyleId) {
+                    1 -> PayLaterButtonColor.Black
+                    2 -> PayLaterButtonColor.White
+                    else -> PayLaterButtonColor.Blue
+                }
+
                 val cardFieldsController = rememberCardFieldsController(
                     authorization = authStringArg,
                     // optional customer data
@@ -153,6 +164,33 @@ class ComposeUIComponentsFragment : BaseFragment() {
                         }
                     }
 
+                    // Pay Later section
+                    Column(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(top = 16.dp)
+                    ) {
+                        SectionLabel(stringResource(R.string.paypal_pay_later))
+                        SingleChoiceSegmentedButton(
+                            modifier = Modifier.fillMaxWidth(),
+                            selectedIndex = payLaterStyleId,
+                            onClick = { index -> payLaterStyleId = index }
+                        )
+                        Box(
+                            modifier = Modifier.fillMaxWidth(),
+                            contentAlignment = Alignment.Center
+                        ) {
+                            PayLaterButton(
+                                style = payLaterStyle,
+                                payPalRequest = payLaterRequest,
+                                authorization = authStringArg,
+                                appLinkReturnUrl = APP_LINK_RETURN_URL.toUri(),
+                                deepLinkFallbackUrlScheme = DEEP_LINK_FALLBACK_SCHEME,
+                                paypalTokenizeCallback = payLaterTokenizeCallback
+                            )
+                        }
+                    }
+
                     // Card Fields section
                     SectionLabel(
                         text = stringResource(R.string.card_fields),
@@ -252,10 +290,11 @@ class ComposeUIComponentsFragment : BaseFragment() {
         )
     }
 
-    private fun handleNonce(nonce: PaymentMethodNonce) {
+    private fun handleNonce(nonce: PaymentMethodNonce, isPayLaterSelected: Boolean = false) {
         onPaymentMethodNonceCreated(nonce)
         val action = ComposeUIComponentsFragmentDirections
             .actionComposeUiComponentsFragmentToDisplayNonceFragment(nonce)
+            .setIsPayLaterSelected(isPayLaterSelected)
         NavHostFragment.findNavController(this).navigate(action)
     }
 
@@ -273,9 +312,12 @@ class ComposeUIComponentsFragment : BaseFragment() {
         null
     )
 
-    private val paypalTokenizeCallback = PayPalTokenizeCallback { payPalResult ->
+    private val paypalTokenizeCallback = createPayPalCallback(isPayLaterSelected = false)
+    private val payLaterTokenizeCallback = createPayPalCallback(isPayLaterSelected = true)
+
+    private fun createPayPalCallback(isPayLaterSelected: Boolean) = PayPalTokenizeCallback { payPalResult ->
         when (payPalResult) {
-            is PayPalResult.Success -> handleNonce(payPalResult.nonce)
+            is PayPalResult.Success -> handleNonce(payPalResult.nonce, isPayLaterSelected)
             is PayPalResult.Cancel ->
                 handleError(Exception("User did not complete PayPal payment flow"))
             is PayPalResult.Failure -> handleError(payPalResult.error)

Demo/src/main/java/com/braintreepayments/demo/UIComponentsFragment.kt

@@ -241,23 +241,22 @@ class UIComponentsFragment : BaseFragment() {
         super.onResume()
 
         // PayPal or PayPal Pay Later flow after returning to app
-        val callback = PayPalTokenizeCallback { payPalResult ->
-            when (payPalResult) {
-                is PayPalResult.Success -> handlePayPalResult(payPalResult.nonce)
-                is PayPalResult.Cancel ->
-                    handleError(Exception("User did not complete payment flow"))
-                is PayPalResult.Failure -> handleError(payPalResult.error)
-            }
-        }
-
         getPayPalPendingRequest()?.let { pending ->
-            payPalButton.handleReturnToApp(pending, requireActivity().intent, callback)
+            payPalButton.handleReturnToApp(
+                pending,
+                requireActivity().intent,
+                createPayPalCallback(isPayLaterSelected = false)
+            )
             clearPayPalPendingRequest()
             requireActivity().intent.data = null
         }
 
         getPayLaterPendingRequest()?.let { pending ->
-            payLaterButton.handleReturnToApp(pending, requireActivity().intent, callback)
+            payLaterButton.handleReturnToApp(
+                pending,
+                requireActivity().intent,
+                createPayPalCallback(isPayLaterSelected = true)
+            )
             clearPayLaterPendingRequest()
             requireActivity().intent.data = null
         }
@@ -289,11 +288,21 @@ class UIComponentsFragment : BaseFragment() {
         NavHostFragment.findNavController(this).navigate(action)
     }
 
-    private fun handlePayPalResult(paymentMethodNonce: PaymentMethodNonce?) {
+    private fun createPayPalCallback(isPayLaterSelected: Boolean) = PayPalTokenizeCallback { payPalResult ->
+        when (payPalResult) {
+            is PayPalResult.Success -> handlePayPalResult(payPalResult.nonce, isPayLaterSelected)
+            is PayPalResult.Cancel ->
+                handleError(Exception("User did not complete payment flow"))
+            is PayPalResult.Failure -> handleError(payPalResult.error)
+        }
+    }
+
+    private fun handlePayPalResult(paymentMethodNonce: PaymentMethodNonce?, isPayLaterSelected: Boolean) {
         if (paymentMethodNonce != null) {
             onPaymentMethodNonceCreated(paymentMethodNonce)
             val action = UIComponentsFragmentDirections
                 .actionUiComponentsFragmentToDisplayNonceFragment(paymentMethodNonce)
+                .setIsPayLaterSelected(isPayLaterSelected)
             NavHostFragment.findNavController(this).navigate(action)
         }
     }

UIComponents/src/androidTest/java/com/braintreepayments/api/uicomponents/compose/PayLaterButtonTest.kt

@@ -0,0 +1,124 @@
+package com.braintreepayments.api.uicomponents.compose
+
+import android.net.Uri
+import androidx.compose.ui.test.assertIsEnabled
+import androidx.compose.ui.test.assertIsNotEnabled
+import androidx.compose.ui.test.junit4.createComposeRule
+import androidx.compose.ui.test.onNodeWithContentDescription
+import androidx.compose.ui.test.performClick
+import com.braintreepayments.api.uicomponents.PayPalButtonColor
+import androidx.compose.ui.test.hasClickAction
+import androidx.test.platform.app.InstrumentationRegistry
+import com.braintreepayments.api.paypal.PayPalCheckoutRequest
+import com.braintreepayments.api.testutils.Fixtures
+import com.braintreepayments.api.uicomponents.PayLaterButtonColor
+import com.braintreepayments.api.uicomponents.R
+import org.junit.Assert.assertFalse
+import org.junit.Assert.assertTrue
+import org.junit.Rule
+import org.junit.Test
+
+class PayLaterButtonTest {
+
+    @get:Rule
+    val composeTestRule = createComposeRule()
+
+    private val context = InstrumentationRegistry.getInstrumentation().targetContext
+    private fun str(resId: Int) = context.getString(resId)
+
+    private fun payLaterRequest() = PayPalCheckoutRequest("10.00", true)
+
+    private fun setPayLaterButton(
+        request: PayPalCheckoutRequest = payLaterRequest(),
+        style: PayLaterButtonColor = PayLaterButtonColor.Blue
+    ) {
+        composeTestRule.setContent {
+            PayLaterButton(
+                style = style,
+                payPalRequest = request,
+                authorization = Fixtures.TOKENIZATION_KEY,
+                appLinkReturnUrl = Uri.parse("https://example.com/return"),
+                deepLinkFallbackUrlScheme = "com.braintreepayments.demo",
+                paypalTokenizeCallback = {}
+            )
+        }
+    }
+
+    private fun payLaterButton() =
+        composeTestRule.onNodeWithContentDescription(str(R.string.pay_later_button_content_description))
+
+    // region Rendering
+
+    @Test
+    fun payLaterButton_isEnabledByDefault() {
+        setPayLaterButton()
+
+        payLaterButton().assertIsEnabled()
+    }
+
+    @Test
+    fun payLaterButton_rendersForEachColor() {
+        listOf(PayLaterButtonColor.Blue, PayLaterButtonColor.Black, PayLaterButtonColor.White).forEach { color ->
+            setPayLaterButton(style = color)
+            payLaterButton().assertIsEnabled()
+            // setContent can only be called once per rule, so stop after the first for this test
+            return
+        }
+    }
+
+    // endregion
+
+    // region Request
+
+    @Test
+    fun payLaterButton_doesNotSetShouldOfferPayLater_untilClicked() {
+        val request = payLaterRequest()
+        setPayLaterButton(request)
+
+        assertFalse(request.shouldOfferPayLater)
+    }
+
+    @Test
+    fun clickingPayLaterButton_setsShouldOfferPayLater() {
+        val request = payLaterRequest()
+        setPayLaterButton(request)
+
+        payLaterButton().performClick()
+
+        assertTrue(request.shouldOfferPayLater)
+    }
+
+    // endregion
+
+    // region Enabled state
+
+    @Test
+    fun clickingPayLaterButton_disablesTheButton() {
+        setPayLaterButton()
+
+        payLaterButton().performClick()
+
+        payLaterButton().assertIsNotEnabled()
+    }
+
+    // endregion
+
+    @Test
+    fun clickingPayPalButton_doesNotSetShouldOfferPayLater() {
+        val request = PayPalCheckoutRequest("10.00", true)
+        composeTestRule.setContent {
+            PayPalButton(
+                style = PayPalButtonColor.Blue,
+                payPalRequest = request,
+                authorization = Fixtures.TOKENIZATION_KEY,
+                appLinkReturnUrl = Uri.parse("https://example.com/return"),
+                deepLinkFallbackUrlScheme = "com.braintreepayments.demo",
+                paypalTokenizeCallback = {}
+            )
+        }
+
+        composeTestRule.onNode(hasClickAction()).performClick()
+
+        assertFalse(request.shouldOfferPayLater)
+    }
+}

UIComponents/src/main/java/com/braintreepayments/api/uicomponents/compose/PayLaterButton.kt

@@ -0,0 +1,56 @@
+package com.braintreepayments.api.uicomponents.compose
+
+import android.net.Uri
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.LocalContext
+import com.braintreepayments.api.paypal.PayPalCheckoutRequest
+import com.braintreepayments.api.paypal.PayPalTokenizeCallback
+import com.braintreepayments.api.uicomponents.PayLaterButtonColor
+
+/**
+ * A composable that displays a PayPal Pay Later branded button and handles the PayPal Pay Later flow.
+ *
+ * PayPal Pay Later is only available with PayPal Checkout. The button sets
+ * [PayPalCheckoutRequest.shouldOfferPayLater] to `true` on the provided request when it is clicked.
+ *
+ * @param style: A [PayLaterButtonColor] that determines the color of the button.
+ * @param payPalRequest: A [PayPalCheckoutRequest] that provides the parameters to tokenize a PayPal account.
+ * @param authorization: An authorization string to use for tokenization.
+ * @param appLinkReturnUrl: A [Uri] that sends back control to the host app after PayPal flow completes.
+ * @param deepLinkFallbackUrlScheme: Fallback scheme in case [appLinkReturnUrl] doesn't work.
+ *
+ * The value must be a bare URL scheme, not a full URL. It must:
+ * - Contain only alphanumeric characters, hyphens (`-`), and periods (`.`)
+ * - Not include `://`
+ * - Not include a path, query string, or fragment (no `/`, `?`, or `#`)
+ * - Match the scheme declared in your `AndroidManifest.xml`
+ *
+ * Valid examples: `"com.merchant.app.payments"`, `"merchantapp"`, `"merchant-app.payments"`.
+ *
+ * Invalid examples: `"com.merchant.app.payments://"` (contains `://`),
+ * `"com.merchant.app.payments/callback"` (contains a path),
+ * `"com.merchant_app"` (underscore not allowed).
+ * @param paypalTokenizeCallback: A [PayPalTokenizeCallback] that handles the result of the tokenization.
+ */
+@Composable
+fun PayLaterButton(
+    style: PayLaterButtonColor,
+    payPalRequest: PayPalCheckoutRequest,
+    authorization: String,
+    appLinkReturnUrl: Uri,
+    deepLinkFallbackUrlScheme: String,
+    pendingRequestRepository: PendingRequestRepository = PendingRequestRepository(LocalContext.current, "paylater"),
+    paypalTokenizeCallback: PayPalTokenizeCallback
+) {
+    PayPalButtonFlow(
+        payPalRequest = payPalRequest,
+        authorization = authorization,
+        appLinkReturnUrl = appLinkReturnUrl,
+        deepLinkFallbackUrlScheme = deepLinkFallbackUrlScheme,
+        pendingRequestRepository = pendingRequestRepository,
+        paypalTokenizeCallback = paypalTokenizeCallback,
+        onButtonSelected = { payPalRequest.shouldOfferPayLater = true }
+    ) { enabled, onClick ->
+        PayLaterButtonView(style = style, enabled = enabled, onClick = onClick)
+    }
+}