question

juggernautsei avatar image
juggernautsei asked bryanvargas commented

IFRAME PHP 8.0 Bootstrap 4 - SDK error in console

Hi,

I am working on the iFrame experience.

https://docs.clover.com/docs/using-the-clover-hosted-iframe#set-up-the-payment-form

On the above page, I copied all of the code and put it into my paymentPage.php file.

The console log is showing these errors.

Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
at e.elements (sdk.js:1:19142)
at patientPaymentPage.php:29:33


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






Clover Android SDKPaymentConnectordeveloper webinar
1 comment
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.

bryanvargas avatar image bryanvargas ♦♦ commented ·

Have you watched our step by step tutorial video on setting up the iframe:


https://docs.clover.com/docs/using-the-clover-hosted-iframe#learn-more-about-using-clover-hosted-iframe-with-ecommerce-apis


0 Likes 0 ·

3 Answers

·
juggernautsei avatar image
juggernautsei answered

Yes, I have watched the video. I you look at the repo that is being used clover/DA-DevRel_Sample_Apps . It is a private repo. So that is no help.

1692674681124.png

https://youtu.be/256rQaR0cPQ?t=77


1692674681124.png (131.3 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.

juggernautsei avatar image
juggernautsei answered bryanvargas commented

It looks like development is out pacing documentation.

I found this repo https://github.com/clover/Clover-Developer-Workbench/tree/main/Clover_iframe_3dp

But the documentation points to the same outdated video that shows the private repo.

I am using a hosted server on AWS not a local machine. All of the demos show a localhost situation which I rarely use. I don't need to run a web server on port 8080 or anything like that. Could you point me to documentation that shows how to consume the above sample code.


11 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.

bryanvargas avatar image bryanvargas ♦♦ commented ·
The repro is pretty much using the same code in docs. Can you post your code logic and remove any personal keys(PAKMS, accessToken)
0 Likes 0 ·
juggernautsei avatar image juggernautsei bryanvargas ♦♦ commented ·

I am assuming this part will do?


1692738876369.png




0 Likes 0 ·
1692738876369.png (124.4 KiB)
parquet76 avatar image parquet76 juggernautsei commented ·
Please see the other post. Source should be a tokenized card. If you are trying to pay with an alternate tender, you need to have things configured properly. It isn't clear what you are trying to do so please let us know. I would suggest that you get the flow working in postman/curl then writing the code is simple.
0 Likes 0 ·
Show more comments
parquet76 avatar image
parquet76 answered parquet76 edited

Here is an old iframe example: https://codepen.io/gareth-dsouza/pen/RwPjBXJ. Get this working with your API key, then convert it into PHP, although you don't need php for this page.

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.

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