diff --git a/packages/checkout/src/views/PendingCreditCardTransaction.tsx b/packages/checkout/src/views/PendingCreditCardTransaction.tsx
index 85b6202a..7e392a83 100644
--- a/packages/checkout/src/views/PendingCreditCardTransaction.tsx
+++ b/packages/checkout/src/views/PendingCreditCardTransaction.tsx
@@ -17,24 +17,30 @@ import {
import { TRANSAK_PROXY_ADDRESS } from '../utils/transak'
const POLLING_TIME = 10 * 1000
+interface PendingCreditTransactionProps {
+ skipOnCloseCallback: () => void
+}
+
export const PendingCreditCardTransaction = () => {
const nav = useNavigation()
const {
params: {
- creditCardCheckout: { provider }
+ creditCardCheckout: { provider, onClose = () => {} }
}
} = nav.navigation as TransactionPendingNavigation
+ const { skipOnCloseCallback } = useSkipOnCloseCallback(onClose)
+
switch (provider) {
case 'transak':
- return
+ return
case 'sardine':
default:
- return
+ return
}
}
-export const PendingCreditCardTransactionTransak = () => {
+export const PendingCreditCardTransactionTransak = ({ skipOnCloseCallback }: PendingCreditTransactionProps) => {
const { openTransactionStatusModal } = useTransactionStatusModal()
const nav = useNavigation()
const { settings, closeCheckout } = useCheckoutModal()
@@ -109,9 +115,6 @@ export const PendingCreditCardTransactionTransak = () => {
const isLoading = isLoadingTokenMetadata || isLoadingCollectionInfo
const isError = isErrorTokenMetadata || isErrorCollectionInfo
- const { onClose = () => {} } = creditCardCheckout
- const { skipOnCloseCallback } = useSkipOnCloseCallback(onClose)
-
useEffect(() => {
const transakIframeElement = document.getElementById('transakIframe') as HTMLIFrameElement
const transakIframe = transakIframeElement.contentWindow
@@ -143,7 +146,7 @@ export const PendingCreditCardTransactionTransak = () => {
creditCardCheckout.onSuccess(txHash, creditCardCheckout)
}
},
- onClose
+ onClose: creditCardCheckout?.onClose
})
return
}
@@ -222,7 +225,7 @@ export const PendingCreditCardTransactionTransak = () => {
)
}
-export const PendingCreditCardTransactionSardine = () => {
+export const PendingCreditCardTransactionSardine = ({ skipOnCloseCallback }: PendingCreditTransactionProps) => {
const { openTransactionStatusModal } = useTransactionStatusModal()
const nav = useNavigation()
const { settings, closeCheckout } = useCheckoutModal()
@@ -260,9 +263,6 @@ export const PendingCreditCardTransactionSardine = () => {
? `https://sardine-checkout-sandbox.sequence.info?api_url=https://sardine-api-sandbox.sequence.info&client_token=${authToken}&show_features=true`
: `https://sardine-checkout.sequence.info?api_url=https://sardine-api.sequence.info&client_token=${authToken}&show_features=true`
- const { onClose = () => {} } = creditCardCheckout
- const { skipOnCloseCallback } = useSkipOnCloseCallback(onClose)
-
const pollForOrderStatus = async () => {
try {
if (!data) {
@@ -304,7 +304,7 @@ export const PendingCreditCardTransactionSardine = () => {
creditCardCheckout.onSuccess(transactionHash, creditCardCheckout)
}
},
- onClose
+ onClose: creditCardCheckout?.onClose
})
return
}