adyen / adyen-components-js-sample-code Goto Github PK

Hi
We want to send a billing address along with the credit card details. Does this component support billing address or can we extend this to support billing address?

Hello,

Can we have some examples of 3D Secure?

Thank you so much

Hello,

I am using dropin in my web, but I can not paint the response of the /paymentMethods with js.
This is the issue, I have the response in js, likie this:

const paymentMethodsResponse = {'groups':[{'name':'Credit Card','types':['visa','mc','amex','maestro','diners','discover']}],'paymentMethods':[{'brands':['visa','mc','amex','maestro','diners','discover'],'details':[{'key':'encryptedCardNumber','type':'cardToken'},{'key':'encryptedSecurityCode','type':'cardToken'},{'key':'encryptedExpiryMonth','type':'cardToken'},{'key':'encryptedExpiryYear','type':'cardToken'},{'key':'holderName','optional':true,'type':'text'}],'name':'Credit Card','type':'scheme'},{'name':'PayPal','supportsRecurring':true,'type':'paypal'},{'details':[{'key':'sepa.ownerName','type':'text'},{'key':'sepa.ibanNumber','type':'text'}],'name':'SEPA Direct Debit','supportsRecurring':true,'type':'sepadirectdebit'},{'name':'SEPA Bank Transfer','supportsRecurring':true,'type':'bankTransfer_IBAN'}]};

This is my source, you can see that paymentMethosResponse is a JSON, but when checkout in instancied there is nothing in paymentsMethods:

then, I create an instance :

// 1. Create an instance of AdyenCheckout

const checkout = new AdyenCheckout({
locale:'es-ES',
environment: 'test',
originKey: 'my key, // Mandatory. originKey from Costumer Area
paymentMethodsResponse: paymentMethodsResponse

});
And after that , I mount the rest:

// 2. Create and mount the Component
const dropin = checkout.create('dropin').mount('#dropin-container');
// 2. Create and mount the Component
const card = checkout .create('card').mount('#card-container');

But I don´t get draw my payment methods.

What am I doing wrong?

Hey guys,

we are implementing the new drop-in functionality for our website, I just updated the websdk from 3.0 to 3.2 and now either the onChange and also the onValid callbacks which you can pass to a CheckoutConfiguration objects gets called multiple times.

For example, i have a CC form which is beeing shown up for our customers, we are using the onValid callback to send a XHR to our backend with the information from the SecureFields.

It works great but for some reasons it always gets called twice after entering on the of the Test Numbers.

Greetings from Munich,

Explanation

The data model returned by the API is not full working because the property paymentMethods.details does not respect any of the sent parameters.

Example

With the next config we should get 5 inputs one after the other one in a list:

{
  "paymentMethods": [
    {
      "brands": [
        "mc",
        "visa"
      ],
      "details": [
        {
          "key": "number",
          "type": "text"
        },
        {
          "key": "expiryMonth",
          "type": "text"
        },
        {
          "key": "expiryYear",
          "type": "text"
        },
        {
          "key": "cvc",
          "type": "text"
        },
        {
          "key": "holderName",
          "optional": true,
          "type": "text"
        }
      ],
      "name": "Credit Card",
      "type": "scheme"
    }
  ]
}

But we are getting the default configuration of the credit card drop-in (yes styles are different because we overwrite them):

Dear Adyen team,

I read the documentation and the onReady() callback is not called when the component is initialized. Drop in web, thanks!

I'm integrating Momo to my web application. Could you please make an example for it?

Hello,

I am using dropin in my web, but I can not paint the response of the /paymentMethods with js.
This is the issue, I have the response in js, likie this:

const paymentMethodsResponse = "{'groups':[{'name':'Credit Card','types':['visa','mc','amex','maestro','diners','discover']}],'paymentMethods':[{'brands':['visa','mc','amex','maestro','diners','discover'],'details':[{'key':'encryptedCardNumber','type':'cardToken'},{'key':'encryptedSecurityCode','type':'cardToken'},{'key':'encryptedExpiryMonth','type':'cardToken'},{'key':'encryptedExpiryYear','type':'cardToken'},{'key':'holderName','optional':true,'type':'text'}],'name':'Credit Card','type':'scheme'},{'name':'PayPal','supportsRecurring':true,'type':'paypal'},{'details':[{'key':'sepa.ownerName','type':'text'},{'key':'sepa.ibanNumber','type':'text'}],'name':'SEPA Direct Debit','supportsRecurring':true,'type':'sepadirectdebit'},{'name':'SEPA Bank Transfer','supportsRecurring':true,'type':'bankTransfer_IBAN'}]}";

then, I create an instance :

// 1. Create an instance of AdyenCheckout

const checkout = new AdyenCheckout({
locale:'es-ES',
environment: 'test',
originKey: 'my key, // Mandatory. originKey from Costumer Area
paymentMethodsResponse: paymentMethodsResponse

});
And after that , I mount the rest:

// 2. Create and mount the Component
const dropin = checkout.create('dropin').mount('#dropin-container');
// 2. Create and mount the Component
const card = checkout .create('card').mount('#card-container');

But I don´t get draw my payment methods.

What am I doing wrong?

Describe the bug
Hi, I'm using your card component, and when I enter one of your test card numbers, I get "Unsupported card entered" message which causes sometimes to number doesn't get encrypted.
One of numbers that have is causing this issue :
4646 4646 4646 4644

Could you please take a look?

To Reproduce
Steps to reproduce the behavior:

1. Go to Card Component
2. Enter 4646 4646 4646 4644 as card number

Regards,
Josip.

Hi,

I am using dropin in my web, but when i draw my card form, i can´t write number card because the text /* Invalid asset path */ in inside:

Could somebody help me?

Thanks in advantage.

Hi,
when I start application with nodejs I get error Error: Cannot find module './api/clientKeys'
when I start php app, I get error require(api/clientKeys.php): failed to open stream: No such file or directory in /
Could you please investigate?
Regards,
Josip.

Hi!

I have seen that there was an Issue opened for this in the adyen-cse-web repo in 2017, but it was closed as "not an issue".
I am not sure in which repo should I open this, but currently we are developing an application on React Native and we are not sure which implementation should we pick to integrate with Adyen.
I have seen that you provide API Only way, but still it only provides us with either Web components, or native components for Android or iOS.
The problem is that in React Native we cannot use HTML ones. Also for Native ones we have to create some wrappers, as seen in this 3rd party library that is still missing a lot of features and I'm not sure if it's reliable enough.
So the issue is that we don't have good first class support for React Native (which is very popular framework and a lot of people doing apps using it). Is there any plan for Adyen to add support for custom UI elements for React Native to be able to do payments? Or if not, which exact way of implementing it would you recommend assuming neither Web HTML elements nor native components would work out of the box for React Native?

Thank you,
Dmitriy

CODE:

RESULT:

Can you please provide the details of what all the browsers web component support

I set up the dropin with showPayButton: false

But PayPal still shows the yellow button within dropin component.

And if submission is triggered by dropin.submit(), the whole app will crash

Explanation
Credit cards that are not configured in the brands property when using securedfields still pass the validation.

Code example adapted from the card example of this repository:

        .create('securedfields', {
            type: 'card',
            brands: ['mc', 'amex', 'bcmc', 'maestro'],
            styles: {
                error: {
                    color: 'red'
                },
                validated: {
                    color: 'green'
                },
                placeholder: {
                    color: '#d8d8d8'
                }
            },
            ariaLabels: {
                lang: 'en-GB',
                encryptedCardNumber: {
                    label: 'Credit or debit card number field'
                }
            },
            // Events
            onSubmit: (state, component) => {
                if (state.isValid) {
                    makePayment(card.data);
                }
            },

            onError: console.log,

            onChange: (state, component) => {
                console.log('change', state)
                // state.data;
                // state.isValid;
                updateStateContainer(state); // Demo purposes only
            }
        })
        .mount('#card-container');

Describe the bug
Trying to add @adyen/adyen-web to my angular app and following the drop-in guide, but I get an error when initializing the component where it lives.

To Reproduce
Steps to reproduce the behavior:

1. In an Angular app install @ayden/ayden-web: npm i @ayden/ayden-web --save
2. In a component controller file have the following code:

// .component.ts
import AdyenCheckout from '@adyen/adyen-web';
import '@adyen/adyen-web/dist/adyen.css';

...

const configuration = { ... } // valid configuration and apiKey for all I know
const checkout = new AdyenCheckout(this.configuration);
const dropin = checkout
        .create('dropin', { openFirstPaymentMethod: false })
        .mount('#dropin');

3. In the view that belong to the same component have:

<div id="dropin"></div>

4. On page load there is the following error:

ERROR Error: Component could not mount. Root node was not found.
    at e.t.mount (adyen.js:1)

Expected behavior
I would expect the component to mount successfully. I have read on https://docs.adyen.com/online-payments/components-web/ that "If you are using JavaScript frameworks such as Vue or React, make sure that you use references instead of selectors and that you don't re-render the DOM element." and I have tried to target the dom element in other ways, with a @ViewChild angular decorator + # notation in the view for example, but to no success and I didn't find an example or documentation that applies to angular.

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version: latest

Is there documentation for paymentMethodsConfiguration especially the klarna component. The demo has the country greyed out meaning we cant demo test it and also it would be nice to know if we can pre-fill some of the values on dropin initialisation.

this page says nothing about klarna
https://docs.adyen.com/checkout/components-web/#supported-payment-methods

Hi Adyen,

I like working with your Web Components in our project. However, it would help us if we could have the Adyen Checkout JavaScript file and CSS as an NPM-package.

Instead of having to import these on all our pages in our Buy Flow:

An NPM-package would allow us to not import your components on all our parts of our PWA, as well as making it easier for us to be up to date with versions.

Sincerely yours,
Josef

When I try to add a custom text value for the Pay Button using the documentation method for placeholders, the "payButton" value does not seem to take effect. even though every other placeholder values work and the changes show up

Hi,
I am using dropin and i am trying to make a payment with request /payment, but I receive an error, and I dont Know what is wrong. I tried with this two reques

Both ot them have headers:

The response is:

701 Service null not present

Thanks in advance

Describe the bug
We want to be able to detect more than the default amex, visa, mc in our onBrand callback.

Everytime we use a card that's not from one of these 3 providers it's detected as 'card'. For example if we configure our component with a brands array that contains cup (China Union Pay) and we try to use one of the test data cards provided in the Adyen docs the onBrand callback will give us 'card' instead of 'cup' (same for all other card providers, we tested all of them individually).

To Reproduce
Steps to reproduce the behavior:

1. Create a component with the following config:

new AdyenCheckout({
        locale,
        originKey,
        loadingContext: 'https://checkoutshopper-test.adyen.com/checkoutshopper/',
      })
        .create('securedfields', {
          type: 'scheme',
          brands: ['visa', 'cup'],
          onChange,
          onError,
          onBrand,
          onFieldValid,
          styles: {
            base: {
              color: 'black',
              fontSize: '18px',
              background: '#EDEDED',
              padding: '0 20px',
            },
          },
        })

2. Add the onBrand callback as follows:

const onBrand = ({ brand, brandImageUrl }) => {
    console.log(brand, brandImageUrl);
  };

3. Check the browser console for the brand and brandImageUrl when using a 'visa' test card all works as expected.

4. Check the browser console for the brand and brandImageUrl when using a 'cup' test card the brand variable value is 'card' and it should be 'cup'.

Expected behavior
We use any Adyen supported brand card and the onBrand callback returns the correct brand instead of just 'card'.

Desktop (please complete the following information):

• OS: [MacOS X Catalina, Windows 10]
• Browser [chrome, firefox]
• Version [latest version for all browsers]