Add mandate text to payment option

Author: porter-stripe

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

@@ -195,6 +195,15 @@ class EmbeddedPaymentElementViewManager :
           ),
         ).allowsRemovalOfLastSavedPaymentMethod(allowsRemovalOfLastSavedPaymentMethod)
         .cardBrandAcceptance(mapToCardBrandAcceptance(toBundleObject(map)))
+        .embeddedViewDisplaysMandateText(
+          if (map.hasKey("embeddedViewDisplaysMandateText") &&
+            map.getType("embeddedViewDisplaysMandateText") == ReadableType.Boolean
+          ) {
+            map.getBoolean("embeddedViewDisplaysMandateText")
+          } else {
+            true // default value
+          },
+        )
         // Serialize original ReadableMap because toBundleObject cannot keep arrays of objects
         .customPaymentMethods(
           parseCustomPaymentMethods(

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

@@ -1,3 +1,6 @@
+import androidx.compose.ui.text.AnnotatedString
+import androidx.core.text.toHtml
+import androidx.core.text.toSpannable
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.WritableMap
 import com.reactnativestripesdk.utils.mapFromPaymentSheetBillingDetails
@@ -12,4 +15,16 @@ fun EmbeddedPaymentElement.PaymentOptionDisplayData.toWritableMap(): WritableMap
     putString("label", label)
     putString("paymentMethodType", paymentMethodType)
     putMap("billingDetails", mapFromPaymentSheetBillingDetails(billingDetails))
+
+    val mandateTextHTML = mandateText?.toHtmlString()
+    if (mandateTextHTML != null) {
+      putString("mandateText", mandateTextHTML)
+    } else {
+      putNull("mandateText")
+    }
   }
+
+fun AnnotatedString.toHtmlString(): String {
+  val spanned = this.toSpannable()
+  return spanned.toHtml()
+}

ios/PaymentOptionDisplayData+ReactNative.swift

@@ -16,13 +16,13 @@ extension EmbeddedPaymentElement.PaymentOptionDisplayData {
             guard let data = image.pngData() else { return "" }
             return data.base64EncodedString()
         }()
-        
+
         // Convert BillingDetails to a dictionary
         let billingDetailsDict: [String: Any] = {
             guard let billing = billingDetails else {
                 return [:]
             }
-            
+
             // Extract address
             let addressDict: [String: Any] = {
                 let addr = billing.address
@@ -35,21 +35,41 @@ extension EmbeddedPaymentElement.PaymentOptionDisplayData {
                     "state": addr.state ?? ""
                 ]
             }()
-            
+
             return [
                 "name": billing.name ?? "",
                 "email": billing.email ?? "",
                 "phone": billing.phone ?? "",
                 "address": addressDict
             ]
         }()
-        
+
+        // Convert NSAttributedString mandateText to HTML
+        let mandateTextHTML: String? = {
+            guard let mandateText = mandateText else { return nil }
+
+            do {
+                let htmlData = try mandateText.data(
+                    from: NSRange(location: 0, length: mandateText.length),
+                    documentAttributes: [
+                        .documentType: NSAttributedString.DocumentType.html,
+                        .characterEncoding: String.Encoding.utf8.rawValue
+                    ]
+                )
+                return String(data: htmlData, encoding: .utf8)
+            } catch {
+                // Fallback to plain string if HTML conversion fails
+                return mandateText.string
+            }
+        }()
+
         // Return as a dictionary
         return [
             "image": imageBase64,
             "label": label,
             "billingDetails": billingDetailsDict,
-            "paymentMethodType": paymentMethodType
+            "paymentMethodType": paymentMethodType,
+            "mandateText": mandateTextHTML
         ]
     }
 }

ios/StripeSdkImpl+Embedded.swift

@@ -215,6 +215,10 @@ extension StripeSdkImpl {
       configuration.allowsDelayedPaymentMethods = allowsDelayedPaymentMethods
     }
 
+    if let embeddedViewDisplaysMandateText = params["embeddedViewDisplaysMandateText"] as? Bool {
+      configuration.embeddedViewDisplaysMandateText = embeddedViewDisplaysMandateText
+    }
+
     if let removeSavedPaymentMethodMessage = params["removeSavedPaymentMethodMessage"] as? String {
       configuration.removeSavedPaymentMethodMessage = removeSavedPaymentMethodMessage
     }

src/types/EmbeddedPaymentElement.tsx

@@ -63,6 +63,11 @@ export interface PaymentOptionDisplayData {
    * Apple Pay: "apple_pay"
    */
   paymentMethodType: string;
+  /**
+   * If you set `configuration.embeddedViewDisplaysMandateText = false`, this HTML text must be displayed to the customer near your "Buy" button to comply with regulations.
+   * This text may contain formatting, colors, and links that should be preserved when rendering.
+   */
+  mandateText?: string;
 }
 
 /**
@@ -195,6 +200,13 @@ export interface EmbeddedPaymentElementConfiguration {
   customPaymentMethodConfiguration?: PaymentSheetTypes.CustomPaymentMethodConfiguration;
   /** Describes how the EmbeddedPaymentElement handles payment method row selections. */
   rowSelectionBehavior?: EmbeddedRowSelectionBehavior;
+  /**
+   * Controls whether the view displays mandate text at the bottom for payment methods that require it.
+   * If set to `false`, your integration must display `PaymentOptionDisplayData.mandateText` to the customer near your "Buy" button to comply with regulations.
+   * Note: This doesn't affect mandates displayed in the form sheet.
+   * Defaults to `true`.
+   */
+  embeddedViewDisplaysMandateText?: boolean;
 }
 
 // -----------------------------------------------------------------------------