Checkout payment

manifest.json

@@ -1,15 +1,15 @@
 {
   "vendor": "vtex",
-  "name": "base-store-component",
+  "name": "checkout-payment",
   "version": "0.2.2",
   "title": "IO Base Component",
   "description": "IO Base component",
   "defaultLocale": "pt-BR",
   "builders": {
     "messages": "1.x",
-    "store": "0.x",
     "react": "3.x",
-    "docs": "0.x"
+    "docs": "0.x",
+    "store": "0.x"
   },
   "mustUpdateAt": "2019-04-02",
   "scripts": {

react/.eslintrc

@@ -4,5 +4,8 @@
     "browser": true,
     "es6": true,
     "jest": true
+  },
+  "rules": {
+    "@typescript-eslint/no-non-null-assertion": "off"
   }
-}
+}

react/Payment.tsx

@@ -0,0 +1,71 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react'
+import { useSSR } from 'vtex.render-runtime'
+
+if (window && window.document) {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  var postRobot = require('post-robot')
+}
+
+interface Card {
+  cardNumber: string
+  cardName: string
+  cardDate: string
+  cardCvv: string
+}
+
+const IFRAME_APP_VERSION = '0.1.1'
+const LOCAL_IFRAME_DEVELOPMENT = false
+
+let iframeURL = `https://io.vtexpayments.com.br/card-form-ui/${IFRAME_APP_VERSION}/index.html`
+
+if (LOCAL_IFRAME_DEVELOPMENT) {
+  const PORT = 3000
+  iframeURL = `https://checkoutio.vtexlocal.com.br:${PORT}/`
+}
+
+const Payment: React.FC = () => {
+  const [cardData, setCardData] = useState<Card | null>(null)
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+
+  const isSSR = useSSR()
+
+  const setupIframe = useCallback(() => {
+    const stylesheetsUrls = Array.from(
+      document.head.querySelectorAll<HTMLLinkElement>('link[rel=stylesheet]')
+    ).map(link => link.href)
+
+    postRobot.send(iframeRef.current!.contentWindow, 'setup', {
+      stylesheetsUrls,
+    })
+  }, [])
+
+  useEffect(() => {
+    const listener = postRobot.on('card', ({ data }: { data: Card }) => {
+      setCardData(data)
+      return {
+        status: 'ok',
+      }
+    })
+    return () => listener.cancel()
+  }, [])
+
+  if (isSSR) {
+    return null
+  }
+
+  return (
+    <div>
+      <iframe
+        title="card-form-ui"
+        width="400px"
+        height="300px"
+        src={iframeURL}
+        onLoad={() => setupIframe()}
+        ref={iframeRef}
+      />
+      {cardData && <p>{JSON.stringify(cardData)}</p>}
+    </div>
+  )
+}
+
+export default Payment

react/package.json

@@ -6,10 +6,13 @@
   "dependencies": {
     "@vtex/css-handles": "^1.0.0",
     "classnames": "^2.2.6",
+    "post-robot": "^10.0.31",
     "ramda": "^0.26.1",
     "react": "^16.8.3",
+    "react-apollo": "^3.1.3",
     "react-dom": "^16.8.3",
-    "react-intl": "^2.7.2"
+    "react-iframe": "^1.8.0",
+    "react-intl": "3.9.1"
   },
   "devDependencies": {
     "@types/classnames": "^2.2.7",
@@ -24,7 +27,7 @@
     "eslint-config-vtex-react": "^4.1.0",
     "prettier": "^1.18.2",
     "tslint-eslint-rules": "^5.4.0",
-    "typescript": "3.5.2"
+    "typescript": "3.7.3"
   },
   "version": "0.2.2"
 }

react/tsconfig.json

@@ -25,4 +25,4 @@
   "typeAcquisition": {
     "enable": false
   }
-}
+}

react/typings/post-robot.d.ts

@@ -0,0 +1 @@
+declare module 'post-robot'

react/typings/vtex.render-runtime.d.ts

@@ -26,7 +26,6 @@ declare module 'vtex.render-runtime' {
 
   export const ChildBlock: ComponentType<ChildBlockProps>
   export const useChildBlock = function({ id: string }): object {}
-
   export const Helmet: ReactElement
   export const Link: ReactType
   export const NoSSR: ReactElement
@@ -35,4 +34,5 @@ declare module 'vtex.render-runtime' {
   export const withRuntimeContext: <TOriginalProps extends {}>(
     Component: ComponentType<TOriginalProps & RenderContextProps>
   ) => ComponentType<TOriginalProps>
+  export const useSSR: () => boolean
 }