Issue making multiple payments

[bhekor]

I have two pages page1 and page2, after making payment on the first one and I go to the next page2 I got this error and the paymentCompleted function wasn't called

<button
    angular-Monnify
    [monnifyOptions]="options"
    (paymentInit)="paymentInit()"
    (close)="paymentCancel()"
    (onComplete)="paymentCompleted($event)"
  >
    Pay with Monnify
</button>

By the way, I'm using it with Ionic and I wasn't able to install it so I had to download the code locally.

core.mjs:10132  ERROR DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at https://sdk.monnify.com/plugin/monnify.js:1:8863
    at _ZoneDelegate.invokeTask (http://localhost:8100/polyfills.js:8216:171)
    at http://localhost:8100/vendor.js:55319:49
    at AsyncStackTaggingZoneSpec.onInvokeTask (http://localhost:8100/vendor.js:55319:30)
    at _ZoneDelegate.invokeTask (http://localhost:8100/polyfills.js:8216:54)
    at Object.onInvokeTask (http://localhost:8100/vendor.js:55621:25)
    at _ZoneDelegate.invokeTask (http://localhost:8100/polyfills.js:8216:54)
    at Zone.runTask (http://localhost:8100/polyfills.js:8018:37)
    at ZoneTask.invokeTask [as invoke] (http://localhost:8100/polyfills.js:8293:26)
    at invokeTask (http://localhost:8100/polyfills.js:9419:12)

[Dansteve]

Thanks for this, and sorry it sat unanswered for so long. I dug into it while preparing v2.0.0 / v2.0.1, and I can explain exactly what you hit. There were two separate bugs in your snippet.

1. Why paymentCompleted was never called

This is not your code — it's an ordering bug inside Monnify's own monnify.js. The success branch reads:

e.type === MESSAGE_TYPE.TRANSACTION_SUCCESS ? (
  window.document.body.removeChild(window.conatiner),   // <-- runs FIRST, throws here
  n.onComplete(t),                                      // <-- never reached
  n.onClose(t),
  ...
)

removeChild is called before onComplete. So when it throws your DOMException, onComplete never runs — which is precisely the symptom you described.

Why does removeChild throw on the second page? The SDK keeps a single global (window.conatiner, their typo, not mine) and guards creation with:

if (!document.querySelector("#monnify_app_wrapper")) { /* create + assign window.conatiner */ }

When you navigate page1 → page2, Angular tears down the view, but the SDK's global still points at the old node. On the second payment the guard sees a stale #monnify_app_wrapper, skips re-creating it, and window.conatiner is left pointing at a node that is no longer a child of body. removeChild then throws.

2. (close) has never existed

(close)="paymentCancel()"

There is no close output on the directive — it is (onClose). I checked with git log -S across the full history: close was never an output. The old README documented it incorrectly, and the bundled demo app used (onclose) lowercase, which also never fired. That's our fault, and both are fixed in the v2.0.0 docs.

What v2.0.x changes

• isPaying is now reset. It was set true on the first payment and never cleared, so the second and every later click silently did nothing. This is likely the other half of what you were seeing.
• The container lifecycle is cleaned up between payments, which avoids the stale-node state that triggers the removeChild throw.
• (onClose) and (onComplete) are documented correctly, and the demo app's lowercase (onclose) is fixed.

On installing it

I wasn't able to install it so I had to download the code locally

That was a real packaging bug: ng-packagr was declared as a peerDependency, so installing the library demanded a build tool. It's removed in 2.0.0, and the package now ships modern Ivy output (fesm2022 + exports map) instead of the old View Engine layout that Angular 13+ rejects. npm i angular-monnify@latest should just work now — it needs Angular 16+.

Could you retest?

I'm leaving this open rather than closing it, because the underlying removeChild ordering lives in Monnify's SDK and I can't patch that from here — I can only avoid provoking it. If you still see the DOMException on 2.0.1 with (onClose) spelled correctly, please comment and I'll take it further, ideally upstream to Monnify.