0

我无法在我的 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>

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

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

4

1 回答 1

3

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

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

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

于 2019-10-30T09:32:40.250 回答