Add new CustomerSheet playground

paymentsheet-example/src/main/AndroidManifest.xml

@@ -61,6 +61,19 @@
  />
  </intent-filter>
  </activity>
+ <activity android:name=".playground.customersheet.CustomerSheetPlaygroundActivity" android:exported="true">
+ <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="stripepaymentsheetexample"
+ android:host="customersheetplayground"
+ />
+ </intent-filter>
+ </activity>
  </application>
 
 </manifest>

paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/MainActivity.kt

@@ -35,13 +35,13 @@ import com.stripe.android.paymentsheet.example.databinding.ActivityMainBinding
 import com.stripe.android.paymentsheet.example.samples.ui.SECTION_ALPHA
 import com.stripe.android.paymentsheet.example.samples.ui.addresselement.AddressElementExampleActivity
 import com.stripe.android.paymentsheet.example.samples.ui.customersheet.CustomerSheetExampleActivity
-import com.stripe.android.paymentsheet.example.samples.ui.customersheet.playground.CustomerSheetPlaygroundActivity
 import com.stripe.android.paymentsheet.example.samples.ui.paymentsheet.complete_flow.CompleteFlowActivity
 import com.stripe.android.paymentsheet.example.samples.ui.paymentsheet.custom_flow.CustomFlowActivity
 import com.stripe.android.paymentsheet.example.samples.ui.paymentsheet.server_side_confirm.complete_flow.ServerSideConfirmationCompleteFlowActivity
 import com.stripe.android.paymentsheet.example.samples.ui.paymentsheet.server_side_confirm.custom_flow.ServerSideConfirmationCustomFlowActivity
 import com.stripe.android.paymentsheet.example.samples.ui.shared.PaymentSheetExampleTheme
 import com.stripe.android.paymentsheet.example.playground.PaymentSheetPlaygroundActivity as NewPaymentSheetPlaygroundActivity
+import com.stripe.android.paymentsheet.example.playground.customersheet.CustomerSheetPlaygroundActivity as NewCustomerSheetPlaygroundActivity
 
 private const val SurfaceOverlayOpacity = 0.12f
 
@@ -101,7 +101,7 @@ class MainActivity : AppCompatActivity() {
  MenuItem(
  titleResId = R.string.customersheet_playground_title,
  subtitleResId = R.string.playground_subtitle,
- klass = CustomerSheetPlaygroundActivity::class.java,
+ klass = NewCustomerSheetPlaygroundActivity::class.java,
  section = MenuItem.Section.Internal,
  ),
  )

paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/playground/PaymentSheetPlaygroundActivity.kt

@@ -161,7 +161,9 @@ internal class PaymentSheetPlaygroundActivity : AppCompatActivity() {
  context.startActivity(
  QrCodeActivity.create(
  context = context,
- settingsJson = playgroundSettings.snapshot().asJsonString(),
+ settingsUri = PaymentSheetPlaygroundUrlHelper.createUri(
+ playgroundSettings.snapshot().asJsonString()
+ ),
  )
  )
  },

paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/playground/activity/QrCodeActivity.kt

@@ -20,36 +20,34 @@ import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.layout.ContentScale
 import com.google.zxing.BarcodeFormat
 import com.google.zxing.qrcode.QRCodeWriter
-import com.stripe.android.paymentsheet.example.playground.PaymentSheetPlaygroundUrlHelper
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
 
 internal class QrCodeActivity : AppCompatActivity() {
  companion object {
- fun create(context: Context, settingsJson: String): Intent {
+ fun create(context: Context, settingsUri: Uri): Intent {
  return Intent(context, QrCodeActivity::class.java).apply {
- putExtra("settingsJson", settingsJson)
+ putExtra("settingsUri", settingsUri.toString())
  }
  }
  }
 
  override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
 
- val settingsJson = intent.getStringExtra("settingsJson")
- if (settingsJson == null) {
+ val settingsUri = Uri.parse(intent.getStringExtra("settingsUri"))
+
+ if (settingsUri == null) {
  finish()
  return
  }
 
- val uri = PaymentSheetPlaygroundUrlHelper.createUri(settingsJson)
-
  setContent {
  var bitmap: Bitmap? by remember { mutableStateOf(null) }
 
- LaunchedEffect(uri) {
+ LaunchedEffect(settingsUri) {
  launch(Dispatchers.IO) {
- bitmap = getQrCodeBitmap(uri)
+ bitmap = getQrCodeBitmap(settingsUri)
  }
  }
 

paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/playground/customersheet/CustomerSheetPlaygroundActivity.kt

@@ -0,0 +1,240 @@
+package com.stripe.android.paymentsheet.example.playground.customersheet
+
+import android.annotation.SuppressLint
+import android.content.Intent
+import android.os.Bundle
+import android.widget.Toast
+import androidx.activity.compose.setContent
+import androidx.activity.viewModels
+import androidx.appcompat.app.AppCompatActivity
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.animateContentSize
+import androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.Button
+import androidx.compose.material.Divider
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material.darkColors
+import androidx.compose.material.lightColors
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.stripe.android.customersheet.CustomerSheetResultCallback
+import com.stripe.android.customersheet.ExperimentalCustomerSheetApi
+import com.stripe.android.customersheet.rememberCustomerSheet
+import com.stripe.android.paymentsheet.example.playground.activity.AppearanceBottomSheetDialogFragment
+import com.stripe.android.paymentsheet.example.playground.activity.AppearanceStore
+import com.stripe.android.paymentsheet.example.playground.activity.QrCodeActivity
+import com.stripe.android.paymentsheet.example.playground.customersheet.settings.CustomerSheetPlaygroundSettings
+import com.stripe.android.paymentsheet.example.playground.customersheet.settings.SettingsUi
+import com.stripe.android.paymentsheet.example.samples.ui.shared.PaymentMethodSelector
+
+internal class CustomerSheetPlaygroundActivity : AppCompatActivity() {
+ companion object {
+ fun createTestIntent(settingsJson: String): Intent {
+ return Intent(
+ Intent.ACTION_VIEW,
+ CustomerSheetPlaygroundUrlHelper.createUri(settingsJson)
+ )
+ }
+ }
+
+ val viewModel: CustomerSheetPlaygroundViewModel by viewModels {
+ CustomerSheetPlaygroundViewModel.Factory(
+ applicationSupplier = { application },
+ uriSupplier = { intent.data },
+ )
+ }
+
+ @SuppressLint("UnusedContentLambdaTargetStateParameter")
+ @OptIn(ExperimentalCustomerSheetApi::class)
+ override fun onCreate(savedInstanceState: Bundle?) {
+ super.onCreate(savedInstanceState)
+
+ setContent {
+ val playgroundSettings by viewModel.playgroundSettingsFlow.collectAsState()
+ val localPlaygroundSettings = playgroundSettings ?: return@setContent
+
+ val playgroundState by viewModel.playgroundState.collectAsState()
+ val context = LocalContext.current
+
+ LaunchedEffect(viewModel.status) {
+ viewModel.status.collect { status ->
+ Toast.makeText(context, status.message, Toast.LENGTH_LONG).show()
+ }
+ }
+
+ PlaygroundTheme(
+ content = {
+ SettingsUi(playgroundSettings = localPlaygroundSettings)
+
+ AppearanceButton()
+
+ QrCodeButton(playgroundSettings = localPlaygroundSettings)
+ },
+ bottomBarContent = {
+ ReloadButton()
+
+ AnimatedContent(
+ label = PLAYGROUND_BOTTOM_BAR_LABEL,
+ targetState = playgroundState != null,
+ ) {
+ Column {
+ PlaygroundStateUi(
+ playgroundState = playgroundState,
+ callback = viewModel::onCustomerSheetCallback
+ )
+ }
+ }
+ },
+ )
+ }
+ }
+
+ @Composable
+ private fun AppearanceButton() {
+ Button(
+ onClick = {
+ val bottomSheet = AppearanceBottomSheetDialogFragment.newInstance()
+ bottomSheet.show(supportFragmentManager, bottomSheet.tag)
+ },
+ modifier = Modifier.fillMaxWidth(),
+ ) {
+ Text("Change Appearance")
+ }
+ }
+
+ @Composable
+ private fun QrCodeButton(playgroundSettings: CustomerSheetPlaygroundSettings) {
+ val context = LocalContext.current
+ Button(
+ onClick = {
+ context.startActivity(
+ QrCodeActivity.create(
+ context = context,
+ settingsUri = CustomerSheetPlaygroundUrlHelper.createUri(
+ playgroundSettings.snapshot().asJsonString()
+ ),
+ )
+ )
+ },
+ modifier = Modifier.fillMaxWidth(),
+ ) {
+ Text("QR code for current settings")
+ }
+ }
+
+ @Composable
+ private fun ReloadButton() {
+ Button(
+ onClick = viewModel::reset,
+ modifier = Modifier
+ .fillMaxWidth()
+ .testTag(RELOAD_TEST_TAG),
+ ) {
+ Text("Reload")
+ }
+ }
+
+ @OptIn(ExperimentalCustomerSheetApi::class)
+ @Composable
+ private fun PlaygroundStateUi(
+ playgroundState: CustomerSheetPlaygroundState?,
+ callback: CustomerSheetResultCallback,
+ ) {
+ if (playgroundState == null) {
+ return
+ }
+
+ val customerSheet = rememberCustomerSheet(
+ configuration = playgroundState.customerSheetConfiguration(),
+ customerAdapter = playgroundState.adapter,
+ callback = callback,
+ )
+
+ LaunchedEffect(customerSheet) {
+ viewModel.fetchOption(customerSheet)
+ }
+
+ val loaded = playgroundState.optionState as? CustomerSheetPlaygroundState.PaymentOptionState.Loaded
+ val option = loaded?.paymentOption
+
+ PaymentMethodSelector(
+ isEnabled = playgroundState.optionState is CustomerSheetPlaygroundState.PaymentOptionState.Loaded,
+ paymentMethodLabel = option?.label ?: "Select",
+ paymentMethodPainter = option?.iconPainter,
+ onClick = customerSheet::present
+ )
+ }
+}
+
+@Composable
+private fun PlaygroundTheme(
+ content: @Composable ColumnScope.() -> Unit,
+ bottomBarContent: @Composable ColumnScope.() -> Unit,
+) {
+ val colors = if (isSystemInDarkTheme() || AppearanceStore.forceDarkMode) {
+ darkColors()
+ } else {
+ lightColors()
+ }
+ MaterialTheme(
+ typography = MaterialTheme.typography.copy(
+ body1 = MaterialTheme.typography.body1.copy(fontSize = 14.sp)
+ ),
+ colors = colors,
+ ) {
+ Surface(
+ color = MaterialTheme.colors.background,
+ ) {
+ Scaffold(
+ bottomBar = {
+ Column(
+ modifier = Modifier
+ .fillMaxWidth()
+ .background(MaterialTheme.colors.surface)
+ .animateContentSize()
+ ) {
+ Divider()
+ Column(
+ content = bottomBarContent,
+ modifier = Modifier
+ .padding(horizontal = 12.dp, vertical = 8.dp)
+ .fillMaxWidth()
+ )
+ }
+ },
+ ) { paddingValues ->
+ Box(modifier = Modifier.padding(paddingValues)) {
+ Column(
+ modifier = Modifier
+ .verticalScroll(rememberScrollState())
+ .fillMaxSize()
+ .padding(16.dp),
+ content = content,
+ )
+ }
+ }
+ }
+ }
+}
+
+const val RELOAD_TEST_TAG = "RELOAD"
+private const val PLAYGROUND_BOTTOM_BAR_LABEL = "CustomerSheetPlaygroundBottomBar"

paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/playground/customersheet/CustomerSheetPlaygroundState.kt

@@ -0,0 +1,27 @@
+package com.stripe.android.paymentsheet.example.playground.customersheet
+
+import androidx.compose.runtime.Stable
+import com.stripe.android.customersheet.CustomerAdapter
+import com.stripe.android.customersheet.CustomerSheet
+import com.stripe.android.customersheet.ExperimentalCustomerSheetApi
+import com.stripe.android.paymentsheet.example.playground.customersheet.settings.CustomerSheetPlaygroundSettings
+import com.stripe.android.paymentsheet.model.PaymentOption
+
+@Stable
+@OptIn(ExperimentalCustomerSheetApi::class)
+internal data class CustomerSheetPlaygroundState(
+ private val snapshot: CustomerSheetPlaygroundSettings.Snapshot,
+ val adapter: CustomerAdapter,
+ val optionState: PaymentOptionState,
+) {
+ sealed interface PaymentOptionState {
+ data object Unloaded : PaymentOptionState
+
+ data class Loaded(val paymentOption: PaymentOption?) : PaymentOptionState
+ }
+
+ @OptIn(ExperimentalCustomerSheetApi::class)
+ fun customerSheetConfiguration(): CustomerSheet.Configuration {
+ return snapshot.customerSheetConfiguration(this)
+ }
+}

paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/playground/customersheet/CustomerSheetPlaygroundUrlHelper.kt

@@ -0,0 +1,23 @@
+package com.stripe.android.paymentsheet.example.playground.customersheet
+
+import android.net.Uri
+import com.stripe.android.paymentsheet.example.playground.customersheet.settings.CustomerSheetPlaygroundSettings
+import okio.ByteString.Companion.decodeBase64
+import okio.ByteString.Companion.toByteString
+
+internal object CustomerSheetPlaygroundUrlHelper {
+ fun createUri(settingsJson: String): Uri {
+ val base64Settings = settingsJson.encodeToByteArray().toByteString().base64Url()
+ .trimEnd('=')
+ return Uri.parse(
+ "stripepaymentsheetexample://customersheetplayground?settings=" +
+ base64Settings
+ )
+ }
+
+ fun settingsFromUri(uri: Uri?): CustomerSheetPlaygroundSettings? {
+ val settingsJson = uri?.getQueryParameter("settings")
+ ?.decodeBase64()?.utf8() ?: return null
+ return CustomerSheetPlaygroundSettings.createFromJsonString(settingsJson)
+ }
+}