How to finish the active transaction

[stepan-twnty]

I use Google Pay, and when something goes wrong, I redirect the user to the Failure page.

For example, the user didn't pass 3D authentication. Below is my code where you can check all occasions of redirection to the Failure page (check where the forwardToFailurePage function is called). The problem occurs when the user tries to choose another payment method on the Failure page and than Shopware returns the error: The order has an active transaction - 019899b8ba3d703f829f4fac4a13dd21. I understand that the status of the order is In progress, that's why I see the error, but using Store-API, I can't change the status of the Payment.

Can you help deal with the situation?

import React, { ReactElement } from 'react'
import { useRouter } from 'next/router'
import { AdyenCheckout } from '@adyen/adyen-web'

import Preloader from '@comp/atoms/Preloader'
import LayoutSecure, { MetaDataI } from '@comp/templates/LayoutSecure'
import useShopware from '@hooks/useShopware'
import useStatus, { Status } from '@hooks/useStatus'
import useHeaderDimensions from '@hooks/useHeaderDimensions'
import { environment, path } from '@configs'
import { addExceptionToLog } from '@utils/addExceptionToLog'

import type { NextPageWithLayout } from '@pages/_app'

const AdyenFinalize: NextPageWithLayout = () => {
  const threeDRef = React.useRef<HTMLDivElement>(null)
  const [status, setStatus] = useStatus()
  const router = useRouter()
  const { headerHeightInRem } = useHeaderDimensions()
  const shopwareApiClient = useShopware()
  const orderId = Array.isArray(router.query.orderId) ? router.query.orderId[0] : router.query.orderId
  const thankYouPage = `${path.CHECKOUT_THANK_YOU}?order=${orderId}`
  const failurePage = `${path.CHECKOUT_FAILURE}?order=${orderId}`

  const forwardToFailurePage = async () => {
    //change payment status to Failed?
    await router.push(failurePage)

    return
  }

  React.useEffect(() => {
    let ignore = false
    if (!router.isReady || !threeDRef.current) return
    if (!orderId) return void forwardToFailurePage()

    const handleAdditionalActions = async () => {
      try {
        setStatus(Status.loading)
        const paymentStatus = await shopwareApiClient.invoke('readAdyenPaymentStatus post /adyen/payment-status', {
          body: { orderId },
        })

        if (paymentStatus.data.isFinal && paymentStatus.data.resultCode === 'Refused') {
          return await forwardToFailurePage()
        }
        if (paymentStatus.data.isFinal) return void router.push(thankYouPage)
        if (!paymentStatus.data.action?.type) {
          const errorMessage = `Adyen returns action undefined which we not able handle. Data: ${JSON.stringify(paymentStatus.data)}`
          await addExceptionToLog(new Error(errorMessage))

          return await forwardToFailurePage()
        }

        const checkout = await AdyenCheckout({
          countryCode: 'DE',
          environment: environment.isProduction ? 'live' : 'test',
          clientKey: process.env.NEXT_PUBLIC_ADYEN_SECRET,
          onAdditionalDetails: async (state, _, actions) => {
            const additionalPaymentDetails = await shopwareApiClient.invoke(
              'submitAdyenAdditionalPaymentDetails post /adyen/payment-details',
              { body: { orderId, stateData: JSON.stringify(state.data) } }
            )

            if (!actions && additionalPaymentDetails.data.resultCode === 'Authorised') {
              return void router.push(thankYouPage)
            }
            if (!actions && additionalPaymentDetails.data.resultCode === 'Refused') {
              return void router.push(failurePage)
            }

            actions.resolve({ resultCode: additionalPaymentDetails.data.resultCode })
          },
          onPaymentCompleted() {
            router.push(thankYouPage)
          },
          onPaymentFailed() {
            forwardToFailurePage()
          },
        })
        const component = checkout.createFromAction(paymentStatus.data.action, { challengeWindowSize: '02' })

        if (!ignore) {
          component
            .isAvailable()
            .then(() => {
              if (!threeDRef.current) return

              component.mount(threeDRef.current)
              setStatus(Status.succeeded)
            })
            .catch(() => void forwardToFailurePage())
        }
      } catch (e) {
        void forwardToFailurePage()
      }
    }

    void handleAdditionalActions()

    return () => {
      ignore = true
    }
  }, [router.isReady, orderId, thankYouPage, failurePage])

  return (
    <div className="relative flex items-center justify-center" style={{ height: `calc(100vh - ${headerHeightInRem})` }}>
      {status === Status.loading && (
        <div className="absolute z-10 flex size-full items-center justify-center bg-white-60 opacity-80">
          <Preloader />
        </div>
      )}
      <div ref={threeDRef} />
    </div>
  )
}

AdyenFinalize.getLayout = function getLayout(page: ReactElement) {
  const seoData: MetaDataI = { title: 'Wir arbeiten an Ihrer Bestellung | Priwatt' }

  return (
    <LayoutSecure seoData={seoData} isNewsLetterVisible={false} isNoIndex>
      {page}
    </LayoutSecure>
  )
}

export default AdyenFinalize

[adyen-integrations-support]

Good morning @stepan-twnty ,

Thank you for reaching out.

We will review the information you have provided and get back to you with more details shortly.

Best regards

[adyen-integrations-support]

Hi @stepan-twnty ,

After an unsuccessful 3DS payment, the transaction in Shopware must be finalized, otherwise, it remains in the in_progress state and prevents the shopper from paying with another payment method.

In Shopware, this finalization is handled by the core route in Shopware\Core\Checkout\Payment\Controller\PaymentController:

/payment/finalize-transaction

When this route is called, Shopware invokes the payment handler’s finalize() method and transitions the transaction into a final state (failed in case of 3DS failure).

In our integration, after the order is created, we call Adyen\Shopware\Storefront\Controller\FrontendProxyController:

/adyen/proxy-handle-payment

This endpoint proxies to Shopware\Core\Checkout\Payment\SalesChannelandlePaymentMethodRoute, which already generates the corresponding finalize-transaction URL. This URL can then be called regardless of the outcome of the payment flow.

By ensuring that this final step is reached, the transaction will be closed correctly on the backend. Once it is marked as failed, a new transaction can be started with another payment method.

If you have any further questions, please don’t hesitate to reach out.

Best regards

[stepan-twnty]

@adyen-integrations-support I understand the idea, but I don't know how to call these routes from the headless Frontend. I tried:
1)

await fetch('https://my-shopware.de/adyen/proxy-handle-payment', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'sw-access-key': 'SWSCTK12CM56UGFJWTHJNNHPZQ',
                'sw-context-token': 'ALoanXwYmJF1O2T3xzp1zmCCjbroFtk1',
              },
            })

It returns a 400 error

2. /store-api/handle-payment returns 200, but the order is still in progress.
   Here is my code:

onAdditionalDetails: async (state, _, actions) => {
            const additionalPaymentDetails = await shopwareApiClient.invoke(
              'submitAdyenAdditionalPaymentDetails post /adyen/payment-details',
              { body: { orderId, stateData: JSON.stringify(state.data) } }
            )

            const finishUrl = routes.siteUrl + path.CHECKOUT_THANK_YOU.substring(1)
            const errorUrl = routes.siteUrl + path.CHECKOUT_FAILURE.substring(1)
            await shopwareApiClient.invoke('handlePaymentMethod post /handle-payment', {
              body: {
                orderId,
                finishUrl: `${finishUrl}?order=${orderId}`,
                errorUrl: `${errorUrl}?order=${orderId}`,
              },
            })

            if (!actions && additionalPaymentDetails.data.resultCode === 'Authorised') {
              return void router.push(thankYouPage)
            }
            if (!actions && additionalPaymentDetails.data.resultCode === 'Refused') {
              return void router.push(failurePage)
            }

            actions.resolve({ resultCode: additionalPaymentDetails.data.resultCode })
          },
          onPaymentCompleted() {
            router.push(thankYouPage)
          },
          onPaymentFailed() {
            router.push(failurePage)
          },

[adyen-integrations-support]

Hi @stepan-twnty ,

Thank you for sharing the details and the code snippet.

We’ll review the configuration and implementation you sent us, and we’ll get back to you with more information as soon as we have completed our checks.

Best regards

[adyen-integrations-support]

Good morning @stepan-twnty ,

/store-api/handle-payment does not necessarily close the transaction. It only initializes the payment flow and returns the next step. You can see the official documentation here: https://shopware.stoplight.io/docs/store-api/8218801e50fe5-handling-the-payment.

In our integration, /adyen/proxy-handle-payment is just a wrapper around /store-api/handle-payment. It initializes the payment and provides the finalization URL. After calling /store-api/handle-payment, you can keep the finalization URL and call it later to close the transaction. This step is important when the payment fails (e.g., failed 3DS), because only the finalize call will move the transaction into a final state, such as failed.

Regarding the 400 error: in the code snippet you shared, the request body is missing the required payload (orderId, finishUrl, errorUrl, and, for Google Pay 3DS, also stateData). Without this data, Shopware’s validation fails, and the route responds with 400.

Kind regards