@stripe/stripe-react-native 0.9.0 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/CHANGELOG.md +46 -0
  2. package/README.md +1 -1
  3. package/android/build.gradle +1 -1
  4. package/android/gradle.properties +2 -2
  5. package/android/src/main/java/com/reactnativestripesdk/CardFieldView.kt +31 -4
  6. package/android/src/main/java/com/reactnativestripesdk/CardFormViewManager.kt +1 -1
  7. package/android/src/main/java/com/reactnativestripesdk/Errors.kt +14 -1
  8. package/android/src/main/java/com/reactnativestripesdk/GooglePayFragment.kt +68 -52
  9. package/android/src/main/java/com/reactnativestripesdk/PaymentLauncherFragment.kt +127 -37
  10. package/android/src/main/java/com/reactnativestripesdk/PaymentSheetAppearance.kt +173 -0
  11. package/android/src/main/java/com/reactnativestripesdk/PaymentSheetFragment.kt +59 -36
  12. package/android/src/main/java/com/reactnativestripesdk/StripeSdkModule.kt +49 -177
  13. package/ios/PaymentSheetAppearance.swift +209 -0
  14. package/ios/StripeSdk.swift +9 -5
  15. package/ios/StripeSdk.xcodeproj/project.pbxproj +2 -2
  16. package/lib/typescript/example/src/screens/PaymentSheetAppearance.d.ts +3 -0
  17. package/lib/typescript/src/types/PaymentSheet.d.ts +154 -1
  18. package/package.json +4 -5
  19. package/src/types/PaymentSheet.ts +159 -2
  20. package/stripe-react-native.podspec +1 -1
  21. package/android/src/main/java/com/reactnativestripesdk/Constants.kt +0 -10
package/lib/typescript/src/types/PaymentSheet.d.ts CHANGED
@@ -6,9 +6,10 @@ export declare type SetupParams = ClientSecretParams & GooglePayParams & ApplePa
6
6
  merchantDisplayName?: string;
7
7
  style?: 'alwaysLight' | 'alwaysDark' | 'automatic';
8
8
  returnURL?: string;
9
- primaryButtonColor?: string;
10
9
  defaultBillingDetails?: BillingDetails;
11
10
  allowsDelayedPaymentMethods?: boolean;
11
+ } & {
12
+ appearance?: AppearanceParams;
12
13
  };
13
14
  declare type ClientSecretParams = {
14
15
  paymentIntentClientSecret: string;
@@ -35,6 +36,158 @@ declare type GooglePayParams = {
35
36
  currencyCode?: string;
36
37
  testEnv?: boolean;
37
38
  };
39
+ /**
40
+ * Used to customize the appearance of your PaymentSheet
41
+ */
42
+ export declare type AppearanceParams = RecursivePartial<{
43
+ /** Describes the appearance of fonts in your PaymentSheet */
44
+ font: FontConfig;
45
+ /** Describes the colors in your PaymentSheet. Provide either a base config, or both `light` and `dark` configs, which will be useed based on whether the user is in Light or Dark mode. */
46
+ colors: GlobalColorConfig | {
47
+ light: GlobalColorConfig;
48
+ dark: GlobalColorConfig;
49
+ };
50
+ /** Describes the appearance of shapes in the PaymentSheet, such as buttons, inputs, and tabs. */
51
+ shapes: {
52
+ /** The border radius used for buttons, inputs, and tabs in your PaymentSheet.
53
+ * @default 6.0
54
+ */
55
+ borderRadius: number;
56
+ /** The border width used for inputs and tabs in your PaymentSheet.
57
+ * @default 1.0
58
+ */
59
+ borderWidth: number;
60
+ /** iOS only. The shadow used for buttons, inputs, and tabs in your PaymentSheet */
61
+ shadow: ShadowConfig;
62
+ };
63
+ /** Describes the appearance of the primary "Pay" button at the bottom of your Payment Sheet */
64
+ primaryButton: PrimaryButtonConfig;
65
+ }>;
66
+ export declare type FontConfig = {
67
+ /**
68
+ * The font used for regular text. PaymentSheet will attempt to use medium and bold versions of this font if they exist.
69
+ *
70
+ * On iOS, this should be the "PostScript name" found in Font Book after installing the font.
71
+ * On Android, this should be the name of the font file (containing only lowercase alphanumeric characters) in android/app/src/main/res/font
72
+ *
73
+ * @default The OS's system font
74
+ */
75
+ family: string;
76
+ /** The scale factor for all fonts in your PaymentSheet. This value is required to be greater than 0. Font sizes are multiplied by this value before being displayed. For example, setting this to 1.2 increases the size of all text by 20%.
77
+ * @default 1.0
78
+ */
79
+ scale: number;
80
+ };
81
+ export declare type ShadowConfig = {
82
+ /** The color of the shadow.
83
+ * @default "#000000"
84
+ * */
85
+ color: string;
86
+ /** The alpha or opacity of the shadow.
87
+ * @default 0.05
88
+ */
89
+ opacity: number;
90
+ /** The positioning of the shadow relative to the component. For example, a negative x and y will result in a shadow placed below and to the left of the component.
91
+ * @default {x: 0, y: 2}
92
+ */
93
+ offset: {
94
+ x: number;
95
+ y: number;
96
+ };
97
+ /** The blur radius of the shadow.
98
+ * @default 4
99
+ */
100
+ blurRadius: number;
101
+ };
102
+ export declare type GlobalColorConfig = {
103
+ /** A primary color used throughout your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
104
+ * @default The System blue color on iOS, and "#007AFF" (light) / "#0074D4" (dark) on Android.
105
+ */
106
+ primary: string;
107
+ /** The color used for the background of your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
108
+ * @default The System background color on iOS, and "#ffffff" (light) / "#2e2e2e" (dark) on Android.
109
+ */
110
+ background: string;
111
+ /** The color used for the background of inputs, tabs, and other components in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
112
+ * @default The System background color (light) / System secondary background color (dark) on iOS, and "#ffffff" (light) / "#a9a9a9" (dark) on Android.
113
+ */
114
+ componentBackground: string;
115
+ /** The color used for the external border of inputs, tabs, and other components in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
116
+ * @default The System gray (3) color on iOS, and "#33787880" (light) / "#787880" (dark) on Android.
117
+ */
118
+ componentBorder: string;
119
+ /** The color used for the internal border (meaning the border is shared with another component) of inputs, tabs, and other components in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
120
+ * @default The System gray (3) color on iOS, and "#33787880" (light) / "#787880" (dark) on Android.
121
+ */
122
+ componentDivider: string;
123
+ /** The color of the header text in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
124
+ * @default The System label color on iOS, and "#000000" (light) / "#ffffff" (dark) on Android.
125
+ */
126
+ primaryText: string;
127
+ /** The color of the label text of input fields, represented as a hex string with format #RRGGBB or #AARRGGBB.
128
+ * @default The System seconday label color on iOS, and "#000000" (light) / "#ffffff" (dark) on Android.
129
+ */
130
+ secondaryText: string;
131
+ /** The color of the input text in your PaymentSheet components, such as the user's card number or zip code, represented as a hex string with format #RRGGBB or #AARRGGBB.
132
+ * @default "#000000"
133
+ */
134
+ componentText: string;
135
+ /** The color of the placeholder text of input fields, represented as a hex string with format #RRGGBB or #AARRGGBB.
136
+ * @default The System label color on iOS, and "#99000000" (light) / "#99ffffff" (dark) on Android.
137
+ */
138
+ placeholderText: string;
139
+ /** The color used for icons in your Payment Sheet, such as the close or back icons, represented as a hex string with format #RRGGBB or #AARRGGBB.
140
+ * @default The System seconday label color on iOS, and "#99000000" (light) / "#ffffff" (dark) on Android.
141
+ */
142
+ icon: string;
143
+ /** The color used to indicate errors or destructive actions in your Payment Sheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
144
+ * @default The System red color on iOS, and "#ff0000" (light) / "#ff0000" (dark) on Android.
145
+ */
146
+ error: string;
147
+ };
148
+ export declare type PrimaryButtonConfig = {
149
+ /** The font family used specifically for the primary button.
150
+ * @default The root `appearance.font.family`
151
+ */
152
+ font: Pick<FontConfig, 'family'>;
153
+ /** The colors used specifically for the primary button. Provide either a base config, or both `light` and `dark` configs, which will be useed based on whether the user is in Light or Dark mode. */
154
+ colors: PrimaryButtonColorConfig | {
155
+ light: PrimaryButtonColorConfig;
156
+ dark: PrimaryButtonColorConfig;
157
+ };
158
+ /** Describes the border and shadow of the primary button. */
159
+ shapes: {
160
+ /** The border radius used for the primary button in your PaymentSheet
161
+ * @default The root `appearance.shapes.borderRadius`
162
+ */
163
+ borderRadius: number;
164
+ /** The border width used for the primary button in your PaymentSheet
165
+ * @default The root `appearance.shapes.borderWidth`
166
+ */
167
+ borderWidth: number;
168
+ /** iOS only. The shadow used for the primary button in your PaymentSheet
169
+ * @default The root `appearance.shapes.shadow`
170
+ */
171
+ shadow: ShadowConfig;
172
+ };
173
+ };
174
+ export declare type PrimaryButtonColorConfig = {
175
+ /** The background color used for the primary button in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
176
+ * @default The root `appearance.colors.primary`
177
+ */
178
+ background: string;
179
+ /** The color of the text for the primary button in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
180
+ * @default White or black, depending on the color of the button.
181
+ */
182
+ text: string;
183
+ /** The border color used for the primary button in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
184
+ * @default The System quaternary label on iOS, transparent on Android.
185
+ */
186
+ border: string;
187
+ };
188
+ declare type RecursivePartial<T> = {
189
+ [P in keyof T]?: T[P] extends (infer U)[] ? RecursivePartial<U>[] : T[P] extends object ? RecursivePartial<T[P]> : T[P];
190
+ };
38
191
  export interface PaymentOption {
39
192
  label: string;
40
193
  image: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stripe/stripe-react-native",
3
- "version": "0.9.0",
3
+ "version": "0.12.0",
4
4
  "author": "Stripe",
5
5
  "description": "Stripe SDK for React Native",
6
6
  "main": "lib/commonjs/index",
@@ -25,7 +25,7 @@
25
25
  "prepare": "bob build",
26
26
  "release": "./scripts/publish",
27
27
  "example": "yarn --cwd example",
28
- "pods": "cd example && pod-install --quiet",
28
+ "pods": "cd example && npx pod-install --quiet",
29
29
  "bootstrap": "yarn example && yarn && yarn pods",
30
30
  "bootstrap-no-pods": "yarn example && yarn",
31
31
  "docs": "yarn typedoc ./src/index.tsx --out ./docs/api-reference --tsconfig ./tsconfig.json --readme none",
@@ -60,7 +60,7 @@
60
60
  "@wdio/sync": "^7.16.15",
61
61
  "appium": "^1.22.2",
62
62
  "appium-chromedriver": "4.26.2",
63
- "eslint": "^7.14.0",
63
+ "eslint": "^7.32.0",
64
64
  "eslint-config-prettier": "^6.11.0",
65
65
  "eslint-plugin-prettier": "^3.1.3",
66
66
  "expect-webdriverio": "^2.0.1",
@@ -68,10 +68,9 @@
68
68
  "jest": "^26.6.3",
69
69
  "metro-react-native-babel-preset": "^0.67.0",
70
70
  "mocha": "^8.3.2",
71
- "pod-install": "^0.1.0",
72
71
  "prettier": "^2.0.5",
73
72
  "react": "17.0.2",
74
- "react-native": "0.66.4",
73
+ "react-native": "0.68.1",
75
74
  "ts-node": "^9.1.1",
76
75
  "typedoc": "^0.22.12",
77
76
  "typescript": "~4.4.4",
package/src/types/PaymentSheet.ts CHANGED
@@ -9,10 +9,9 @@ export type SetupParams = ClientSecretParams &
9
9
  merchantDisplayName?: string;
10
10
  style?: 'alwaysLight' | 'alwaysDark' | 'automatic';
11
11
  returnURL?: string;
12
- primaryButtonColor?: string;
13
12
  defaultBillingDetails?: BillingDetails;
14
13
  allowsDelayedPaymentMethods?: boolean;
15
- };
14
+ } & { appearance?: AppearanceParams };
16
15
 
17
16
  type ClientSecretParams =
18
17
  | {
@@ -47,6 +46,164 @@ type GooglePayParams =
47
46
  currencyCode?: string;
48
47
  testEnv?: boolean;
49
48
  };
49
+
50
+ /**
51
+ * Used to customize the appearance of your PaymentSheet
52
+ */
53
+ export type AppearanceParams = RecursivePartial<{
54
+ /** Describes the appearance of fonts in your PaymentSheet */
55
+ font: FontConfig;
56
+ /** Describes the colors in your PaymentSheet. Provide either a base config, or both `light` and `dark` configs, which will be useed based on whether the user is in Light or Dark mode. */
57
+ colors:
58
+ | GlobalColorConfig
59
+ | { light: GlobalColorConfig; dark: GlobalColorConfig };
60
+ /** Describes the appearance of shapes in the PaymentSheet, such as buttons, inputs, and tabs. */
61
+ shapes: {
62
+ /** The border radius used for buttons, inputs, and tabs in your PaymentSheet.
63
+ * @default 6.0
64
+ */
65
+ borderRadius: number;
66
+ /** The border width used for inputs and tabs in your PaymentSheet.
67
+ * @default 1.0
68
+ */
69
+ borderWidth: number;
70
+ /** iOS only. The shadow used for buttons, inputs, and tabs in your PaymentSheet */
71
+ shadow: ShadowConfig;
72
+ };
73
+ /** Describes the appearance of the primary "Pay" button at the bottom of your Payment Sheet */
74
+ primaryButton: PrimaryButtonConfig;
75
+ }>;
76
+
77
+ export type FontConfig = {
78
+ /**
79
+ * The font used for regular text. PaymentSheet will attempt to use medium and bold versions of this font if they exist.
80
+ *
81
+ * On iOS, this should be the "PostScript name" found in Font Book after installing the font.
82
+ * On Android, this should be the name of the font file (containing only lowercase alphanumeric characters) in android/app/src/main/res/font
83
+ *
84
+ * @default The OS's system font
85
+ */
86
+ family: string;
87
+ /** The scale factor for all fonts in your PaymentSheet. This value is required to be greater than 0. Font sizes are multiplied by this value before being displayed. For example, setting this to 1.2 increases the size of all text by 20%.
88
+ * @default 1.0
89
+ */
90
+ scale: number;
91
+ };
92
+
93
+ export type ShadowConfig = {
94
+ /** The color of the shadow.
95
+ * @default "#000000"
96
+ * */
97
+ color: string;
98
+ /** The alpha or opacity of the shadow.
99
+ * @default 0.05
100
+ */
101
+ opacity: number;
102
+ /** The positioning of the shadow relative to the component. For example, a negative x and y will result in a shadow placed below and to the left of the component.
103
+ * @default {x: 0, y: 2}
104
+ */
105
+ offset: { x: number; y: number };
106
+ /** The blur radius of the shadow.
107
+ * @default 4
108
+ */
109
+ blurRadius: number;
110
+ };
111
+
112
+ export type GlobalColorConfig = {
113
+ /** A primary color used throughout your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
114
+ * @default The System blue color on iOS, and "#007AFF" (light) / "#0074D4" (dark) on Android.
115
+ */
116
+ primary: string;
117
+ /** The color used for the background of your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
118
+ * @default The System background color on iOS, and "#ffffff" (light) / "#2e2e2e" (dark) on Android.
119
+ */
120
+ background: string;
121
+ /** The color used for the background of inputs, tabs, and other components in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
122
+ * @default The System background color (light) / System secondary background color (dark) on iOS, and "#ffffff" (light) / "#a9a9a9" (dark) on Android.
123
+ */
124
+ componentBackground: string;
125
+ /** The color used for the external border of inputs, tabs, and other components in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
126
+ * @default The System gray (3) color on iOS, and "#33787880" (light) / "#787880" (dark) on Android.
127
+ */
128
+ componentBorder: string;
129
+ /** The color used for the internal border (meaning the border is shared with another component) of inputs, tabs, and other components in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
130
+ * @default The System gray (3) color on iOS, and "#33787880" (light) / "#787880" (dark) on Android.
131
+ */
132
+ componentDivider: string;
133
+ /** The color of the header text in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
134
+ * @default The System label color on iOS, and "#000000" (light) / "#ffffff" (dark) on Android.
135
+ */
136
+ primaryText: string;
137
+ /** The color of the label text of input fields, represented as a hex string with format #RRGGBB or #AARRGGBB.
138
+ * @default The System seconday label color on iOS, and "#000000" (light) / "#ffffff" (dark) on Android.
139
+ */
140
+ secondaryText: string;
141
+ /** The color of the input text in your PaymentSheet components, such as the user's card number or zip code, represented as a hex string with format #RRGGBB or #AARRGGBB.
142
+ * @default "#000000"
143
+ */
144
+ componentText: string;
145
+ /** The color of the placeholder text of input fields, represented as a hex string with format #RRGGBB or #AARRGGBB.
146
+ * @default The System label color on iOS, and "#99000000" (light) / "#99ffffff" (dark) on Android.
147
+ */
148
+ placeholderText: string;
149
+ /** The color used for icons in your Payment Sheet, such as the close or back icons, represented as a hex string with format #RRGGBB or #AARRGGBB.
150
+ * @default The System seconday label color on iOS, and "#99000000" (light) / "#ffffff" (dark) on Android.
151
+ */
152
+ icon: string;
153
+ /** The color used to indicate errors or destructive actions in your Payment Sheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
154
+ * @default The System red color on iOS, and "#ff0000" (light) / "#ff0000" (dark) on Android.
155
+ */
156
+ error: string;
157
+ };
158
+
159
+ export type PrimaryButtonConfig = {
160
+ /** The font family used specifically for the primary button.
161
+ * @default The root `appearance.font.family`
162
+ */
163
+ font: Pick<FontConfig, 'family'>;
164
+ /** The colors used specifically for the primary button. Provide either a base config, or both `light` and `dark` configs, which will be useed based on whether the user is in Light or Dark mode. */
165
+ colors:
166
+ | PrimaryButtonColorConfig
167
+ | { light: PrimaryButtonColorConfig; dark: PrimaryButtonColorConfig };
168
+ /** Describes the border and shadow of the primary button. */
169
+ shapes: {
170
+ /** The border radius used for the primary button in your PaymentSheet
171
+ * @default The root `appearance.shapes.borderRadius`
172
+ */
173
+ borderRadius: number;
174
+ /** The border width used for the primary button in your PaymentSheet
175
+ * @default The root `appearance.shapes.borderWidth`
176
+ */
177
+ borderWidth: number;
178
+ /** iOS only. The shadow used for the primary button in your PaymentSheet
179
+ * @default The root `appearance.shapes.shadow`
180
+ */
181
+ shadow: ShadowConfig;
182
+ };
183
+ };
184
+
185
+ export type PrimaryButtonColorConfig = {
186
+ /** The background color used for the primary button in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
187
+ * @default The root `appearance.colors.primary`
188
+ */
189
+ background: string;
190
+ /** The color of the text for the primary button in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
191
+ * @default White or black, depending on the color of the button.
192
+ */
193
+ text: string;
194
+ /** The border color used for the primary button in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
195
+ * @default The System quaternary label on iOS, transparent on Android.
196
+ */
197
+ border: string;
198
+ };
199
+
200
+ type RecursivePartial<T> = {
201
+ [P in keyof T]?: T[P] extends (infer U)[]
202
+ ? RecursivePartial<U>[]
203
+ : T[P] extends object
204
+ ? RecursivePartial<T[P]>
205
+ : T[P];
206
+ };
50
207
  export interface PaymentOption {
51
208
  label: string;
52
209
  image: string;
package/stripe-react-native.podspec CHANGED
@@ -1,7 +1,7 @@
1
1
  require 'json'
2
2
 
3
3
  package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
4
- stripe_version = '~> 22.3.0'
4
+ stripe_version = '~> 22.4.0'
5
5
 
6
6
  Pod::Spec.new do |s|
7
7
  s.name = 'stripe-react-native'
package/android/src/main/java/com/reactnativestripesdk/Constants.kt DELETED
@@ -1,10 +0,0 @@
1
- package com.reactnativestripesdk
2
-
3
- var ON_PAYMENT_RESULT_ACTION = "com.reactnativestripesdk.PAYMENT_RESULT_ACTION"
4
- var ON_PAYMENT_OPTION_ACTION = "com.reactnativestripesdk.PAYMENT_OPTION_ACTION"
5
- var ON_CONFIGURE_FLOW_CONTROLLER = "com.reactnativestripesdk.CONFIGURE_FLOW_CONTROLLER_ACTION"
6
- var ON_INIT_PAYMENT_SHEET = "com.reactnativestripesdk.INIT_PAYMENT_SHEET"
7
-
8
- var ON_INIT_GOOGLE_PAY = "com.reactnativestripesdk.ON_INIT_GOOGLE_PAY"
9
- var ON_GOOGLE_PAY_RESULT = "com.reactnativestripesdk.ON_GOOGLE_PAY_RESULT"
10
- var ON_GOOGLE_PAYMENT_METHOD_RESULT = "com.reactnativestripesdk.ON_GOOGLE_PAYMENT_METHOD_RESULT"