diff --git a/paymentsheet-example/src/main/AndroidManifest.xml b/paymentsheet-example/src/main/AndroidManifest.xml
index 7629034bf3f..b11d6a6fb2e 100644
--- a/paymentsheet-example/src/main/AndroidManifest.xml
+++ b/paymentsheet-example/src/main/AndroidManifest.xml
@@ -48,6 +48,7 @@
diff --git a/paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/playground/PaymentSheetPlaygroundActivity.kt b/paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/playground/PaymentSheetPlaygroundActivity.kt
index 29edccbc4a7..2ebad578407 100644
--- a/paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/playground/PaymentSheetPlaygroundActivity.kt
+++ b/paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/playground/PaymentSheetPlaygroundActivity.kt
@@ -11,8 +11,11 @@ import androidx.appcompat.app.AppCompatActivity
import androidx.compose.animation.AnimatedContent
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.statusBars
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
@@ -146,29 +149,34 @@ internal class PaymentSheetPlaygroundActivity : AppCompatActivity(), ExternalPay
PlaygroundTheme(
content = {
- playgroundState?.asPaymentState()?.endpoint?.let { customEndpoint ->
- Text(
- text = "Using $customEndpoint",
- modifier = Modifier
- .clickable { showCustomEndpointDialog = true }
- .padding(bottom = 16.dp),
- )
- }
+ Column(
+ modifier = Modifier
+ .padding(WindowInsets.statusBars.asPaddingValues())
+ ) {
+ playgroundState?.asPaymentState()?.endpoint?.let { customEndpoint ->
+ Text(
+ text = "Using $customEndpoint",
+ modifier = Modifier
+ .clickable { showCustomEndpointDialog = true }
+ .padding(bottom = 16.dp),
+ )
+ }
- playgroundState?.asPaymentState()?.stripeIntentId?.let { stripeIntentId ->
- Text(
- text = stripeIntentId,
- modifier = Modifier.padding(bottom = 16.dp)
- )
- }
+ playgroundState?.asPaymentState()?.stripeIntentId?.let { stripeIntentId ->
+ Text(
+ text = stripeIntentId,
+ modifier = Modifier.padding(bottom = 16.dp)
+ )
+ }
- SettingsUi(playgroundSettings = localPlaygroundSettings)
+ SettingsUi(playgroundSettings = localPlaygroundSettings)
- AppearanceButton()
+ AppearanceButton()
- QrCodeButton(playgroundSettings = localPlaygroundSettings)
+ QrCodeButton(playgroundSettings = localPlaygroundSettings)
- ClearLinkDataButton()
+ ClearLinkDataButton()
+ }
},
bottomBarContent = {
ReloadButton(playgroundSettings = localPlaygroundSettings)
diff --git a/paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/playground/PlaygroundTheme.kt b/paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/playground/PlaygroundTheme.kt
index 0cdbceef06f..21e6753aa44 100644
--- a/paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/playground/PlaygroundTheme.kt
+++ b/paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/playground/PlaygroundTheme.kt
@@ -32,6 +32,7 @@ import com.stripe.android.paymentsheet.example.playground.activity.AppearanceSto
internal fun PlaygroundTheme(
content: @Composable ColumnScope.() -> Unit,
bottomBarContent: @Composable ColumnScope.() -> Unit,
+ topBarContent: @Composable (() -> Unit)? = null
) {
val colors = if (isSystemInDarkTheme() || AppearanceStore.forceDarkMode) {
darkColors()
@@ -48,6 +49,9 @@ internal fun PlaygroundTheme(
color = MaterialTheme.colors.background,
) {
Scaffold(
+ topBar = {
+ topBarContent?.invoke()
+ },
bottomBar = {
Column(
modifier = Modifier