Payment methods not showing

[zvone00]

Hello,

I copied exact code from documentation to my component.

import AdyenPayment from 'react-native-adyen-payment';

const DEMO_SERVER_API_KEY ="Your Demo Server Key";
const CARD_PUBLIC_KEY = "Your Public Card Key";
const MERCHANT_ACCOUNT = 'Your Merchant Account';

class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      isLoading : false,
      adyen_payment_status : 'initiated'
    };
        /*
    The base URL should be your API server running with the following POST endpoints
     - /paymentMethods
     - /payments
     - /payments/details
     Ex :
     Base URL : https://XXXXXX.com/payments/adyen
     https://XXXXXX.com/payments/adyen/paymentMethods
     https://XXXXXX.com/payments/adyen/payments
     https://XXXXXX.com/payments/adyen/payments/details
     Any Extra Header Parameters to be passed can be given in the "additional_http_headers"
     As an example we are using Adyens Demo Server Base URL
    */
     var appServiceConfigData = {
      "environment" : "test",
      "base_url": "https://checkoutshopper-test.adyen.com/checkoutshopper/demoserver/",
      "additional_http_headers" : {
        "x-demo-server-api-key": DEMO_SERVER_API_KEY
      }
    };
    AdyenPayment.initialize(appServiceConfigData);
    AdyenPayment.onSuccess((payload) => {
      this.setState({adyen_payment_status: 'success'});
      console.log(payload);
    });

    AdyenPayment.onError((code, error) => {
      console.log("Adyen Error : ",error);
      this.setState({adyen_payment_status: 'failure'});
    });
  }

   onClickPayment = () =>
   {
        var paymentDetails = {
          amount: {
              value: 200,//In Multiples of hundred
              currency: 'EUR'
          },
          reference: "XXXXXXXX",
          shopperReference : "XXXXXX",
          shopperEmail : "[email protected]",
          channel: (Platform.OS === 'ios') ? "iOS" : "Android",
          countryCode: "FR",
          shopperLocale: "fr_FR",
          returnUrl: (Platform.OS === 'ios') ? '<YourAppDisplayName>-app://' : "adyencheckout://<packageName>",
          merchantAccount: MERCHANT_ACCOUNT,
          additionalData : {
                  allow3DS2 : true,
                  executeThreeD : true
          }
        };
        // Data for various Components
        var componentData = {
          "scheme" : {
            "card_public_key" : CARD_PUBLIC_KEY
          },
          "applepay" : {
            "apple_pay_merchant_id" : "Your Apple Merchant ID"
          },
          "bcmc":{
            "card_public_key" : CARD_PUBLIC_KEY
          }
        }
      try{
          // The Following Payment Methods are supported
          //DROPIN,IDEAL,MOLPAY_MALAYSIA,MOLPAY_THAILAND,MOLPAY_VIETNAM,DOTPAY,EPS,ENTERCASH,OPEN_BANKING,
          //SCHEME,GOOGLE_PAY,SEPA,BCMC,WECHAT_PAY_SDK,APPLE_PAY,
          AdyenPayment.startPayment(AdyenPayment.DROPIN,componentData,paymentDetails)
      }catch(err){
        console.log(err.message);
      }
   }

   render() {
    return (
      <View style={styles.container}>
          <Button label={"Pay"} onPress={() => {this.onClickPayment();}}/>
      </View>
   )
  }

But the payment methods are not showing, only the pay button is visible. What should I do in order for payment methods to show-up (specifically credit card fields)? How are they mounted?
Is there any way to debug AdyenPayment.initialize(appServiceConfigData);?

Thanks

[mkharibalaji]

Hi @zvone00 ,
This method initializes AdyenPayment.initialize(appServiceConfigData) the AdyenPayment.If the Payment Methods are not showing,please check the iOS / Android logs on whether the API calls to Adyen are working and or any Payment Methods are configured within the Adyen Admin Console.

[zvone00]

Hello,
I tried this on Android, but Android Studio logcat does not show any API calls towards Adyen, which is quite strange. Seems like the initialize method is producing no effect for me.
I am using React Native 0.61.5

[Gp2mv3]

Hi,
I have the same question. I see the return from the API call:

{"groups":[{"name":"Credit Card","types":["mc","visa"]}],"paymentMethods":[{"brands":["mc","visa"],"details":[{"key":"encryptedCardNumber","type":"cardToken"},{"key":"encryptedSecurityCode","type":"cardToken"},{"key":"encryptedExpiryMonth","type":"cardToken"},{"key":"encryptedExpiryYear","type":"cardToken"},{"key":"holderName","optional":true,"type":"text"}],"name":"Carte bancaire","type":"scheme"},{"details":[{"key":"paywithgoogle.token","type":"payWithGoogleToken"}],"name":"Google Pay","supportsRecurring":true,"type":"paywithgoogle"}]}

But the list of payment methods isn't displayed, only the "Card component". I start the payment with the Dropin methos as shown here:

      const response = await AdyenPayment.startPaymentPromise(AdyenPayment.DROPIN, componentData, paymentDetails);
      console.log(response);

How can I display the list of payment methods ?

[mickadoua]

hello,
I have similar issue. With the last version of react-native-adyen-payment (1.6.1) i have only one credit card displayed for a specific client,

To be more clear,
with :

await AdyenPayment.startPaymentPromise(
        AdyenPayment.DROPIN,
       ...

every work fine, i have all my credit card, and other payment mothod displayed

if i use

await AdyenPayment.startPaymentPromise(
        AdyenPayment.SCHEME,
       ...

i have just one credit card displayed

this is fix on the followed PR

Thanks