From d611d9c9e4ca7b54fba79224453ccede8daa148b Mon Sep 17 00:00:00 2001 From: Charles Cruzan Date: Thu, 2 Jun 2022 13:52:22 -0400 Subject: [PATCH 1/3] default to region on Android, add override option --- .../java/com/reactnativestripesdk/CardFormView.kt | 14 ++++++++++++++ .../reactnativestripesdk/CardFormViewManager.kt | 5 +++++ src/components/CardForm.tsx | 6 ++++++ src/types/components/CardFormView.ts | 7 +++++++ 4 files changed, 32 insertions(+) diff --git a/android/src/main/java/com/reactnativestripesdk/CardFormView.kt b/android/src/main/java/com/reactnativestripesdk/CardFormView.kt index b2e7fd70d..778349f51 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,19 @@ class CardFormView(context: ThemedReactContext) : FrameLayout(context) { cardFormViewBinding.postalCodeContainer.visibility = visibility } + fun setDefaultValues(defaults: ReadableMap) { + val defaultLocale = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) { + if (context.resources.configuration.locales.isEmpty) "US" + else context.resources.configuration.locales[0].country + } else { + context.resources.configuration.locale.country + } + val countryCode = defaults.getString("countryCode") ?: defaultLocale + + cardFormViewBinding.countryLayout.setSelectedCountryCode(CountryCode(countryCode)) + cardFormViewBinding.countryLayout.updateUiForCountryEntered(CountryCode(countryCode)) + } + 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/src/components/CardForm.tsx b/src/components/CardForm.tsx index d793ab6c2..9599365d0 100644 --- 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( // 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 }> From e64c285f592338eded33870df33b48236665397e Mon Sep 17 00:00:00 2001 From: Charles Cruzan Date: Thu, 2 Jun 2022 13:56:40 -0400 Subject: [PATCH 2/3] [skip actions] changelog --- CHANGELOG.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0e86ecf65..d935c8a7e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,16 @@ ## Unreleased +### Breaking changes + +### 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 + +- `CardForm`'s country input on Android will now match the behavior of iOS- defaulting to the current locale of the device (user setting). [#974](https://github.com/stripe/stripe-react-native/pull/974) + ## 0.12.0 ### Breaking changes From 9af0450f086ce10d823a0253aa8a8a71795abcc2 Mon Sep 17 00:00:00 2001 From: Charles Cruzan Date: Fri, 3 Jun 2022 10:19:25 -0400 Subject: [PATCH 3/3] simplify --- CHANGELOG.md | 2 -- .../java/com/reactnativestripesdk/CardFormView.kt | 12 +++--------- .../src/screens/MultilineWebhookPaymentScreen.tsx | 3 +++ 3 files changed, 6 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d935c8a7e..e0045b427 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,8 +10,6 @@ ### Fixes -- `CardForm`'s country input on Android will now match the behavior of iOS- defaulting to the current locale of the device (user setting). [#974](https://github.com/stripe/stripe-react-native/pull/974) - ## 0.12.0 ### Breaking changes diff --git a/android/src/main/java/com/reactnativestripesdk/CardFormView.kt b/android/src/main/java/com/reactnativestripesdk/CardFormView.kt index 778349f51..2db3232fc 100644 --- a/android/src/main/java/com/reactnativestripesdk/CardFormView.kt +++ b/android/src/main/java/com/reactnativestripesdk/CardFormView.kt @@ -50,16 +50,10 @@ class CardFormView(context: ThemedReactContext) : FrameLayout(context) { } fun setDefaultValues(defaults: ReadableMap) { - val defaultLocale = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) { - if (context.resources.configuration.locales.isEmpty) "US" - else context.resources.configuration.locales[0].country - } else { - context.resources.configuration.locale.country + defaults.getString("countryCode")?.let { + cardFormViewBinding.countryLayout.setSelectedCountryCode(CountryCode(it)) + cardFormViewBinding.countryLayout.updateUiForCountryEntered(CountryCode(it)) } - val countryCode = defaults.getString("countryCode") ?: defaultLocale - - cardFormViewBinding.countryLayout.setSelectedCountryCode(CountryCode(countryCode)) - cardFormViewBinding.countryLayout.updateUiForCountryEntered(CountryCode(countryCode)) } fun setPlaceHolders(value: ReadableMap) { 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', + }} />