Обратный вызов тега скрипта из React - AmazonPay

Я нахожусь в процессе интеграции AmazonPay в React SPA. Классическая интеграция основана на тегах скриптов и обратных вызовах (документы).

Вот один пример из виджета кнопки:

<head>
  <script type='text/javascript'>
    window.onAmazonLoginReady = function() {
      amazon.Login.setClientId('CLIENT-ID');
    };
    window.onAmazonPaymentsReady = function() {
                showButton();
    };
  </script>
    <script async = "async" src='https://static-na.payments-amazon.com/OffAmazonPayments/us/sandbox/js/Widgets.js'>
  </script>
</head>

<body>
. . .
 <div id = "AmazonPayButton">
 </div>
  ...
 <script type = "text/javascript">
    function showButton(){
      var authRequest; 
      OffAmazonPayments.Button("AmazonPayButton", "SELLER-ID", { 
        type:  "TYPE", 
        color: "COLOR", 
        size:  "SIZE", 

        authorization: function() { 
        loginOptions = {scope: "SCOPES", 
          popup: "POPUP-PARAMETER"}; 
        authRequest = amazon.Login.authorize (loginOptions, 
          "REDIRECT-URL"); 
        }, 

        onError: function(error) { 
          // your error handling code.
          // alert("The following error occurred: " 
          //        + error.getErrorCode() 
          //        + ' - ' + error.getErrorMessage());
        } 
     });
    }; 
   </script>
   . . .
   <script type = "text/javascript">
     document.getElementById('Logout').onclick = function() {
       amazon.Login.logout();
     };
   </script>

</body>

При использовании React div с id = "AmazonPayButton" не отображается, пока React не смонтирует div, что приведет к сбою функции window.showButton().

Чтобы обойти эту проблему, я заключил определение function showButton() в window.showButton():

    window.onAmazonPaymentsReady = function() {

        window.showButton = function () {

            var authRequest;

            // eslint-disable-next-line no-undef
            OffAmazonPayments.Button("AmazonPayButton", "%REACT_APP_AMAZON_SELLER_ID_SANDBOX%", {
                type: "PwA",
                color: "Gold",
                size: "medium",
                authorization: function () {
                    loginOptions = {
                        scope: "profile postal_code payments:widget payments:shipping_address",
                        popup: true
                    };
                    authRequest = amazon.Login.authorize(loginOptions, "%PUBLIC_URL%/pay-with-amazon");
                },
                onError: function (error) {
                    console.info(error.toString())
                }
            });
        };
    };

Компонент, содержащий AmazonPay div, теперь может быть вызван на componentDidMount:

import React, {Component} from 'react'

class AmazonMethod extends Component {

    componentDidMount () {
        window.showButton()
    }

    render() { return <div id = "AmazonPayButton"></div>}
}

export default AmazonMethod

Я не понимаю, как получить доступ к обратному вызову onError из моего компонента React. Как мне прослушать обратный вызов и ответить соответствующим образом?

Этот вопрос относится также к AddressWidget и WalletWidget; все они полагаются на обратные вызовы тегов сценария.

Обновлять: Я написал сообщение, в котором резюмируется, как интегрировать AmazonPay с React на стороне клиента.

javascript reactjs amazon-pay

27.08.2018 17:46

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

454

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Почему бы вам просто не передать функцию вашей функции showButton в componentDidMount, которую может вызвать onError?

Что-то вроде этого:

window.onAmazonPaymentsReady = function() {

    window.showButton = function (errorFunc) {

        var authRequest;

        // eslint-disable-next-line no-undef
        OffAmazonPayments.Button("AmazonPayButton", "%REACT_APP_AMAZON_SELLER_ID_SANDBOX%", {
            type: "PwA",
            color: "Gold",
            size: "medium",
            authorization: function () {
                loginOptions = {
                    scope: "profile postal_code payments:widget payments:shipping_address",
                    popup: true
                };
                authRequest = amazon.Login.authorize(loginOptions, "%PUBLIC_URL%/pay-with-amazon");
            },
            onError: function (error) {
                console.info(error.toString())
                errorFunc(error)
            }
        });
    };
};


import React, {Component} from 'react'

class AmazonMethod extends Component {

componentDidMount () {
    window.showButton(this.errorFunc)
}

errorFunc = (error) => {
    console.info(error);

   this.setState({
        amazonError: error
   });
}

render() { return <div id = "AmazonPayButton"></div>}
}

export default AmazonMethod

Как мне получить доступ к этой функции обратного вызова внутри моего компонента и setState? Не могли бы вы привести пример?

— 27.08.2018 17:52

Я понял, что ты имеешь в виду.

— 27.08.2018 18:03

Обновил мой первый ответ.

— 27.08.2018 18:06

:) собирался исправить, где вы передали обратный вызов. Спасибо!

— 27.08.2018 18:08

27.08.2018 17:51