Trying to do a simple initial working example of Adyen Drop-in functionality.
I'm using package "#adyen/adyen-web" version 5.2.0 in a React app. (see code attached)
My backend API is built in .Net5 calling Adyen to create a session and returning id and sessionData correctly to frontend presented in "paymentSession".
Bu when code reaches the part checkout.create('dropin').mount(adyenElementRef.current) it fails with error in browser console: "Cannot read properties of null (reading 'dropin')".
I have no idea of why, and I followed the exact documentation on https://docs.adyen.com/online-payments/web-drop-in
UPDATE:
I downgraded to version 4.1.0 and got it all to work by just changed to this code:
const checkout = new AdyenCheckout(adyenConfig)
// Create an instance of Drop-in and mount it to the container you created.
const dropinComponent = checkout.create('dropin').mount(adyenElementRef.current)
So something weird with latest version and the Promise-implementation?
I can't really reproduce your example exactly, but I see in your comment that version 4.x seems to be working.
With version 5.0, the creation of AdyenCheckout is now asynchronous. Can you make sure this is not the source of the issue?
//version 4
const checkout = await AdyenCheckout(configuration);
// version 5
const checkout = AdyenCheckout(configuration);
See the release notes.
I recommend using the latest version of the integration if you are integrating today, it has quite a few new goodies.
Related
I am building an Electron app featuring a custom Notification feature where html5 divs appear and disappear as needed on a frameless, transparent, always-on-top window.
It works great, but: I still like the Windows notification center itself, and would like to have the option to see the past notifications there, without actually displaying them on screen with the HTML5 api.
I have tried:
Looking into the HTML5 api for an option to not show a notification, or to .hide() it right away: no luck. The only method that comes close is .close(), and it removes the notification from the center as well.
Looking into packages like node-notifier, but none of the used notification dependencies offer a way to completely hide a notification.
While I mentioned Node, I will also accept any lower-level API/binding that would allow me to do this.
Thanks in advance.
With the help of #treckstar in comments, I have found a way to do what I wanted using:
NodeRT
The ToastNotification.SuppressPopup attribute
Despite a handful of troubles building NodeRT and using electron-rebuild, here's a working PoC:
const { XmlDocument } = require('#nodert-win10-rs4/windows.data.xml.dom');
const {
ToastNotification,
ToastNotificationManager
} = require('#nodert-win10-rs4/windows.ui.notifications');
const localImage = path.join(__dirname, 'icon.png');
const template = `
<toast launch="app-defined-string">
<visual>
<binding template="ToastGeneric">
<image id="1" placement="appLogoOverride" hint-crop="circle" src="${localImage}"/>
</binding>
</visual>
</toast>
`;
const xml = new XmlDocument();
xml.loadXml(template);
const toast = new ToastNotification(xml);
const notifier = ToastNotificationManager.createToastNotifier("com.myapp.testnotif");
toast.suppressPopup = true;
notifier.show(toast);
May this help whoever comes across the same highly-specific problem.
In addition to what #MadWard shows in the PoC, the suppressPopup key is really the main player of the solution.
As I was going through tons of examples and electron code I kept hitting roadblocks due to random SDK versions and libraries of things I had installed. For example, the package electron-windows-notifications, which uses NodeRT was failing to load my preload.js because the Windows 10 SDK I had installed (build 15063) needed nodert-win10-cu instead of what was being used in most solutions by default nodert-wind10-au.
SDK
Known As
Windows Version
npm Scope
Windows 10, Build 17134
April 2018 Update (Redstone 4)
1803
npmjs.com/org/nodert-win10-rs4
Windows 10, Build 16299
Fall Creators Update (Redstone 3)
1709
npmjs.com/org/nodert-win10-rs3
Windows 10, Build 15063
Creators Update (Redstone 2)
1703
npmjs.com/org/nodert-win10-cu
Windows 10, Build 14393
Anniversary Update (Redstone 1)
1607
npmjs.com/org/nodert-win10-au
Windows 10, Build 10586
Threshold 2
1511
npmjs.com/~nodert-win10
EDIT: I forgot to include the more specific steps I took getting electron-windows-notifications dependency files on this GitHub issue here. Basically everything from Python, broken node-gyp, and missing .winmd files.
Lastly Electron 14+ and NodeRT have an issue where you will need to make sure to have app.allowRendererProcessReuse = false and like the readme file says, to make sure this is running in the main.js file.
Hopefully this helps someone along the way, as I had never used Electron before until today and had learned a ton thanks to other peoples help.
I'm having trouble using heatmap.js with Angular 8.
It works fine while serving it live, but I get the following error when I run the production build:
ERROR TypeError: "setting getter-only property "data""
on my component
import * as h337 from 'heatmap.js';
.
.
.
heatmap() {
...
const heatmap = h337.create(options);
const datos = {
max: this.max,
min: this.min,
data: data
};
heatmap.setData(datos);
...
}
I had similar problem and then when I updated angular from 8.0 to 8.2 neither the serving worked. As it turned out there is a problem with the img.data being explicitly set (search for the error you will find more details).
There is an already opened issue at https://github.com/pa7/heatmap.js but it seems that the latest merge in the project was 3 years ago and it is not that active.
So either you fix the bug yourself (in your forked version of the repo) or you use an already forked repo.
I did the second and it seems to work fine. The only thing you need to do is replace the heatmap.js dependency in your package.json.
npm install --save https://github.com/ionata/heatmap.js.git
so at the end your package.json will have this entry:
"heatmap.js": "git+https://github.com/ionata/heatmap.js.git"
I have a PWA built with Angular 6 and the #angular/pwa npm package and authenticating using adal-angular4 npm package (but could just rebuild that from scratch if needed -- the issue isn't a bug in the package I think)
When attempting to authenticate, although it does work, users are very often greeted with this message of not found (screenshot of console but its the same).
This especially seems to be the case if you are already authenticated to another (or itself) Azure AD product. Where it normally should only load for a while and then let the user in.
Service worker error transcript:
Failed to load 'link.com/#LONGTOKEN' A serviceWorker passed a promise
to FetchEvent.respondWith() that rejected with 'Error: Response not Ok
(fetchAndCacheOnce): request for LINK.com/index.html returned response 404 Not Found'.
It seems that writing a function to check for new version of the PWA has cleaned up everything. Because it's a PWA, when replacing files with a new version -- the cache will still be there and shift+reloading won't necessarily clear it, causing a lot of unwanted behaviour.
The code for the cleanup looks like this:
First, inject in the constructor the following: updates: SwUpdate
import { SwUpdate } from "#angular/service-worker"
Then, inside ngOnInit, I have the following:
updates.available.subscribe(event => {
updates.activateUpdate().then(() => document.location.reload());
})
It will force a complete refresh 2-3 seconds in if there's a new version available but all works well afterwards.
I have a problem with firebase, it read data using 'once', but it shows me Uncaught Error: Query.once failed: Was called with 1 argument. Expects at least 2 on Firefox console and Google Chrome, but the source code on JS Bin there's no error.
I got the code from here : https://stackoverflow.com/a/35526844/6780268
I copy the code in bracket, i try 2 different firebase.js, but still show me nothing.
var ref = new Firebase('https://stackoverflow.firebaseio.com/35526205');
ref.child('Highscore').once('value').then(function(snapshot) {
console.log(snapshot.val());
});
Is this normal? And how to fix this problem?
Sorry for my bad english.
You're likely using a different/newer version of Firebase than the one in the jsbin in the link.
In newer versions of Firebase, you get a reference to the same database location with:
firebase.initializeApp({ databaseURL: "https://stackoverflow.firebaseio.com" });
var ref = firebase.database().ref("35526205");
I recommend reading the Firebase documentation, the migration guide, and the web codelab.
I am breaking my head today why after upgrading to latest servicestack and servicestack.razor my routing in web services stops working. So I did the following test.
created a new empty web project in vs.net 2012
added web.config file from rockstar
added servicestack and razor through nuget
added apphost and global.asa
in my configure() i did not add anything - no plugins.
added a simple echoservice with route specified
at this point point all works fine, i click the routed url and get my echo result back
added the line to config to add RazorFormat plugin
Now the route does not work, I am getting 404 (file not found) after return from the service with echo data. I can create a view for that service and then all fine, but what happened to default display?
Thanks
Mark
I tried to do the same with servicestack out of the box example and get the same result
Took a sample from servicestack – RootPath40 + Common and included them in separate solution
Compiled and it works
Current version of servicestack used by example is 3.9.11.0
Ran the following to update servicestack and install razor on both projects in the solution
so i get latest 3.9.45
install-package servicestack
install-package servicestack.razor
Tested – works fine!!!. I am testing specifically Hello service using the route Hello ->
localhost/RootPath40/hello
Added 1 line to Global.asax.cs – Configure function
public override void Configure(Container container)
{
container.Register(new TodoRepository());
**Plugins.Add(new RazorFormat());**
}
Now the route hello do not work anymore because I get error 404 not found.
I am using vs.net 2012 and windows 8
I am sure I am missing something very trivial, anyone knows...
Thanks
After struggling a little more I see that if I add reference to System.Web.Razor.Unofficial.dll then razor pages are served but routed web services stop working, the minute I remove the reference the web service routing urls are fine but razor pages are not served.
What am I missing?
Finally i figured out the problem.
The new version of servicestack (3.9.45.0) appears to have a bug in IF condition.
In HtmlFormat.cs
public void SerializeToStream(IRequestContext requestContext, object response, IHttpResponse httpRes)
{
var httpReq = requestContext.Get<IHttpRequest>();
if (httpReq != null && AppHost.ViewEngines.Any(x => x.ProcessRequest(httpReq, httpRes, response))) return;
...
...
The "NOT" ! (exclamation mark) is missing, but it should only return if none of the ViewEngines executed request. I added the NOT and walla, all works.
if (httpReq != null && **!**AppHost.ViewEngines.Any(x => x.ProcessRequest(httpReq, httpRes, response))) return;
Thanks
Mark
This was a bug with the new Razor support that was identified in this issue and fixed in v3.9.46+ of ServiceStack.Razor.