Paypal fails with Invalid Action v65 // 3.18.2

Describe the bug I’m trying to use the drop in solution to handle the paypal flow. This fails with an Error: Invalid Action.

To Reproduce Steps to reproduce the behavior:

The paymentMethod is taken from the onSumit call within a checkout.create('dropin')

1. Payment request

curl https: //checkout-test.adyen.com/v65/payments \
-H "x-API-key: XXXX" \
-H "content-type: application/json" \
-d '{
    "additionalData": {
        "allow3DS2": true
    },
    "amount": {
        "currency": "EUR",
        "value": 12400
    },
    "billingAddress": {
        "city": "Berlin",
        "country": "DE",
        "houseNumberOrName": "63",
        "postalCode": "10117",
        "street": "Friedrichstrasse"
    },
    "channel": "Web",
    "countryCode": "DE",
    "deliveryAddress": {
        "city": "Berlin",
        "country": "DE",
        "houseNumberOrName": "63",
        "postalCode": "10117",
        "street": "Friedrichstrasse"
    },
    "lineItems": [
        {
            "amountIncludingTax": 11900,
            "description": "An Elephant",
            "id": "some-id",
            "quantity": 1,
            "taxCategory": "high"
        }
    ],
    "merchantAccount": "MyMerchantAccount",
    "origin": "http://localhost:3030",
    "paymentMethod": {
        "subtype": "sdk",
        "type": "paypal"
    },
    "reference": "my-order-id",
    "returnUrl": "http://localhost:3030/checkout/return?oid=my-order-id",
    "shopperEmail": "[e-mail]",
    "shopperIP": "::1",
    "telephoneNumber": "0000"
}'

2. Returns CartOrderResponse

  {
    "resultCode": "Pending",
    "action": {        
        "paymentData": "Ab0...",
        "paymentMethodType": "paypal",
        "sdkData": {
            "token": "EC-3.."
        },
        "type": "sdk"
    },
    "details": [
        {
            "key": "token",
            "type": "text"
        }
    ],
    "outputDetails": {
        "token": "EC-3.."
    },
    "paymentData": "Ab0...",
}

3. Render within React

    const setupAdyenPayment = async (orderResponse: CartOrderResponse) => {
        try {
            // eslint-disable-next-line
            // @ts-ignore
            await import('@adyen/adyen-web/dist/adyen.css');

            const AdyenCheckout = await import('@adyen/adyen-web');
            const configuration = {
                locale: config.adyenLocale,
                environment: config.adyenEnv,
                clientKey: config.adyenClientKey,
                translations,
                onAdditionalDetails: async (state: any) => {
                    try {
                        await onSubmitChallenge(state.data);
                    } catch (err) {
                        console.log(err);
                    }
                }
            };
            if (containerRef.current) {
                const checkout = new AdyenCheckout.default(configuration);
                checkout.createFromAction(orderResponse.action).mount(containerRef.current);                
            }
        } catch (err) {
            console.log(err);
        }
    };

Expected behavior Should not throw an error but handle paypal

Desktop (please complete the following information):

• OS: osx
• Browser ff
• Version: latest

[pabloai]

Hi @steffenmllr, and thanks for reaching out.

For the PayPal Component, you have to use the component.handleAction method instead of using the checkout.createFromAction method.

The reason for this is that the component will create a promise which will be resolved when the action is sent back to it. In other words, once the PayPal button is clicked, it will wait for the data inside the action object sent in the /payments endpoint response to show the pop-up.

I hope this helps, let us know if there’s any other questions.

[ribeiroguilherme]

Closing this issue as it seems stale. If you still have problems integrating PayPal, I am happy to reopen it and help you out with that!