Add image to embedded payment option display data

Author: porter-stripe

android/src/main/java/com/reactnativestripesdk/PaymentOptionDisplayDataMapper.kt

@@ -1,7 +1,11 @@
+import android.graphics.drawable.Drawable
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.WritableMap
+import com.reactnativestripesdk.getBase64FromBitmap
+import com.reactnativestripesdk.getBitmapFromDrawable
 import com.reactnativestripesdk.utils.mapFromPaymentSheetBillingDetails
 import com.stripe.android.paymentelement.EmbeddedPaymentElement
+import kotlinx.coroutines.withTimeout
 
 /**
  * Serialize Stripe's PaymentOptionDisplayData into a WritableMap
@@ -12,4 +16,29 @@ fun EmbeddedPaymentElement.PaymentOptionDisplayData.toWritableMap(): WritableMap
     putString("label", label)
     putString("paymentMethodType", paymentMethodType)
     putMap("billingDetails", mapFromPaymentSheetBillingDetails(billingDetails))
+
+    // Direct access to imageLoader and call it synchronously with timeout
+    val imageBase64 =
+      try {
+        val imageLoaderField = this@toWritableMap.javaClass.getDeclaredField("imageLoader")
+        imageLoaderField.isAccessible = true
+        @Suppress("UNCHECKED_CAST")
+        val imageLoader = imageLoaderField.get(this@toWritableMap) as suspend () -> Drawable
+
+        // Load synchronously with 2 second timeout
+        val drawable =
+          kotlinx.coroutines.runBlocking {
+            withTimeout(2000L) {
+              imageLoader()
+            }
+          }
+
+        getBitmapFromDrawable(drawable)?.let { bitmap ->
+          getBase64FromBitmap(bitmap)
+        } ?: ""
+      } catch (e: Exception) {
+        // If imageLoader fails or times out, return empty string
+        ""
+      }
+    putString("image", imageBase64)
   }

example/src/screens/EmbeddedPaymentElementScreen.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, View, Text, Modal } from 'react-native';
+import { Alert, View, Text, Modal, Image } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import Button from '../components/Button';
 import PaymentScreen from '../components/PaymentScreen';
@@ -63,9 +63,18 @@ function PaymentElementView({ intentConfig, elementConfig }: any) {
       {embeddedPaymentElementView}
 
       <View style={{ paddingVertical: 16 }}>
-        <Text style={{ fontSize: 16, fontWeight: '600' }}>
-          {paymentOption?.label ?? 'No option'}
-        </Text>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          {paymentOption?.image && (
+            <Image
+              source={{ uri: `data:image/png;base64,${paymentOption.image}` }}
+              style={{ width: 32, height: 20 }}
+              resizeMode="contain"
+            />
+          )}
+          <Text style={{ fontSize: 16, fontWeight: '600' }}>
+            {paymentOption?.label ?? 'No option'}
+          </Text>
+        </View>
       </View>
 
       <Button

src/types/EmbeddedPaymentElement.tsx

@@ -52,6 +52,10 @@ export interface PaymentOptionDisplayData {
    * A user-facing label for the payment method, like "Apple Pay" or "•••• 4242" for a card.
    */
   label: string;
+  /**
+   * A base64 encoded string representing the image for the payment option.
+   */
+  image: string;
   /**
    * Optional billing details associated with the payment method, such as name, email, or address.
    */