Adyen 的安全字段不呈现答案

【问题标题】：Adyen's Secured Fields doesn't renderAdyen 的安全字段不呈现
【发布时间】：2018-12-09 23:24:35
【问题描述】：

我正在尝试使用 Adyen 的安全字段来加密购物者的敏感数据 https://docs.adyen.com/developers/checkout/api-integration

输入应该在页面上呈现为 iframe，但出现以下错误。

库嵌入 <head>

<script type="text/javascript" src="https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSecuredFields.1.3.3.min.js"></script>

表格

<form class="flex-center position-ref h-100" action="{{ route('pay.credit') }}" method="post" id="adyen-encrypted-form">
            @csrf()
            @method('POST')

            <div class="cards-div">

                <div class="js-chckt-pm__pm-holder">
                    <input type="hidden" name="txvariant" value="card" />
                    {{--<div class="form-group">--}}
                        {{--<div class="form-control">--}}
                            <label>
                                <span class="input-field" data-cse="encryptedCardNumber"></span>
                            </label>
                        {{--</div>--}}
                    {{--</div>--}}
                    <div class="form-group">
                        <div class="form-control">
                            <label>
                                <span class="input-field" data-cse="encryptedExpiryMonth"></span>
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-control">
                            <label>
                                <span class="input-field" data-cse="encryptedExpiryYear"></span>
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-control">
                            <label>
                                <span class="input-field" data-cse="encryptedSecurityCode"></span>
                            </label>
                        </div>
                    </div>
                    <div id="pmHolder" class="js-chckt-pm__pm-holder">
                        <input type="hidden" name="txvariant" value="card">
                        <input type="hidden" name="encryptedCardNumber" id="card-encrypted-card" value="">
                        <input type="hidden" name="encryptedExpiryMonth" id="card-encrypted-month" value="">
                        <input type="hidden" name="encryptedExpiryYear" id="card-encrypted-year" value="">
                        <input type="hidden" name="encryptedSecurityCode" id="card-encrypted-code" value="">
                    </div>

                    <button type="submit" class="btn btn-success btn-lg btn-block">Pagar</button>
                </div>
            </div>

        </form>

源代码在底部 <body>

<script type="text/javascript">
            var csfSetupObj = {
                rootNode: '.cards-div',
                configObject : {
                    originKey : "pub.v2.8015418815230181.aHR0cDovL2FkeWVuLmJldGE.KfETYJbalDv9FEZ04R8azVjBqUreC611yhD-ZFMwZKI0"
                }
            };
            var securedFields = csf(csfSetupObj);
        </script>

【问题讨论】：

我无法使用自己的详细信息复制此内容。但在创建 originKey 时，问题通常可能是域不正确。例如对于我的本地测试，我创建了一个域为 http://localhost:8080 的 originKey

标签： javascript iframe adyen

【解决方案1】：

只是因为我们也遇到了这个问题，

确保在生成 originKey 时输入的域上测试 adyens 脚本。

这些必须匹配，脚本才能正常工作。如果您想先在本地测试，请在 Adyen 面板中为 localhost:8080 生成第二个 originKey，就像 luke_b 建议的那样。

如果域和域不匹配，iframe 将呈现，但它们不会出现（将具有 disply:none 样式）

【讨论】：

【解决方案2】：

伙计们，事实证明它实际上与代码无关。

在我的帐户面板中，我有这个CSE library disabled

解决此问题的最佳方法是联系 Adyen 的支持或尝试经典集成，您可以在本地托管此库。

【讨论】：

【解决方案3】：

对我来说，我只是将我的本地开发域 http://127.0.0.1:5000 添加到 Allowed origins 中的 Customer Area

【讨论】：