Merge pull request #1156 from microlinkhq/next

Migrate Stripe

package.json

@@ -40,6 +40,8 @@
     "@microlink/mql": "~0.7.16",
     "@microlink/react": "~5.5.1",
     "@microlink/recipes": "~0.0.28",
+    "@stripe/react-stripe-js": "~1.1.2",
+    "@stripe/stripe-js": "~1.11.0",
     "@styled-system/prop-types": "~5.1.5",
     "@tippyjs/react": "~4.2.0",
     "autoprefixer": "~10.0.3",
@@ -93,7 +95,6 @@
     "react-helmet": "~6.1.0",
     "react-is": "~17.0.1",
     "react-spring": "~8.0.27",
-    "react-stripe-elements": "~6.1.2",
     "react-syntax-highlighter": "~15.3.1",
     "react-timeago": "~5.2.0",
     "react-twitter-embed": "~3.0.3",

src/components/patterns/Checkout.js

@@ -1,8 +1,8 @@
 /* global fetch */
 
 import { Caps, Button } from 'components/elements'
-import { StripeLoader } from 'components/patterns'
 import { useSiteMetadata } from 'components/hook'
+import { loadStripe } from '@stripe/stripe-js'
 import React, { useState } from 'react'
 
 export default ({ canonicalUrl, planId, stripeKey, ...props }) => {
@@ -13,7 +13,9 @@ export default ({ canonicalUrl, planId, stripeKey, ...props }) => {
     paymentEndpoint: apiEndpoint
   } = useSiteMetadata()
 
-  const createStripeCheckout = stripe => async () => {
+  const stripePromise = loadStripe(stripeKey, { locale: 'en' })
+
+  const handleCheckout = async () => {
     setIsLoading(true)
 
     const { data } = await fetch(`${apiEndpoint}/payment/session`, {
@@ -26,26 +28,19 @@ export default ({ canonicalUrl, planId, stripeKey, ...props }) => {
       })
     }).then(res => res.json())
 
-    stripe.redirectToCheckout(data)
+    await (await stripePromise).redirectToCheckout(data)
   }
 
   return (
-    <StripeLoader stripeKey={stripeKey}>
-      {stripe => {
-        const handleCheckout = createStripeCheckout(stripe)
-        return (
-          <Button
-            onClick={handleCheckout}
-            onTouchStart={handleCheckout}
-            loading={isLoading}
-            data-event-category='Checkout'
-            data-event-action='Buy'
-            {...props}
-          >
-            <Caps fontSize={2}>Buy </Caps>
-          </Button>
-        )
-      }}
-    </StripeLoader>
+    <Button
+      onClick={handleCheckout}
+      onTouchStart={handleCheckout}
+      loading={isLoading}
+      data-event-category='Checkout'
+      data-event-action='Buy'
+      {...props}
+    >
+      <Caps fontSize={2}>Buy</Caps>
+    </Button>
   )
 }

src/components/patterns/PricingTable/PricingTable.js

@@ -42,11 +42,7 @@ Price.defaultProps = {
   fontSize: [1, 2, 2, 2]
 }
 
-const PricingPrice = props => (
-  <Price label='/month' {...props}>
-    0
-  </Price>
-)
+const PricingPrice = props => <Price label='/month' {...props} />
 
 const RequestsPerDay = props => (
   <Label display='inline' suffix='/day' {...props}>