Adyen 自定义卡安全字段未在我的 Ionic 应用程序中呈现答案

【问题标题】：Adyen Custom Card Secured field not rendering in my Ionic AppAdyen 自定义卡安全字段未在我的 Ionic 应用程序中呈现
【发布时间】：2020-02-22 21:29:45
【问题描述】：

我无法在我的 IONIC4 和 Angular8 应用程序中使用自定义卡安全字段呈现 Adyen Payment

我每一步都按照 Adyen 文档进行操作，但仍然没有渲染。我已经在我的 Index.html、我的 PaymentsPage.html 文件中进行了修改

1 Index.html file

//Added checkout script and stylesheet 
      <head>
      <script src="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/3.2.0/adyen.js"></script>
      <link rel="stylesheet" href="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/3.2.0/adyen.css" />
      </head>


//Added configuration,checkout mount in my body of Index.html in the 
 bottom

 <body>
<script type="text/javascript">

const configuration = {
rootNode: 'securedfields',
showPayButton: true,
onSubmit: handleOnSubmit,
amount: {             // Optional. Used to display the amount in the Pay 
Button.
        value: 1000,
        currency: 'EUR'
    }
};

 const checkout = new AdyenCheckout(configuration);

  const sf = checkout.create('securedfields', {
  type: 'card',
   groupTypes: ['mc', 'visa', 'amex', 'bcmc', 'maestro'],
   styles: {
    error: {
        color: 'red'
    },
    validated: {
        color: 'green'
    },
    placeholder: {
        color: '#d8d8d8'
    }
},
placeholders: {
    encryptedCardNumber: '9999 9999 9999 9999',
    encryptedExpiryDate: 'mm/yy',
    encryptedSecurityCode: '1234'
},
ariaLabels: {
    lang: 'en-GB',
    encryptedCardNumber: {
        label: 'Credit or debit card number field'
    }
},
// Events
onChange: function() {},
onValid : function() {},
onLoad: function() {},
onConfigSuccess: function() {},
onFieldValid : function() {},
onBrand: function() {},
onError: function() {},
onFocus: function() {},
onBinValue: function(bin) {}
}).mount('#securedfields');

function handleOnSubmit(state, component) {
state.isValid // True or false. Specifies if all the information that the 
shopper provided is valid.
state.data // Provides the data that you need to pass in the `/payments` 
call.
component // Provides the active component instance that called this 
 event.
}

</script>
  </body>

2) 我的securepayment.page.html 文件中的更改

  <div id="securedfields">
    <label>
        <span>Card number:</span>
        <span data-cse="encryptedCardNumber"></span>
    </label>
    <label>
        <span>Expiry date:</span>
        <span data-cse="encryptedExpiryDate"></span>
    </label>
    <label>
        <span>CVV/CVC:</span>
        <span data-cse="encryptedSecurityCode"></span>
    </label>
</div>

我收到错误消息 - 无法安装组件根节点未找到。

我希望我应该看到支付页面，当我提交它应该以加密方式提交数据

【问题讨论】：

标签： typescript ionic4 payment-gateway angular8 adyen

【解决方案1】：

您收到此错误是因为您试图在页面呈现之前将安全字段安装到页面上。在 Angular/Ionic 中，index.html 是应用程序的包装页面，它会被解析，你的 js 会运行，然后才会呈现里面的内容。

我会将您的结帐库和安全字段的初始化移动到您的付款页面的 ngOnInit 挂钩中。

或者，如果您想在应用程序组件（或任何您的根节点组件）中进行设置，您可以将初始化和安装放入 ngAfterViewInit 挂钩中。

【讨论】：

我设法解决了这个问题，但我的字段仍然没有被渲染。你有通过 Adyen 渲染的经验吗
我面临同样的问题。你找到解决办法了吗？