From f3a85e1e8049cd8bbc03ddc88771b5a159976da9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Franc=CC=A7ois=20Hodierne?= Date: Fri, 18 Nov 2022 16:59:04 +0100 Subject: [PATCH] stripe setup --- next.config.js | 12 ++++++------ package-lock.json | 33 +++++++++++++++++++++++++++++++++ package.json | 2 ++ pages/_app.tsx | 29 ++++++++++++++++++----------- 4 files changed, 59 insertions(+), 17 deletions(-) diff --git a/next.config.js b/next.config.js index 2a7cc60..9a5c1b4 100644 --- a/next.config.js +++ b/next.config.js @@ -39,9 +39,9 @@ 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; @@ -49,9 +49,9 @@ 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'; - 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 index 37f9677..c660d51 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,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", @@ -2922,6 +2924,24 @@ "node": "^14.17.0 || >=16.0.0" } }, + "node_modules/@stripe/react-stripe-js": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-1.15.0.tgz", + "integrity": "sha512-nqIOuAbbAN1p/zj2d2vykMzd097ZiHbu0+EpPRcfiswBRQIQIZaPrUwmj6HGD8BRA6Wp89mZen1UJbqtsfc3ZA==", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "@stripe/stripe-js": "^1.44.1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@stripe/stripe-js": { + "version": "1.44.1", + "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-1.44.1.tgz", + "integrity": "sha512-DKj3U6tS+sCNsSXsoZbOl5gDrAVD3cAZ9QCiVSykLC3iJo085kkmw/3BAACRH54Bq2bN34yySuH6G1SLh2xHXA==" + }, "node_modules/@styled-icons/boxicons-regular": { "version": "10.46.0", "resolved": "https://registry.npmjs.org/@styled-icons/boxicons-regular/-/boxicons-regular-10.46.0.tgz", @@ -13260,6 +13280,19 @@ "resolved": "https://registry.npmjs.org/@shopify/address-consts/-/address-consts-4.1.2.tgz", "integrity": "sha512-OVbuVX1SqRYyI6afY67lIAIFUGtd8XLvsTanNG3fKsvM/aPDHjyB42GYSEiM1nUI9Ja0CKveEOdIO8K7Yn9GQw==" }, + "@stripe/react-stripe-js": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-1.15.0.tgz", + "integrity": "sha512-nqIOuAbbAN1p/zj2d2vykMzd097ZiHbu0+EpPRcfiswBRQIQIZaPrUwmj6HGD8BRA6Wp89mZen1UJbqtsfc3ZA==", + "requires": { + "prop-types": "^15.7.2" + } + }, + "@stripe/stripe-js": { + "version": "1.44.1", + "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-1.44.1.tgz", + "integrity": "sha512-DKj3U6tS+sCNsSXsoZbOl5gDrAVD3cAZ9QCiVSykLC3iJo085kkmw/3BAACRH54Bq2bN34yySuH6G1SLh2xHXA==" + }, "@styled-icons/boxicons-regular": { "version": "10.46.0", "resolved": "https://registry.npmjs.org/@styled-icons/boxicons-regular/-/boxicons-regular-10.46.0.tgz", diff --git a/package.json b/package.json index bdce41b..00beeb5 100644 --- 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 index 3c20844..56992fa 100644 --- 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 ( - - - - - - - - - - - + + + + + + + + + + + + + ); }