Http 403 error

[Napster2210]

Hello @jesperjohansson @mortend

After selecting the "Credit Card" payment method, I am filling the card details and when I press on "Pay" button it got failed and stopped the process with just this message: "Http 403 error". I have debug the code and it goes in rejectCallback:

AdyenDropInModule.start(
          cleanedPaymentMethodsResponse,
          resolveCallback,
          rejectCallback
        );

My implementation:

import AdyenDropIn, { isCancelledError, isSuccessResult, PaymentResult, } from '@ancon/react-native-adyen-dropin';

 const adyenDropIn = AdyenDropIn.setModuleConfig({
        // Required
        baseUrl: "API_BASE_URL",
        // Optional
        debug: true,
        // Optional
        // headers: {
        //   Authorization: 'Bearer 123',
        // },
        // // Optional
        endpoints: {
          makePayment: '/makePayment',
          makeDetailsCall: '/details',
          disableStoredPaymentMethod: '/disable',
        },
      }).setDropInConfig({
        // Required
        clientKey: ADYEN_CLIENT_KEY,
        // Required
        environment: ADYEN_ENV,
        // Required
        countryCode: COUNTRY_CODE,
        // Required
        amount: {
          value: payableAmount,
          currencyCode:
            _.get(paymentDetails, "currency", DEFAULT_CURRENCY_CODE) ||
            DEFAULT_CURRENCY_CODE,
        },
        // Optional
        // applePay: {
        //   label: 'Example Company',
        //   amount: { value: 1, currencyCode: 'SEK' },
        //   configuration: {
        //     merchantId: config.applePay?.configuration?.merchantId,
        //   },
        // },
        // // Optional
        // showRemovePaymentMethodButton: config.showRemovePaymentMethodButton,
        // // Optional, required for recurring payments/saved payment method
        // shopperReference: config.shopperReference,
      });
      
     const tempMethods = await getPaymentMethods();

      adyenDropIn
        .start(tempMethods)
        .then((res: PaymentResult) => {
          console.log('result:');
          console.log(res);
          if (isSuccessResult(res)) {
            console.log('Success', `Payment success: ${res.resultCode}`);
          } else {
            console.log('Refused', `Payment refused: ${res.refusalReason}`);
          }
        })
        .catch((err: Error) => {
          if (isCancelledError(err)) {
            console.log('Cancelled');
          } else {
            console.log('Error', `Payment error: ${err.message}`, JSON.stringify(err));
            console.error(err);
          }
        })
        .finally(() => {
          setIsLoading(false);
        });

Can you please help me with this issue?

[jesperjohansson]

Hello @Napster2210, sounds like your backend responds with 403 so you might want to check on the backend side. I presume you have replaced this with an actual API url baseUrl: "API_BASE_URL". If your backend requires a bearer token or similar you need to pass it in the out-commented headers object.

[Napster2210]

Thanx @jesperjohansson for quick response. I want to ask one thing:
Is that possible that if I don't want to mention endpoints and headers in moduleConfig what will be the alternative approach through which I can call "makePayment" endpoint?

[jesperjohansson]

@Napster2210 If you mean the JS implementation it was added back by @mortend in #6. Looks like you should add disableNativeRequests

[Napster2210]

I have tried that one as well but no luck!