adyen / adyen-web-sdk-sample-code Goto Github PK

In a project I'm working on, we need to be able to grab the fees the customer's payment method will incur BEFORE they pay.

For example, if they select PaySafeCard and the amount they need to pay is $20, they select PaySafeCard and the price will update on the button on the form before they click it as $22.52 (.12 + 12%)

Or if they click Credit Card and enter in an AMEX, it will update to $20.91.

I was wondering if this is possible? I did notice you guys have the “Cost Estimation API” but doesn't seem like there is anyway to use that with the Web SDK.

If not, what is the best way for me to handle this while still using the Web SDK?

Any help is appreciated.

Hey there,

Sorry to ask this here since I know this is reserved for issues regarding the repo, but I tried contacting general Adyen support and they were pretty unhelpful so hopefully some of the maintainers of this could answer this for me.

Can we expect an NPM package(s) of the checkout SDK? You have an NPM package for the CSE and I think one for the checkout SDK would also be pretty cool.

As someone who uses libraries like Vue and React, it's pretty annoying to have to just hardcode the sdk into a html file, and I think an NPM package would benefit in a lot of way such as;

• Easier updating. Instead of checking release notes on the Adyen website and changing the version number on the URL, the NPM version will just get updated.
• Easier implementation. We can use ES6 import statements and such rather than straight up hardcoding the script tag into a HTML file.

Hopefully you guys will consider this since I think it makes a lot of sense and will make a lot of developers lives a lot easier.

Another couple of questions I have that are unrelated are;

• Since you have the CSE as an NPM package, is it possible currently for me to use the checkout SDK and indicate I want to use the CSE locally rather than from Adyen servers? I've had some minor connection issues in the past with the CSE hosted on Adyen and think it will be more reliable if I host it myself.
• I'm using the Checkout SDK in the context of a REST API, and was wondering what the "official" way of implementation was? I've pretty much been following the docs here; (https://docs.adyen.com/developers/checkout/web-sdk) but wanted to ensure I'm doing everything securely and correctly.

I've got a payment endpoint that the client communicates with that on the server will call paymentSession and will do all the required stuff such as make an order number, grab pricing from database, etc... Then it returns the session to the client.

Then after payment is made I have a verify endpoint that takes the payload and checks and ensures it was successful and such.

Hopefully you can help. Thanks.

To check if it is https, $_SERVER['SERVER_PROTOCOL'] is used.
On my server (Apache, PHP7.2) this will return HTTP/2.0 even if I am using https.

Config.php Line 35.

I think, this should be:

$protocol = stripos($_SERVER['REQUEST_SCHEME'], 'https') !== false ? 'https' : 'http';

or

$protocol = $_SERVER['HTTPS'] === 'on' ? 'https' : 'http';

But will definitively not work with $_SERVER['SERVER_PROTOCOL']

• In setupCall.js on line 5 there's a link to the adyen docs that results in a 404: https://docs.adyen.com/developers/checkout-javascript-sdk/styling-secured-fields
• In index.php in line 42: https://docs.adyen.com/support/getting-started/step-1-create-a-test-account

Versions tested: 1.0.0 & 1.1.2

Error:

checkoutSDK.1.0.min.js:843 ERROR: Can not find a node to attach Checkout to.
Please pass in a valid selector for an HTML node to hold the checkout elements e.g. checkout.chckt(JSON_RECEIVED_FROM_SETUP_CALL, '#checkout-div')

Note: Error is not display in version 1.1.2.

How to reproduce

URL: http://cvk.muehl.io/pay/N7URGCGB
Pick "Credit Card", agree to T&S, and click "Pay now"

CheckoutSDK complains that the <div> doesn't exist, although it does inject HTML inside of it:

I extracted the DomUtils used internally to check it, and it does find the div without troubles:

Relevant code snippets

Inside body:

<html>
<body>
...
<div class="content">
    <div class="checkout-container">
        <div class="checkout">
            <!-- The checkout interface will be rendered here -->
        </div>
    </div>
</div>

....

<script>
    $(function() {
        chckt.checkout(adyenData, '.checkout', {
                base: {
                    fontSize: '16px'
                }
           });
     });
</script>
...

Other JS libraries used

• UIKit
• jQuery
• VueJS
• libphonenumberJS
• parsley
• Google Maps
• Google Analytics
• pickmeup
• Raven
• Smyfony2 Profiler
• player

Also feel free to inspect the HTML source

Poking around at your web server, I'm confused which version should be used. The demo code uses version 1.0.0, yet you also serve a version 1.1.0. I did not find this mentioned in any documentation. Can you publish a change-log and offer versioning information?

Whats the difference between the following?

• https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSDK.1.0.min.js
• https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSDK.1.0.0.min.js
• https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSDK.1.1.0.min.js
• https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSDK.1.1.1.min.js
• https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSDK.1.1.2.min.js

I'm getting this HTTP ERROR 500 when accessing index.php

Server log shows the config.php as the cause:

PHP message: PHP Fatal error: Can't use function return value in write context in /lib/Config.php on line 32

I tried accessing the page on both http and https.

I'm sorry for asking this. But it's not obvious.

Somehow I've two accounts one with mynameCOM and myname.

Nonetheless, if I'm looking for the checkoutAPIkey there is none to be found:

Yes, I see the "Checkout Demo Server API Key (x-demo-server-api-key)" but I think that should be not the key. Above it, I see the API Key but come on. It just does not say anywhere checkoutAPIkey. API Key refers to Payment token. So my guess is that I should generate the key and it should be called Payment Token API Key?

Then comes the other question. What is my merchantAccount? Just try to google it, you won't find anything to it... Do you mean perhaps Merchant Name? Or Adyen Account? There are some differences. The first would be "my name" the second would be "myname".

I can only tap into the darkness and I added the Payment Token API Key as checkoutAPIkey, and "myname" as Merchant Name.

But still the code explodes and I get the errors:

checkoutSDK.1.3.0.min.js:3 ERROR: ### parseSetupJSON::init:: e= SyntaxError: Unexpected token u in JSON at position 0

Uncaught Error: The JSON passed to chckt.checkout was not properly formatted as JSON (typeof data: undefined, data was not JSON)

Failed to load resource: the server responded with a status of 404 (Not Found)

That really baffles me, you want to earn money but why do you throw these simple obstacles so one cannot even see the demo of the payment system....

Hi everyone,

I've downloaded and set up the adyen-web-sdk-sample here, means I've created the authentication.ini file with my data from adyen.

When I start the demo in Firefox the page stays blank and the console shows the following error messages:
ERROR: ### parseSetupJSON::init:: e= SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data"
at https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSDK.1.3.0.min.js:3:88715
################################################
Error: The JSON passed to chckt.checkout was not properly formatted as JSON (typeof data: undefined, data was not JSON) at checkoutSDK.1.3.0.min.js:3:89096

I've tried to see what initiateCheckout() is receiving and the param jsonResponse is "undefined" in console.
Also I've echoed $paymentSessionData in index.php and it shows the following message:

""{"error":{"code":403,"message":"Forbidden","requested URI":"\/checkout\/\/services\/PaymentSetupAndVerification\/v37\/paymentSession"}}" "

Can please anybody tell me what I'm doing wrong here?

Thank you!!
Regards

Alex

In payment/order.php:44 the code is passing en-US.

According to the documentation the correct format uses an underscore en_US.

Hello

I would like to ask if there is a way to disable the logs in live context in the live WebSDK.

### checkoutMain::setFocus:: holderDiv=  checkoutSDK.1.9.2.min.js:15
...

I don't want the logs to pollute the console of my users

I have a problem with calling $.ajax in beforeComplete hook.

I cloned this repository, set credentials in authentication.ini and ran the project. Everything goes OK except beforeComplete hook. I see a form with credit card fields, I am able to fill it and send it.
In beforeComplete hook in paymentData variable are resultCode:"authorised" and resultText:"Payment Successful".

But line with calling $.ajax causes this error (catched on line 1313 in "unminifed" version):

TypeError: Cannot read property '__checkoutUI' of undefined
    at init (https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSDK.1.2.3.js:5251:52)
    at e (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:4:7727)
    at Ab (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:4:7608)
    at Ab (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:4:7631)
    at Ab (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:4:7631)
    at Ab (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:4:7631)
    at Ab (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:4:7631)
    at Ab (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:4:7631)
    at Ab (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:4:7631)
    at Function.r.param (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:4:7918)

Could you please let me know how we can use this skin and how to integrate in the application? Is there any sample code on using CSE for local payment methods? Please help me on this

Hello, trying to implement adyen checkout via paymentSession. I am able to see the form with card inputs, but when I fill it up I can see error after finishing each input (typing last character of input).

Any ideas what can be wrong?

versions

Using react with nextjs.

In api/serverCall.php:55 the sample code passes a parameter named "shopperIP" to Adyen.

This parameter is not part of the API spec in the developers documentation

Hi,

Just wanna ask if how can I customized the displayed payment methods. Was trying to allow credit card only but having some error that I cant seems to find a solution.

This is my initialization and customization on the form

then I encounter this error and the form is not displaying

With out customization this is my default

wanted to remove the online banking, convenience store and the more link

Thank you in advance :)

Hi Team,

I am using Web SDK checkout in our application to integrate Cards and Alipay(Local payment methods). I am calling https://checkout-test.adyen.com/services/PaymentSetupAndVerification/v32/setup to get the html and response is binding to the

On Chrome pressing Tab when focused on an input field it automatically focuses on the next input field. However, on Firefox it seems to put its focus first on the iframe itself, and only after pressing tab a second time it focuses on the field inside of it.

This is likely related to the use of contentWindow, whereas Firefox expects contentDocument as described in this StackOverflow top answer: https://stackoverflow.com/questions/14377219/focus-in-an-iframe-in-firefox