Credit Card fields do not appear in Safari and Firefox

[G.W.Green]

If you are seeing an issue with Safari (specifically Safari 18.4.1 or higher) or Firefox where the credit card fields for Sellerdeck Pay do not appear, or you receive error messages such as '[object Object]' or 'window.HostedFields is undefined', then this is most likely outdated Javascript libraries online.

Both of these issues have been resolved in later versions of the software.

If however you are using v16.1.3, v18.2.2, v18.2.3 or v18.2.4, then the older versions of the library files are used.

This can be resolved by upgrading to the latest version of the software, or if you are not quite ready to upgrade then following the procedure below will resolve the issue.

Versions 18.2.3 and 18.2.4

Please go to ‘Design | Library | Layouts’ and scroll down to the group ‘Javascript Header Functions’ and expand it.

Open the layout ‘ClearAccept JS Libraries’ and replace the entire contents with the following code: -

<script>
var g_bClearAcceptCart = false;
var g_bClearAcceptWallet = false;
var g_bValidateCart = false;
</script>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsClearAcceptEnabled%22%20%2f%3e">
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsClearAcceptInTestMode%22%20%2f%3e%20%3d%3d%20true%20AND%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Checkout%20Page%202%22" >
<script defer src="https://sandbox-scripts.clearaccept.systems/hostedfields.1.33.4.js"
integrity="sha512-XFcPq6RP0mIXPhXNgHXYDS4y8ymYC2T49YLgIl9TkTEtIOwmyGv5Z31xKY2ADuM7gvRJC10kEnxwumaHO3U2pw=="
crossorigin="anonymous" >
</script>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsClearAcceptInTestMode%22%20%2f%3e%20%3d%3d%20false%20AND%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Checkout%20Page%202%22" >
<script defer src="https://scripts.clearaccept.com/hostedfields.1.33.4.js"
integrity="sha512-KVlqjisSDM35QnqyMKSt6Z1kbpuPhO3ssDYJrAzNdf8sDwjT+k+fdtc8D7rYQWOQ0uAiKSM5/J3zC88ncaD/tA=="
crossorigin="anonymous" >
</script>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsClearAcceptWalletsEnabled%22%20%2f%3e%20AND%20%28%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Shopping%20Cart%22%20OR%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Checkout%20Page%200%22%20OR%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Checkout%20Page%202%22%29">
<script>
var g_bClearAcceptWallet = true;
</script>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsClearAcceptInTestMode%22%20%2f%3e%20%3d%3d%20true" >
<script defer src="https://sandbox-scripts.clearaccept.systems/components.1.0.14.js"
integrity="sha512-6bLg+K5Sf+kH/rtXjqUfY5MtzFJl0JqsrotFcKafujYvYu1P1v300F9vc5aI5oLvj3i8WyMTCLJBQ5IOnbhsdg=="
crossorigin="anonymous">
</script>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsClearAcceptInTestMode%22%20%2f%3e%20%3d%3d%20false" >
<script defer src="https://scripts.clearaccept.com/components.1.0.14.js"
integrity="sha512-j92IUlGGG8SK2RpdPwP6RNYmAWIp4OHj5D0N2gg+ibkGD8Bm7M71cB4r/LCojnn/XID/3ElYKDc4UTz5xEhBEQ=="
crossorigin="anonymous" >
</script>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Shopping%20Cart%22%20OR%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Checkout%20Page%200%22" >
<script>
g_bClearAcceptCart = true;
</script>
</actinic:block>
</actinic:block>
</actinic:block>

Click ‘OK’ to save the layout and close the library.

After replacing the content of the layout, publish to web and test the payments with Safari 18.4.1 or higher.

Versions v16.1.3 and 18.2.2

Please go to ‘Design | Library | Layouts’ and scroll down to the group ‘Javascript Header Functions’ and expand it.

Open the layout ‘Standard Javascript Header Functions’ and search for the following code: -

<script src="https://sandbox-hosted.clearaccept.systems/fields/v1"></script>

Replace this code, with the following: -

<script defer src="https://sandbox-scripts.clearaccept.systems/hostedfields.1.33.4.js"
integrity="sha512-XFcPq6RP0mIXPhXNgHXYDS4y8ymYC2T49YLgIl9TkTEtIOwmyGv5Z31xKY2ADuM7gvRJC10kEnxwumaHO3U2pw=="
crossorigin="anonymous" >
</script>

Then just below that you will see: -

<script src="https://hosted.clearaccept.com/fields/v1"></script>

Replace this code with: -

<script defer src="https://scripts.clearaccept.com/hostedfields.1.33.4.js"
integrity="sha512-KVlqjisSDM35QnqyMKSt6Z1kbpuPhO3ssDYJrAzNdf8sDwjT+k+fdtc8D7rYQWOQ0uAiKSM5/J3zC88ncaD/tA=="
crossorigin="anonymous" >
</script>

Click ‘OK’ to save the layout and close the library.

After this publish to web, then test the payments screen using Safari 18.4.1 or higher.