Adyen Custom Card Защищенное поле не отображается в моем приложении Ionic - PullRequest
Новая
       65

Adyen Custom Card Защищенное поле не отображается в моем приложении Ionic

0 голосов
/ 27 октября 2019

Я не могу обработать Adyen Payment с помощью поля Custom Card Secured в своем приложении IONIC4 и Angular8

Я следовал документации 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) Изменения в моем файле securedpayment.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>

Я получаю ошибкусообщение - не удалось смонтировать корневой узел компонента не найден.

Я ожидаю, что должен увидеть страницу оплаты, на которой при отправке он должен представить данные в зашифрованном виде

1 Ответ

2 голосов
/ 30 октября 2019

Вы получаете эту ошибку, потому что вы пытаетесь смонтировать защищенные поля на странице до ее визуализации. В Angular / Ionic index.html - это страница-обертка для вашего приложения, она анализируется, запускается ваш js-файл и только после этого отображается содержимое внутри.

Я бы переместил инициализацию вашей библиотеки проверок и защищенных полей в ловушку ngOnInit вашей страницы оплаты.

В качестве альтернативы, если вы хотите, чтобы настройка происходила в компоненте приложения (или какваш компонент корневого узла называется) вы можете поместить инициализацию и монтирование в хук ngAfterViewInit.

...