credit.diff

diff --git a/packages/gatsby-starter-autonomy/package.json b/packages/gatsby-starter-autonomy/package.json
index de49216..1e29395 100644
--- a/packages/gatsby-starter-autonomy/package.json
+++ b/packages/gatsby-starter-autonomy/package.json
@@ -16,6 +16,8 @@
   "dependencies": {
     "@chordcommerce/chord-magic": "^1.0.0",
     "@chordcommerce/gatsby-theme-autonomy": "^1.0.0",
+    "@stripe/react-stripe-js": "^1.4.1",
+    "@stripe/stripe-js": "^1.16.0",
     "gatsby": "^2.25.0",
     "gatsby-plugin-alias-imports": "^1.0.5",
     "gatsby-plugin-create-client-paths": "^3.10.0",
diff --git a/packages/gatsby-starter-autonomy/src/components/Account/Subscription/Detail/AddressForm/index.jsx b/packages/gatsby-starter-autonomy/src/components/Account/Subscription/Detail/AddressForm/index.jsx
index 8c9830f..f0e6e86 100644
--- a/packages/gatsby-starter-autonomy/src/components/Account/Subscription/Detail/AddressForm/index.jsx
+++ b/packages/gatsby-starter-autonomy/src/components/Account/Subscription/Detail/AddressForm/index.jsx
@@ -1,34 +1,40 @@
 /** @jsx jsx */
 import { Button, Input, Flex, Text, Spinner, jsx } from 'theme-ui'
-import { useState } from 'react'
+// eslint-disable-next-line no-unused-vars
+import React, { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import {
   useSubscription,
   useTranslate
 } from '@chordcommerce/gatsby-theme-autonomy'
+import { CardElement, useElements, useStripe } from '@stripe/react-stripe-js'
 
 const inputStyle = {
-  maxWidth: '350px'
+  maxWidth: '350px',
+  flex: 4
 }
 
 const flexStyle = {
   flexDirection: ['column', 'row'],
   justifyContent: 'space-between',
-  margin: '15px',
+  margin: '10px',
   alignItems: ['left', 'center']
 }
 
 const textStyle = {
   textAlign: 'left',
-  marginRight: '3rem'
+  marginRight: '3rem',
+  flex: 1
 }
 
 const SubscriptionDetailsAddressForm = ({
-  addressType,
-  subscription,
-  close
-}) => {
+                                          addressType,
+                                          subscription,
+                                          close
+                                        }) => {
   const translate = useTranslate()
+  const stripe = useStripe()
+  const elements = useElements()
 
   const { updateSubscription } = useSubscription(subscription.id)
 
@@ -48,6 +54,7 @@ const SubscriptionDetailsAddressForm = ({
 
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState(null)
+  const isBilling = addressType === 'billAddress'
 
   const onSubmit = async data => {
     setLoading(true)
@@ -55,9 +62,51 @@ const SubscriptionDetailsAddressForm = ({
 
     try {
       const paramsPrefix = `${addressType}Attributes`
-      await updateSubscription({
-        [paramsPrefix]: data
-      })
+      let payload = { [paramsPrefix]: data }
+
+      if (isBilling) {
+        if (!stripe || !elements) {
+          setLoading(false)
+          return
+        }
+
+        const cardElement = elements.getElement(CardElement)
+        stripe.createPaymentMethod()
+        const { error, paymentMethod } = await stripe.createPaymentMethod({
+          type: 'card',
+          card: cardElement,
+          billing_details: {
+            name: data.name,
+            address: {
+              line1: data.address1,
+              line2: data.address2,
+              city: data.city,
+              country: data.country_iso,
+              state: data.state_name,
+              postal_code: data.zipcode
+            }
+          }
+        })
+
+        if (error) {
+          setError(error.message)
+          setLoading(false)
+          return
+        }
+
+        const { card } = paymentMethod
+        payload.paymentSourceAttributes = {
+          month: card.exp_month,
+          year: card.exp_year,
+          ccType: card.brand,
+          lastDigits: card.last4,
+          name: paymentMethod.billing_details.name,
+          gateway_payment_profile_id: paymentMethod.id
+        }
+      }
+
+      await updateSubscription(payload)
+      setTimeout(() => close(), 1)
     } catch (error) {
       setError(error)
     }
@@ -126,6 +175,17 @@ const SubscriptionDetailsAddressForm = ({
         />
       </Flex>
 
+      {isBilling && (
+        <>
+          <Flex sx={flexStyle}>
+            <Text sx={textStyle}>Card Info</Text>
+          </Flex>
+          <div style={{ display: 'block', margin: '10px' }}>
+            <CardElement options={{ hidePostalCode: true }} />
+          </div>
+        </>
+      )}
+
       {error && <Text variant="formError">{error.message}</Text>}
 
       <Flex
diff --git a/packages/gatsby-starter-autonomy/src/components/Account/Subscription/Detail/Page/index.jsx b/packages/gatsby-starter-autonomy/src/components/Account/Subscription/Detail/Page/index.jsx
index a3f6d13..4ef9f04 100644
--- a/packages/gatsby-starter-autonomy/src/components/Account/Subscription/Detail/Page/index.jsx
+++ b/packages/gatsby-starter-autonomy/src/components/Account/Subscription/Detail/Page/index.jsx
@@ -15,6 +15,8 @@ import {
   useTranslate,
   useSubscription
 } from '@chordcommerce/gatsby-theme-autonomy'
+import { loadStripe } from '@stripe/stripe-js'
+import { Elements } from '@stripe/react-stripe-js'
 import SummaryImage from '~/components/Account/Subscription/SummaryImage'
 import ShippingCard from '~/components/Account/Subscription/Detail/ShippingCard'
 import BillingCard from '~/components/Account/Subscription/Detail/BillingCard'
@@ -102,26 +104,30 @@ const SkipOrCancel = ({ isFetching, skipSubscription, cancelSubscription }) => {
   )
 }
 
+const stripePromise = loadStripe(process.env.GATSBY_STRIPE_PK_KEY)
+
 const Addresses = ({ subscription }) => {
   const translate = useTranslate()
 
   return (
-    <Flex
-      sx={{
-        flexDirection: ['column', 'column', 'row'],
-        justifyContent: 'space-around',
-        alignItems: 'center'
-      }}
-    >
-      <ShippingCard
-        title={translate('subscriptions.shipping')}
-        subscription={subscription}
-      />
-      <BillingCard
-        title={translate('subscriptions.billing')}
-        subscription={subscription}
-      />
-    </Flex>
+    <Elements stripe={stripePromise}>
+      <Flex
+        sx={{
+          flexDirection: ['column', 'column', 'row'],
+          justifyContent: 'space-around',
+          alignItems: 'flex-start'
+        }}
+      >
+        <ShippingCard
+          title={translate('subscriptions.shipping')}
+          subscription={subscription}
+        />
+        <BillingCard
+          title={translate('subscriptions.billing')}
+          subscription={subscription}
+        />
+      </Flex>
+    </Elements>
   )
 }
 
diff --git a/yarn.lock b/yarn.lock
index ee8ba2f..4ab1965 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2971,6 +2971,18 @@
   dependencies:
     type-detect "4.0.8"
 
+"@stripe/react-stripe-js@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@stripe/react-stripe-js/-/react-stripe-js-1.4.1.tgz#884d59286fff00ba77389b32c045516f65d7a340"
+  integrity sha512-FjcVrhf72+9fUL3Lz3xi02ni9tzH1A1x6elXlr6tvBDgSD55oPJuodoP8eC7xTnBIKq0olF5uJvgtkJyDCdzjA==
+  dependencies:
+    prop-types "^15.7.2"
+
+"@stripe/stripe-js@^1.16.0":
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-1.16.0.tgz#73bce24fb7f47d719caa6b151e58e49b4167d463"
+  integrity sha512-ZSHbiwTrISoaTbpercmYGuY7QTg7HxfFyNgbJBaYbwHWbzMhpEdGTsmMpaBXIU6iiqwEEDaIyD8O6yJ+H5DWCg==
+
 "@stripe/stripe-js@^1.7.0":
   version "1.12.1"
   resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-1.12.1.tgz#baa5f1d8cfdbda174a0419cb42d2f1c8d622a7eb"