add usePaymentIntent flow

Author: SamueleA

examples/react/src/config.ts

@@ -167,7 +167,9 @@ export const checkoutConfig: SequenceCheckoutConfig = {
         sardineCheckoutUrl: 'https://sardine-checkout-sandbox.sequence.info',
         sardineOnRampUrl: 'https://crypto.sandbox.sardine.ai/',
         transakApiUrl: 'https://global-stg.transak.com',
-        transakApiKey: 'c20f2a0e-fe6a-4133-8fa7-77e9f84edf98'
+        transakApiKey: 'c20f2a0e-fe6a-4133-8fa7-77e9f84edf98',
+        fortePaymentUrl: 'https://staging-api.pti-dev.cloud',
+        forteWidgetUrl: 'https://dev-forte-payments-cdn.pti-dev.cloud/forte-payments-widget.js'
       }
     : undefined
 }

packages/checkout/src/api/data.ts

@@ -240,14 +240,11 @@ export interface FetchForteAccessTokenReturn {
   tokenType: string
 }
 
-//TODO: remove once part of the sequence api
-const FORTE_URL = 'https://staging-api.pti-dev.cloud'
-
-export const fetchForteAccessToken = async (): Promise<FetchForteAccessTokenReturn> => {
+export const fetchForteAccessToken = async (forteApiUrl: string): Promise<FetchForteAccessTokenReturn> => {
   const clientId = '5tpnj5869vs3jpgtpif2ci8v08'
   const clientSecret = 'jpkbg3e2ho9rbd0959qe5l6ke238d4bca2nptstfga2i9hant5e'
 
-  const url = `${FORTE_URL}/auth/v1/oauth2/token`
+  const url = `${forteApiUrl}/auth/v1/oauth2/token`
 
   const res = await fetch(url, {
     method: 'POST',
@@ -292,7 +289,10 @@ export interface CreateFortePaymentIntentReturn {
   widgetData: string
 }
 
-export const createFortePaymentIntent = async (args: CreateFortePaymentIntentArgs): Promise<CreateFortePaymentIntentReturn> => {
+export const createFortePaymentIntent = async (
+  forteApiUrl: string,
+  args: CreateFortePaymentIntentArgs
+): Promise<CreateFortePaymentIntentReturn> => {
   const {
     accessToken,
     tokenType,
@@ -312,7 +312,7 @@ export const createFortePaymentIntent = async (args: CreateFortePaymentIntentArg
     throw new Error('Invalid chainId')
   }
 
-  const url = `${FORTE_URL}/payments/v2/intent`
+  const url = `${forteApiUrl}/payments/v2/intent`
   const forteBlockchainName = network.name.toLowerCase().replace('-', '_')
   const idempotencyKey = `${recipientAddress}-${tokenId}-${protocolAddress}-${nftName}-${new Date().getTime()}`
 

packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx

@@ -204,7 +204,9 @@ export const SequenceCheckoutProvider = ({ children, config }: SequenceCheckoutP
         sardineCheckoutUrl: config?.env?.sardineCheckoutUrl ?? 'https://sardine-checkout.sequence.info',
         sardineOnRampUrl: config?.env?.sardineOnRampUrl ?? 'https://crypto.sardine.ai/',
         transakApiUrl: config?.env?.transakApiUrl ?? 'https://global.transak.com',
-        transakApiKey: config?.env?.transakApiKey ?? '5911d9ec-46b5-48fa-a755-d59a715ff0cf'
+        transakApiKey: config?.env?.transakApiKey ?? '5911d9ec-46b5-48fa-a755-d59a715ff0cf',
+        fortePaymentUrl: config?.env?.fortePaymentUrl ?? 'https://api.payments.forte.io',
+        forteWidgetUrl: config?.env?.forteWidgetUrl ?? 'https://client.payments.forte.io/forte-payments-widget.js'
       }}
     >
       <SwapModalContextProvider

packages/checkout/src/contexts/Environment.ts

@@ -8,6 +8,8 @@ export interface EnvironmentOverrides {
   transakApiKey: string
   sardineCheckoutUrl: string
   sardineOnRampUrl: string
+  fortePaymentUrl: string
+  forteWidgetUrl: string
 }
 
 const [useEnvironmentContext, EnvironmentContextProvider] = createGenericContext<EnvironmentOverrides>()

packages/checkout/src/hooks/index.ts

@@ -13,3 +13,4 @@ export * from './useERC1155SaleContractCheckout'
 export * from './useSkipOnCloseCallback'
 export * from './useSardineOnRampLink'
 export * from './useForteAccessToken'
+export * from './useFortePaymentIntent'

packages/checkout/src/hooks/useForteAccessToken.ts

@@ -1,12 +1,15 @@
 import { useQuery } from '@tanstack/react-query'
 
 import { fetchForteAccessToken } from '../api/data'
+import { useEnvironmentContext } from '../contexts/Environment'
 
 export const useForteAccessToken = () => {
+  const { fortePaymentUrl } = useEnvironmentContext()
+
   return useQuery({
     queryKey: ['useForteAccessToken'],
     queryFn: async () => {
-      const res = await fetchForteAccessToken()
+      const res = await fetchForteAccessToken(fortePaymentUrl)
 
       return res
     },

packages/checkout/src/hooks/useFortePaymentIntent.ts

@@ -1,17 +1,24 @@
 import { useQuery } from '@tanstack/react-query'
 
 import { createFortePaymentIntent, CreateFortePaymentIntentArgs } from '../api/data'
+import { useEnvironmentContext } from '../contexts/Environment'
+interface UseFortePaymentIntentOptions {
+  disabled?: boolean
+}
+
+export const useFortePaymentIntent = (args: CreateFortePaymentIntentArgs, options?: UseFortePaymentIntentOptions) => {
+  const { fortePaymentUrl } = useEnvironmentContext()
 
-export const useFortePaymentIntent = (args: CreateFortePaymentIntentArgs) => {
   return useQuery({
     queryKey: ['useFortePaymentIntent', args],
     queryFn: async () => {
-      const res = await createFortePaymentIntent(args)
+      const res = await createFortePaymentIntent(fortePaymentUrl, args)
 
       return res
     },
     retry: false,
     staleTime: 60 * 1000,
-    refetchOnWindowFocus: false
+    refetchOnWindowFocus: false,
+    enabled: !options?.disabled
   })
 }

packages/checkout/src/views/PendingCreditCardTransaction.tsx

@@ -1,10 +1,11 @@
 import { useAnalyticsContext, useProjectAccessKey } from '@0xsequence/connect'
-import { Spinner, Text } from '@0xsequence/design-system'
+import { Button, Spinner, Text } from '@0xsequence/design-system'
 import { useConfig, useGetTokenMetadata, useGetContractInfo } from '@0xsequence/hooks'
 import { findSupportedNetwork } from '@0xsequence/network'
 import pako from 'pako'
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { formatUnits } from 'viem'
+import { useSignMessage, usePublicClient, useAccount } from 'wagmi'
 
 import { fetchSardineOrderStatus } from '../api'
 import { NFT_CHECKOUT_SOURCE } from '../constants'
@@ -15,7 +16,8 @@ import {
   useSardineClientToken,
   useTransactionStatusModal,
   useSkipOnCloseCallback,
-  useForteAccessToken
+  useForteAccessToken,
+  useFortePaymentIntent
 } from '../hooks'
 import { TRANSAK_PROXY_ADDRESS } from '../utils/transak'
 
@@ -436,28 +438,111 @@ export const PendingCreditCardTransactionSardine = ({ skipOnCloseCallback }: Pen
 }
 
 export const PendingCreditCardTransactionForte = ({ skipOnCloseCallback }: PendingCreditTransactionProps) => {
+  const { forteWidgetUrl } = useEnvironmentContext()
   const { data: accessTokenData, isLoading: isLoadingAccessToken, isError: isErrorAccessToken } = useForteAccessToken()
+  const { data: signatureData, signMessage } = useSignMessage()
+  const { address } = useAccount()
+  const nav = useNavigation()
+  const {
+    params: { creditCardCheckout }
+  } = nav.navigation as TransactionPendingNavigation
+  const publicClient = usePublicClient({ chainId: creditCardCheckout.chainId })
+  const isMessageSigned = signatureData !== undefined
 
-  if (isLoadingAccessToken) {
+  const {
+    data: tokenMetadatas,
+    isLoading: isLoadingTokenMetadata,
+    isError: isErrorTokenMetadata
+  } = useGetTokenMetadata({
+    chainID: String(creditCardCheckout.chainId),
+    contractAddress: creditCardCheckout.nftAddress,
+    tokenIDs: [creditCardCheckout.nftId]
+  })
+
+  const tokenMetadata = tokenMetadatas ? tokenMetadatas[0] : undefined
+
+  const nftQuantity = formatUnits(BigInt(creditCardCheckout.nftQuantity), Number(creditCardCheckout.nftDecimals || 0))
+
+  const {
+    data: paymentIntentData,
+    isLoading: isLoadingPaymentIntent,
+    isError: isErrorPaymentIntent
+  } = useFortePaymentIntent(
+    {
+      accessToken: accessTokenData?.accessToken || '',
+      tokenType: accessTokenData?.tokenType || '',
+      nonce: `${address || ''}-${Date.now()}`,
+      nftQuantity,
+      recipientAddress: creditCardCheckout.recipientAddress,
+      chainId: creditCardCheckout.chainId.toString(),
+      signature: signatureData || '',
+      tokenAddress: creditCardCheckout.nftAddress,
+      protocolAddress: creditCardCheckout.contractAddress,
+      nftName: tokenMetadata?.name || '',
+      imageUrl: tokenMetadata?.image || '',
+      tokenId: creditCardCheckout.nftId
+    },
+    {
+      disabled: !isMessageSigned || isLoadingTokenMetadata
+    }
+  )
+
+  const isLoading = isLoadingTokenMetadata || isLoadingAccessToken || isLoadingPaymentIntent
+  const isError = isErrorTokenMetadata || isErrorAccessToken || isErrorPaymentIntent
+
+  const onClickSignMessage = async () => {
+    if (!publicClient || !address) {
+      console.error('No public client or address')
+      return
+    }
+
+    try {
+      await signMessage({ message: creditCardCheckout.calldata })
+    } catch (e) {
+      console.error('An error occurred while signing the message')
+    }
+  }
+
+  if (!isMessageSigned) {
+    return (
+      <div className="flex items-center justify-center" style={{ height: '770px' }}>
+        <Button variant="primary" onClick={onClickSignMessage}>
+          Approve and purchase
+        </Button>
+      </div>
+    )
+  }
+
+  if (isLoading) {
     return (
       <div className="flex items-center justify-center" style={{ height: '770px' }}>
         <Spinner size="lg" />
       </div>
     )
   }
 
-  if (isErrorAccessToken) {
+  if (isError) {
     return (
       <div className="flex items-center justify-center" style={{ height: '770px' }}>
         <Text color="primary">An error has occurred</Text>
       </div>
     )
   }
 
+  const initializeFortePayment = () => {
+    // @ts-ignore-next-line
+    window.initFortePaymentsWidget({
+      containerId: 'forte-payments-widget-container',
+      data: {
+        ...paymentIntentData
+      }
+    })
+  }
+
   return (
     <div className="flex items-center justify-center" style={{ height: '770px' }}>
-      <Text color="primary">Forte</Text>
-      <Text color="primary">{accessTokenData?.accessToken}</Text>
+      <div id="forte-payments-widget-container"></div>
+      <script onLoad={initializeFortePayment} type="module" async src={forteWidgetUrl}></script>
     </div>
   )
 }