Giter VIP home page Giter VIP logo

Comments (5)

riftshadow avatar riftshadow commented on June 19, 2024 1

Hey @marcperez,
it seems like i had a typo in the AdyenCheckout config object (paymentMethodResponse -> paymentMethodsResponse).
It works now, thanks for your support

from adyen-web.

marcperez avatar marcperez commented on June 19, 2024

Hi @Stormtroop,

Thanks for reaching. I think the reason why you're seeing this error is you're not providing the /paymentMethods response to the client library. We use that response to find those redirect payment methods (among other things).
You can see how this should be provided in our web components integration guide.

The contents of the NPM package are the same to the ones from the files served from our servers, but if you prefer, you can still use our library through a <script> tag as explained in the Step 2 of our web components documentation.

Hope this helps! If you have any further questions on our integrations, please contact our support team.

from adyen-web.

riftshadow avatar riftshadow commented on June 19, 2024

Hey @marcperez ,

no, im passing the /paymentMethods response to the client library when creating the AdyenCheckout object.
The Problem is that the error is thrown only for the two payment methods when trying to mount them,
for paypal and cc it works, also the /paymentMethods response contains both payment methods (paysafecard & directEbanking).

/paymentMethods response

{
  "groups": [
    {
      "name": "Credit Card",
      "types": [
        "visa",
        "mc",
        "amex",
        "maestro",
        "cup",
        "diners",
        "discover"
      ]
    }
  ],
  "paymentMethods": [
    {
      "type": "paypal",
      "name": "PayPal",
      "supportsRecurring": true
    },
    {
      "type": "scheme",
      "name": "Credit Card",
      "supportsRecurring": false,
      "details": [
        {
          "key": "encryptedCardNumber",
          "type": "cardToken"
        },
        {
          "key": "encryptedSecurityCode",
          "type": "cardToken"
        },
        {
          "key": "encryptedExpiryMonth",
          "type": "cardToken"
        },
        {
          "key": "encryptedExpiryYear",
          "type": "cardToken"
        },
        {
          "key": "holderName",
          "type": "text"
        }
      ]
    },
    {
      "type": "directEbanking",
      "name": "Online bank transfer.",
      "supportsRecurring": true
    },
    {
      "type": "sepadirectdebit",
      "name": "SEPA Direct Debit",
      "supportsRecurring": true,
      "details": [
        {
          "key": "sepa.ownerName",
          "type": "text"
        },
        {
          "key": "sepa.ibanNumber",
          "type": "text"
        }
      ]
    },
    {
      "type": "paysafecard",
      "name": "Paysafecard",
      "supportsRecurring": true
    },
    {
      "type": "giropay",
      "name": "GiroPay",
      "supportsRecurring": true
    },
    {
      "type": "unionpay",
      "name": "UnionPay",
      "supportsRecurring": true
    }
  ]
}

example:

const checkout = new AdyenCheckout({
countryCode: 'DE',
paymentMethodResponse: response,
enviroment: 'test',
clientKey: '....',
amount: {
currency: 'EUR',
value: 1000
},
onSubmit: () => {},
paymentMethodsConfiguration: {}
});
checkout.create('directEbanking`).mount('#container'); <-- doesnt work for paysafecard and directEbanking

from adyen-web.

marcperez avatar marcperez commented on June 19, 2024

Could you confirm the format of the response variable? It should be an object, can you make sure it's not a string?

You could also try this, to discard any other formatting issue on that response:

paymentMethodsResponse: {
    paymentMethods: [
        {
            type: 'directEbanking',
            name: 'Online bank transfer.',
            supportsRecurring: true
        }
    ]
},

from adyen-web.

marcperez avatar marcperez commented on June 19, 2024

Happy it's solved @Stormtroop! Cheers!

from adyen-web.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.