question

jbbdev avatar image
jbbdev asked jbbdev edited

Clover-hosted iframe Integration

Hi,

I am trying to get the IFrame to work locally. I have tried several of the examples that have been presented in the forum already: https://codepen.io/gareth-dsouza/pen/RwPjBXJ, https://codepen.io/gareth-dsouza/pen/PoPEypO, https://codepen.io/gareth-dsouza/pen/MWKbWwv..


When I run them with my PAKMS key through the codepen environment, all the examples work correctly. However, when I run them locally, they are not working. The below screenshot is an example of what I see locally.

cloverIFrameExample.JPG

As you can see the field text is missing and I don't get the "Secure Payments Powered by Clover" message at the bottom.

I am importing the .js and .css files in my HTML file like this:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <script type="text/javascript" src="/js/cloverIFrame.js"></script>
        <link href="/css/cloverIFrame.css" rel="stylesheet"/>
        <script src="https://checkout.clover.com/sdk.js"></script>
    <title>Testing Clover IFrame</title>
</head>

What is going wrong?


Thanks.

clover developer community
cloveriframeexample.jpg (56.7 KiB)
10 |2000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

2 Answers

·
jbbdev avatar image
jbbdev answered jbbdev edited

The issue was the js file was loading before the DOM was loaded. I put the js file script at the bottom of the HTML file and that resolved the issue. (In my example <script type="text/javascript" src="/js/cloverIFrame.js"></script> needed to be moved to the bottom of the HTML file)

10 |2000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

David Marginian avatar image
David Marginian Deactivated answered jbbdev commented

Hard to tell, you should check your browser's ebug console to see what isn't loading, etc.

6 comments
10 |2000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

jbbdev avatar image jbbdev commented · 


DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

sdk.js:1 Uncaught TypeError: Cannot read property 'appendChild' of null
    at e.elements (sdk.js:1)
    at cloverIFrame.js:2
e.elements @ sdk.js:1
(anonymous) @ cloverIFrame.js:2

DevTools failed to load source map: Could not load content for https://checkout.clover.com/sdk.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
0 Likes 0 ·
jbbdev avatar image jbbdev jbbdev commented ·
This is what I see in my debug console on Chrome.
0 Likes 0 ·
David Marginian avatar image David Marginian ♦♦ jbbdev commented ·

I would suggest you go through our docs - https://docs.clover.com/docs/using-the-clover-hosted-iframe.. Check the network tab in the debug console and then verify what is not loading and fix the links.

0 Likes 0 ·
Show more comments

Write an Answer

Hint: Notify or tag a user in this post by typing @username.

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Welcome to the
Clover Developer Community