Shopware API & PayPal CardFields

Shopware 6 (German)
1

Hi,

Langsam sind wir etwas am verzweifeln mit PayPal und der Shopware API.
Die PayPal Zahlung ansich funktioniert wunderbar, man erstellt eine Order, leitet das HandlePayment ein und der User wird zu PayPal weitergeleitet.
Schritte dafür:

const handlePayPalNativePayment = async () => {
  order.value = await createOrder()
  // creating the payment route
  const SUCCESS_PAYMENT_URL = `${window?.location?.origin}/${locale.value}/checkout/order/${order.value.id}/paid`
  const FAILURE_PAYMENT_URL = `${window?.location?.origin}/${locale.value}/checkout/order/${order.value.id}/unpaid`

  // Shopware paypal payment
  const handlePaymentResponse = await handlePayment(
    SUCCESS_PAYMENT_URL,
    FAILURE_PAYMENT_URL,
  )
  isLoading.value = false
  const redirectUrl = handlePaymentResponse?.data?.redirectUrl
  if (redirectUrl) {
    window.location.href = redirectUrl
  }
}

Allerdings bekommen wir es nicht gebacken die PayPal.CardFields ordentlich zu verwenden.
Zur Illustration ist hier unser Checkout:

image
image2174×1708 195 KB

Grundsätzlich rufen wir normal über die PayPal SDK
paypal.CardFields auf.

Die CreateOrder Funktion wäre folgende. (PS: Wir haben auch bereits probiert den Payment Flow komplett ohne Shopware zu erledigen.)

createOrder: async () => {
        const response = await apiClient.invoke(
          'payPalCreateOrder post /paypal/express/create-order',
          {
            body: {
              product: 'acdc',
            },
          },
        )
        return response.data.token
      },

onApprove (Funktioneirt aktuell mit diesem Code nicht)

        await apiClient.invoke(
          'payPalPrepare post /paypal/express/prepare-checkout',
          {
            body: { token: data.orderID },
          },
        )

Danach hat man die bezahlte Order ID von PayPal und wir können, theoretisch, die Shopware Order erstellen und ein HandlePayment initialisieren.
Das Problem, „handlePayment“ wirft uns dann einen Error mit „Transaction already Complete“. Macht möglicherweise auch Sinn, weil sie schon bezahlt ist.

const handledPaymentResponse = await apiClient.invoke(
    'handlePayment post /handle-payment',
    {
      query: {
        orderId: order.value.id,
        finishUrl,
      },
      body: {
        orderId: order.value.id,
        // isPayPalSpbCheckout: false,
        // paymentDetails,
        product: 'acdc',
        paypalOrderId: orderId,
      },
    },
  )

Was wäre hier der richitge Weg um es zum funktionieren zu bekommen?

Danke im Voraus!!

LG

2

Okay für all jene die über Google auf diesen Beitrag stoßen.
So funktionierts:

  1. PayPal CardFields über die PayPal SDK rendern
  2. die CreateOrder Methode der PayPal SDK muss /paypal/express/create-order aufrufen
    z.B (ob „product: „acdc“ sein muss oder nicht, weiß ich leider nicht“)
const response = await apiClient.invoke(
          'payPalCreateOrder post /paypal/express/create-order',
          {
            body: {
              product: 'acdc',
            },
          },
        )
        return response.data.token
  1. Der Response von 2 ist die orderID von PayPal.
  2. in onApprove von PayPal rufen createOrder von Shopware auf sowie handlePayment im Anschluss.
    z.B
order.value = await createOrder({
    orderId,
  })
  const finishUrl = `${window.location.origin}/${locale.value}/checkout/order/${order.value.id}/paid`
  const errorUrl = `${window.location.origin}/${locale.value}/checkout/order/${order.value.id}/failed`
  const handledPaymentResponse = await apiClient.invoke(
    'handlePayment post /handle-payment',
    {
      query: {
        orderId: order.value.id,
        finishUrl,
      },
      body: {
        orderId: order.value.id,
        product: 'acdc',
        paypalOrderId: orderId,
      },
    },
  )
  1. Danach muss die Transaktion in PayPal noch bestätigt bzw. „captured“ werden. Wir haben uns eine eigene Caputre Payment Backend Route geschaffen die das erledigt.
  2. Der Response vomm Handlepayment aus SChritt 4 gibt eine „Finalize Transaction“ URL zurück. Die rufen wir mit einem GET Request auf.
  3. Erledigt und die Bestellung sollte als Bezahlt markiert sein.