stripe setup

opencollective · Nov 18, 2022 · f3a85e1 · f3a85e1
1 parent 49d914e
commit f3a85e1
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 17 deletions.
diff --git a/next.config.js b/next.config.js
@@ -39,19 +39,19 @@ const config = {
                 img-src 'self' data: opencollective-production.s3.us-west-1.amazonaws.com opencollective-production.s3-us-west-1.amazonaws.com opencollective.com images.opencollective.com images-staging.opencollective.com blog.opencollective.com;
                 worker-src 'none';
                 style-src 'self' 'unsafe-inline';
-                connect-src 'self' opencollective.com api.opencollective.com api-staging.opencollective.com;
-                script-src 'self' 'unsafe-eval' 'unsafe-inline';
-                frame-src 'none';
+                connect-src 'self' api.stripe.com opencollective.com api.opencollective.com api-staging.opencollective.com;
+                script-src 'self' 'unsafe-eval' 'unsafe-inline' js.stripe.com;
+                frame-src js.stripe.com hooks.stripe.com;
               `
               : `
                 block-all-mixed-content;
                 default-src 'self';
                 img-src 'self' data: opencollective-production.s3.us-west-1.amazonaws.com opencollective-production.s3-us-west-1.amazonaws.com opencollective.com images.opencollective.com images-staging.opencollective.com blog.opencollective.com;
                 worker-src 'none';
                 style-src 'self' 'unsafe-inline';
-                connect-src 'self' opencollective.com api.opencollective.com api-staging.opencollective.com;
-                script-src 'self';
-                frame-src 'none';
+                connect-src 'self' api.stripe.com opencollective.com api.opencollective.com api-staging.opencollective.com;
+                script-src 'self' js.stripe.com;
+                frame-src js.stripe.com hooks.stripe.com;
               `
             )
               .replace(/\s{2,}/g, ' ')

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,6 +33,8 @@
   "dependencies": {
     "@apollo/client": "3.7.1",
     "@opencollective/frontend-components": "0.3.8",
+    "@stripe/react-stripe-js": "^1.15.0",
+    "@stripe/stripe-js": "^1.44.1",
     "@styled-system/prop-types": "^5.1.5",
     "babel-plugin-formatjs": "^10.3.31",
     "babel-plugin-react-remove-properties": "^0.3.0",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -9,6 +9,11 @@ import { createGlobalStyle, ThemeProvider } from 'styled-components';
 import { useApollo } from '../lib/apollo-client';
 import theme from '@opencollective/frontend-components/lib/theme';
 
+import { Elements } from '@stripe/react-stripe-js';
+import { loadStripe } from '@stripe/stripe-js';
+
+const stripePromise = loadStripe('pk_test_VgSB4VSg2wb5LdAkz7p38Gw8');
+
 const GlobalStyles = createGlobalStyle`
   @font-face {
     font-family: 'Inter';
@@ -128,16 +133,18 @@ const GlobalStyles = createGlobalStyle`
 export default function App({ Component, pageProps }: AppProps) {
   const apolloClient = useApollo(pageProps);
   return (
-    <SessionProvider session={pageProps['session']} refetchInterval={0}>
-      <IntlProvider locale="en">
-        <ApolloProvider client={apolloClient}>
-          <ThemeProvider theme={theme}>
-            <GlobalStyles />
-            <NextNProgress />
-            <Component {...pageProps} />
-          </ThemeProvider>
-        </ApolloProvider>
-      </IntlProvider>
-    </SessionProvider>
+    <Elements stripe={stripePromise}>
+      <SessionProvider session={pageProps['session']} refetchInterval={0}>
+        <IntlProvider locale="en">
+          <ApolloProvider client={apolloClient}>
+            <ThemeProvider theme={theme}>
+              <GlobalStyles />
+              <NextNProgress />
+              <Component {...pageProps} />
+            </ThemeProvider>
+          </ApolloProvider>
+        </IntlProvider>
+      </SessionProvider>
+    </Elements>
   );
 }