Skip to content
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
db0fa9f
Embedded components
gimenete-stripe Oct 31, 2025
070f198
Make react-native-webview optional and load it dynamically
gimenete-stripe Nov 4, 2025
e4f2e69
Extract types from @stripe/connect-js
gimenete-stripe Nov 4, 2025
c32af78
Custom font
gimenete-stripe Nov 5, 2025
8f4d601
Use a modal for the onboarding component
gimenete-stripe Nov 12, 2025
9f32ca6
Merge branch 'master' into gimenete/embedded-components
gimenete-stripe Nov 12, 2025
5ea7e9b
Update podfile.lcok
gimenete-stripe Nov 12, 2025
e62cd98
Hide "overrides" from public interface
gimenete-stripe Nov 12, 2025
7d03d7a
Change initialization API. Add toggles to switch appearance and locale
gimenete-stripe Nov 13, 2025
29f09f9
Remove some alerts
gimenete-stripe Nov 13, 2025
e2a597b
Implement secure webviews
gimenete-stripe Nov 14, 2025
c8654e2
Implement secure webviews
gimenete-stripe Nov 14, 2025
f1acd01
Merge branch 'master' into gimenete/embedded-components
gimenete-stripe Nov 14, 2025
91f52cc
Add endpoint to server
gimenete-stripe Nov 14, 2025
8e58819
Improvements for Android
gimenete-stripe Nov 17, 2025
a6e2c87
Extract callback
gimenete-stripe Nov 20, 2025
146b31c
Trying to fix deep linking on Android
gimenete-stripe Nov 20, 2025
3120ef3
Native navigation bar
gimenete-stripe Nov 21, 2025
ef8630a
Native navigation bar
gimenete-stripe Nov 21, 2025
2001d48
Small changes
gimenete-stripe Nov 25, 2025
3066e48
Remember previous screen
gimenete-stripe Nov 25, 2025
f41b48e
Merge branch 'master' into gimenete/embedded-components
gimenete-stripe Nov 25, 2025
6f9688b
Apply suggestions from code review
gimenete-stripe Nov 25, 2025
c3c69f9
Make onCloseButtonPress a constant
gimenete-stripe Nov 25, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 31 additions & 6 deletions example/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1304,6 +1304,27 @@ PODS:
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- Yoga
- react-native-webview (13.16.0):
- DoubleConversion
- glog
- hermes-engine
- RCT-Folly (= 2024.11.18.00)
- RCTRequired
- RCTTypeSafety
- React-Core
- React-debug
- React-Fabric
- React-featureflags
- React-graphics
- React-ImageManager
- React-NativeModulesApple
- React-RCTFabric
- React-rendererdebug
- React-utils
- ReactCodegen
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- Yoga
- React-NativeModulesApple (0.78.0):
- glog
- hermes-engine
Expand Down Expand Up @@ -1691,7 +1712,7 @@ PODS:
- StripePayments (= 24.24.3)
- StripePaymentsUI (= 24.24.3)
- StripeUICore (= 24.24.3)
- stripe-react-native (0.54.1):
- stripe-react-native (0.55.1):
- DoubleConversion
- glog
- hermes-engine
Expand All @@ -1712,14 +1733,14 @@ PODS:
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- Stripe (~> 24.24.0)
- stripe-react-native/NewArch (= 0.54.1)
- stripe-react-native/NewArch (= 0.55.1)
- StripeApplePay (~> 24.24.0)
- StripeFinancialConnections (~> 24.24.0)
- StripePayments (~> 24.24.0)
- StripePaymentSheet (~> 24.24.0)
- StripePaymentsUI (~> 24.24.0)
- Yoga
- stripe-react-native/NewArch (0.54.1):
- stripe-react-native/NewArch (0.55.1):
- DoubleConversion
- glog
- hermes-engine
Expand All @@ -1746,7 +1767,7 @@ PODS:
- StripePaymentSheet (~> 24.24.0)
- StripePaymentsUI (~> 24.24.0)
- Yoga
- stripe-react-native/Tests (0.54.1):
- stripe-react-native/Tests (0.55.1):
- DoubleConversion
- glog
- hermes-engine
Expand Down Expand Up @@ -1838,6 +1859,7 @@ DEPENDENCIES:
- React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
- React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
- react-native-webview (from `../node_modules/react-native-webview`)
- React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
- React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
- React-performancetimeline (from `../node_modules/react-native/ReactCommon/react/performance/timeline`)
Expand Down Expand Up @@ -1965,6 +1987,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native/ReactCommon/react/nativemodule/microtasks"
react-native-safe-area-context:
:path: "../node_modules/react-native-safe-area-context"
react-native-webview:
:path: "../node_modules/react-native-webview"
React-NativeModulesApple:
:path: "../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios"
React-perflogger:
Expand Down Expand Up @@ -2075,6 +2099,7 @@ SPEC CHECKSUMS:
React-Mapbuffer: 3c11cee7737609275c7b66bd0b1de475f094cedf
React-microtasksnativemodule: 843f352b32aacbe13a9c750190d34df44c3e6c2c
react-native-safe-area-context: 7e513d737b0b5c1d10bbe0e5fcc9f925a7be144c
react-native-webview: b729d1bcf8fbd141237355dcfd6bb65b9a1d3b1a
React-NativeModulesApple: 88433b6946778bea9c153e27b671de15411bf225
React-perflogger: 9e8d3c0dc0194eb932162812a168aa5dc662f418
React-performancetimeline: 5a2d6efef52bdcefac079c7baa30934978acd023
Expand Down Expand Up @@ -2110,15 +2135,15 @@ SPEC CHECKSUMS:
RNScreens: 0d4cb9afe052607ad0aa71f645a88bb7c7f2e64c
SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
Stripe: ac7d3c4016797553c259eff5def200b1c8cbe4f8
stripe-react-native: 4ae717eb5d039bbc63e3d3e1d8b3cd6a786698e3
stripe-react-native: cbcce918b434011bbccd7e2fd27c4dfd1734b26c
StripeApplePay: efa314f02c07b4df2894be0790a85f0245334da0
StripeCore: 0ebe42adefb26092389443b2a5d0744056a36fac
StripeFinancialConnections: cc252f040e50aae6924affcf9883a519715a6ba4
StripePayments: e1d33d6620c705a58133c29705bc6ffbc7e4ac23
StripePaymentSheet: 8f6456410fa2671458292db6b38986d53564e990
StripePaymentsUI: 5645028620aca78ab5b95fae975379902d860fef
StripeUICore: 1e8fd6e1eda92ed45bb300b61560ae897a0232fd
Yoga: 9b7fb56e7b08cde60e2153344fa6afbd88e5d99f
Yoga: afd04ff05ebe0121a00c468a8a3c8080221cb14c

PODFILE CHECKSUM: a2ed964678852d4cc306ff4add3e4fa90be77ea6

Expand Down
5 changes: 3 additions & 2 deletions example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,17 @@
"react": "^19.0.0",
"react-native": "^0.78.0",
"react-native-safe-area-context": "^5.2.0",
"react-native-screens": "^4.9.1"
"react-native-screens": "^4.9.1",
"react-native-webview": "^13.16.0"
},
"devDependencies": {
"@babel/cli": "^7.26.4",
"@babel/core": "^7.26.9",
"@babel/preset-env": "^7.26.9",
"@babel/runtime": "^7.26.9",
"@react-native-community/cli": "15.0.1",
"@react-native-community/cli-platform-android": "15.0.1",
"@react-native-community/cli-platform-ios": "15.0.1",
"@react-native-community/cli": "15.0.1",
"@react-native/babel-preset": "0.78.0",
"@react-native/metro-config": "0.78.0",
"@react-native/typescript-config": "0.78.0",
Expand Down
18 changes: 18 additions & 0 deletions example/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,9 @@ import CustomerSheetScreen from './screens/CustomerSheetScreen';
import RevolutPayScreen from './screens/RevolutPayScreen';
import type { EmbeddedPaymentElementResult } from '@stripe/stripe-react-native';
import PaymentSheetWithPmoSfuScreen from './screens/PaymentSheetWithPmoSfuScreen';
import ConnectPaymentsListScreen from './screens/ConnectPaymentsListScreen';
import ConnectAccountOnboardingScreen from './screens/ConnectAccountOnboardingScreen';
import ConnectPayoutsListScreen from './screens/ConnectPayoutsListScreen';

const Stack = createNativeStackNavigator<RootStackParamList>();

Expand Down Expand Up @@ -102,6 +105,9 @@ export type RootStackParamList = {
CustomerSheetScreen: undefined;
RevolutPayScreen: undefined;
PaymentSheetWithPmoSfuScreen: undefined;
ConnectAccountOnboardingScreen: undefined;
ConnectPaymentsListScreen: undefined;
ConnectPayoutsListScreen: undefined;
};

declare global {
Expand Down Expand Up @@ -281,6 +287,18 @@ export default function App() {
name="AlmaPaymentScreen"
component={AlmaPaymentScreen}
/>
<Stack.Screen
name="ConnectAccountOnboardingScreen"
component={ConnectAccountOnboardingScreen}
/>
<Stack.Screen
name="ConnectPaymentsListScreen"
component={ConnectPaymentsListScreen}
/>
<Stack.Screen
name="ConnectPayoutsListScreen"
component={ConnectPayoutsListScreen}
/>
</Stack.Navigator>
</NavigationContainer>
</>
Expand Down
14 changes: 14 additions & 0 deletions example/src/screens/ConnectAccountOnboardingScreen.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { ConnectAccountOnboarding } from '@stripe/stripe-react-native';
import ConnectScreen from './ConnectScreen';

export default function ConnectAccountOnboardingScreen() {
return (
<ConnectScreen>
<ConnectAccountOnboarding
onExit={() => {
console.log('ConnectAccountOnboarding onExit');
}}
/>
</ConnectScreen>
);
}
10 changes: 10 additions & 0 deletions example/src/screens/ConnectPaymentsListScreen.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { ConnectPayments } from '@stripe/stripe-react-native';
import ConnectScreen from './ConnectScreen';

export default function ConnectPaymentsListScreen() {
return (
<ConnectScreen>
<ConnectPayments />
</ConnectScreen>
);
}
10 changes: 10 additions & 0 deletions example/src/screens/ConnectPayoutsListScreen.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { ConnectPayouts } from '@stripe/stripe-react-native';
import ConnectScreen from './ConnectScreen';

export default function ConnectPayoutsListScreen() {
return (
<ConnectScreen>
<ConnectPayouts />
</ConnectScreen>
);
}
51 changes: 51 additions & 0 deletions example/src/screens/ConnectScreen.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { ConnectComponentsProvider } from '@stripe/stripe-react-native';
import { useEffect, useState } from 'react';
import { fetchPublishableKey } from '../helpers';
import { ActivityIndicator, StyleSheet } from 'react-native';
import { API_URL } from '../Config';

interface Props {
children?: React.ReactNode;
}

const ConnectScreen: React.FC<Props> = ({ children }) => {
const [publishableKey, setPublishableKey] = useState<string | null>(null);

useEffect(() => {
fetchPublishableKey().then((pk) => {
if (pk) {
setPublishableKey(pk);
}
});
}, []);

return !publishableKey ? (
<ActivityIndicator size="large" style={StyleSheet.absoluteFill} />
) : (
<ConnectComponentsProvider
publishableKey={publishableKey}
fetchClientSecret={fetchClientSecret}
>
{children}
</ConnectComponentsProvider>
);
};

export default ConnectScreen;

const fetchClientSecret = async () => {
// TODO: use a different endpoint
const response = await fetch(`${API_URL}/create-payment-intent`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
currency: 'usd',
}),
});
const json = await response.json();
const { clientSecret } = json;

return clientSecret;
};
26 changes: 26 additions & 0 deletions example/src/screens/HomeScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -458,6 +458,32 @@ export default function HomeScreen() {
</View>
</>
</Collapse>
<Collapse title="Connect embedded components">
<View style={styles.buttonContainer}>
<Button
title="Account onboarding"
onPress={() => {
navigation.navigate('ConnectAccountOnboardingScreen');
}}
/>
</View>
<View style={styles.buttonContainer}>
<Button
title="Payments list"
onPress={() => {
navigation.navigate('ConnectPaymentsListScreen');
}}
/>
</View>
<View style={styles.buttonContainer}>
<Button
title="Payouts list"
onPress={() => {
navigation.navigate('ConnectPayoutsListScreen');
}}
/>
</View>
</Collapse>
<View style={styles.infoContainer}>
<Text style={styles.infoText}>
New arch enabled:{' '}
Expand Down
10 changes: 9 additions & 1 deletion example/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -3144,7 +3144,7 @@ inherits@2, [email protected], inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==

invariant@^2.2.4:
invariant@2.2.4, invariant@^2.2.4:
version "2.2.4"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
Expand Down Expand Up @@ -4379,6 +4379,14 @@ react-native-test-app@^4.2.1:
semver "^7.3.5"
uuid "^11.0.0"

react-native-webview@^13.16.0:
version "13.16.0"
resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-13.16.0.tgz#c995148f944a7eaf12389f0e6d5c6f5e6a775686"
integrity sha512-Nh13xKZWW35C0dbOskD7OX01nQQavOzHbCw9XoZmar4eXCo7AvrYJ0jlUfRVVIJzqINxHlpECYLdmAdFsl9xDA==
dependencies:
escape-string-regexp "^4.0.0"
invariant "2.2.4"

react-native@^0.78.0:
version "0.78.0"
resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.78.0.tgz#3e76252c8f8f35e5b7e07f9d8aee775aa8a315a7"
Expand Down
8 changes: 6 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,14 @@
"url": "https://github.com/stripe/stripe-react-native/issues"
},
"homepage": "https://github.com/stripe/stripe-react-native/#readme",
"dependencies": {},
"dependencies": {
"react-native-webview": "^13.16.0"
},
"devDependencies": {
"@expo/config-plugins": "^9.0.16",
"@react-native/babel-preset": "^0.78.0",
"@react-native/eslint-config": "^0.78.0",
"@stripe/connect-js": "^3.3.31",
"@types/jest": "^29.5.14",
"@types/react": "^19.0.10",
"eslint": "^8.57.0",
Expand All @@ -86,7 +89,8 @@
"peerDependencies": {
"expo": ">=46.0.9",
"react": "*",
"react-native": "*"
"react-native": "*",
"react-native-webview": ">=13.16.0"
},
"peerDependenciesMeta": {
"expo": {
Expand Down
Loading