diff --git a/CHANGELOG.md b/CHANGELOG.md index ff5adfe5c..002cb5654 100644 --- 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 index b2e7fd70d..2db3232fc 100644 --- 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 index 8edb03a86..c5e5c123d 100644 --- 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() { 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 index 3169e1ea5..5b6469f01 100644 --- 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', + }} /> ( // onFocus, // onBlur, placeholders, + defaultValues, ...props }, ref @@ -185,6 +188,9 @@ export const CardForm = forwardRef( 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 index a7b9850a7..1d3a98010 100644 --- 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 }>