Paypal Embed Code disappearing from landing page

[Pagenoi]

While building out a new landing page we needed to add a link to a payment button from PayPal. I have the embed code and have tried using it in a few different ways, first as basic source code in a Rich Text Module but when that didn't work I created it as it's own unique Module. The preview of the model looks fine as you can see below:

Looks fine as a Module

Anytime that I try to add it to a page however it shows up for a brief few seconds before disappearing again. You can see this on the preview of the page directly under the text the buttons will flash when the page is loaded but then disappear.  https://www.realmanage.com/vendor-services-application-4?hs_preview=LKMzTAWF-49710418523

Any thoughts are greatly appreciated.

[Pagenoi]

I have tried implimenting those solutions in every way that I am possibly able to but they still don't seem to work. The problem is that I can get the buttons to show up on numerous other pages without any problem, just not this specific template page. I specifically chose this template page because it has no JS and limited CSS so I didn't think I would run into any interference. 

The embed code I am using is below:

<div id="smart-button-container">
<div style="text-align: center;">
<div id="paypal-button-container">
</div>
</div>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD" data-sdk-integration-source="button-factory">
</script>
<script> function initPayPalButton() {
paypal.Buttons({ style: { shape: 'pill', color: 'silver', layout: 'vertical', label: 'pay', },
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{"description":"Vendor Compliance Administration Fee","amount":{"currency_code":"USD","value":175}}] }); },
onApprove: function(data, actions) { return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!'); }); }, onError: function(err) {
console.log(err); } }).render('#paypal-button-container'); } initPayPalButton();
</script>

[miljkovicmisa · Accepted solution]

Hi @Pagenoi , thanks for sharing your implementation, though it seems like the issue is resolved now, would you mind sharing what was the fix? Did you find the solution in the link I posted or was it something else?

[Pagenoi]

I'm still not entirely sure what was conflicting but after testing a few different solutions I realized there was something in the footer causing the issue. I rebuilt the footer using just plain text & HTML which looked similar to the previous footer but wasn't driven by the main CSS.

[miljkovicmisa]

Hello @Pagenoi , after taking a look at your website I noticed an error that the javascript console outputs :

Uncaught Error: Detected container element removed from DOM

This error seems to be related to the proper rendering of the element on the page, further investigation pointed me to this related issue in the repository of the paypal integration, seems to be a bug in the code. 

There are some answers in there that should help you overcome this issue, i'm particulary fond of this one.
Should you need further help, in order to provide it, it would be helpful to share your code implementation so I could take a closer look to what's happenning.

If you found my answer helpful and your issue is resolved mark it as a solution.