feat,fix: CardForm country input defaults to current region on Androi…

…d, add option to override (#974)
stripe · Jun 6, 2022 · 3a93adb · 3a93adb
1 parent 1279594
commit 3a93adb
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@
 
 ### New features
 
+- Added a `defaultValues` prop to the `CardForm` component. Currently only accepts `countryCode`, and is Android-only. [#974](https://github.com/stripe/stripe-react-native/pull/974)
+
 ### Fixes
 
 - Resolve with an Error (of type `Canceled`) if no payment option is selected in the Payment Sheet custom flow (i.e., the `x` button is clicked to close the Payment Sheet). [#975](https://github.com/stripe/stripe-react-native/pull/975)

diff --git a/android/src/main/java/com/reactnativestripesdk/CardFormView.kt b/android/src/main/java/com/reactnativestripesdk/CardFormView.kt
@@ -14,6 +14,7 @@ import com.facebook.react.uimanager.events.EventDispatcher
 import com.google.android.material.shape.CornerFamily
 import com.google.android.material.shape.MaterialShapeDrawable
 import com.google.android.material.shape.ShapeAppearanceModel
+import com.stripe.android.core.model.CountryCode
 import com.stripe.android.databinding.CardMultilineWidgetBinding
 import com.stripe.android.databinding.StripeCardFormViewBinding
 import com.stripe.android.model.Address
@@ -48,6 +49,13 @@ class CardFormView(context: ThemedReactContext) : FrameLayout(context) {
     cardFormViewBinding.postalCodeContainer.visibility = visibility
   }
 
+  fun setDefaultValues(defaults: ReadableMap) {
+    defaults.getString("countryCode")?.let {
+      cardFormViewBinding.countryLayout.setSelectedCountryCode(CountryCode(it))
+      cardFormViewBinding.countryLayout.updateUiForCountryEntered(CountryCode(it))
+    }
+  }
+
   fun setPlaceHolders(value: ReadableMap) {
     val numberPlaceholder = getValOr(value, "number", null)
     val expirationPlaceholder = getValOr(value, "expiration", null)

diff --git a/android/src/main/java/com/reactnativestripesdk/CardFormViewManager.kt b/android/src/main/java/com/reactnativestripesdk/CardFormViewManager.kt
@@ -51,6 +51,11 @@ class CardFormViewManager : SimpleViewManager<CardFormView>() {
     view.setCardStyle(cardStyle)
   }
 
+  @ReactProp(name = "defaultValues")
+  fun setDefaultValues(view: CardFormView, defaults: ReadableMap) {
+    view.setDefaultValues(defaults)
+  }
+
   override fun createViewInstance(reactContext: ThemedReactContext): CardFormView {
     val stripeSdkModule: StripeSdkModule? = reactContext.getNativeModule(StripeSdkModule::class.java)
     val view = CardFormView(reactContext)

diff --git a/example/src/screens/MultilineWebhookPaymentScreen.tsx b/example/src/screens/MultilineWebhookPaymentScreen.tsx
@@ -103,6 +103,9 @@ export default function MultilineWebhookPaymentScreen() {
           console.log(cardDetails);
           setComplete(cardDetails.complete);
         }}
+        defaultValues={{
+          countryCode: 'US',
+        }}
       />
       <View style={styles.row}>
         <Switch

diff --git a/src/components/CardForm.tsx b/src/components/CardForm.tsx
@@ -42,6 +42,8 @@ export interface Props extends AccessibilityProps {
 
   /** Android only */
   placeholders?: CardFormView.Placeholders;
+  /** Android only */
+  defaultValues?: CardFormView.DefaultValues;
   // onBlur?(): void;
   // onFocus?(focusedField: CardFormView.FieldNames | null): void;
   onFormComplete?(card: CardFormView.Details): void;
@@ -81,6 +83,7 @@ export const CardForm = forwardRef<CardFormView.Methods, Props>(
       // onFocus,
       // onBlur,
       placeholders,
+      defaultValues,
       ...props
     },
     ref
@@ -185,6 +188,9 @@ export const CardForm = forwardRef<CardFormView.Methods, Props>(
           cvc: placeholders?.cvc,
           postalCode: placeholders?.postalCode,
         }}
+        defaultValues={{
+          ...(defaultValues ?? {}),
+        }}
         onFocusChange={onFocusHandler}
         // postalCodeEnabled={postalCodeEnabled}
         {...props}

diff --git a/src/types/components/CardFormView.ts b/src/types/components/CardFormView.ts
@@ -44,6 +44,11 @@ export interface Placeholders {
   postalCode?: string;
 }
 
+export type DefaultValues = {
+  /** The 2-letter country code for the country selected by default on Android. If this is null, it is set by the device's configured region in the Settings app. */
+  countryCode?: string;
+};
+
 /**
  * @ignore
  */
@@ -54,6 +59,8 @@ export interface NativeProps {
   cardStyle?: Styles;
   /** Android only */
   placeholders?: Placeholders;
+  /** Android only */
+  defaultValues?: DefaultValues;
   // postalCodeEnabled: boolean;
   onFocusChange(
     event: NativeSyntheticEvent<{ focusedField: FieldName | null }>