Невозможно создать новый AdyenCheckout в REACT - PullRequest
Новая
       35

Невозможно создать новый AdyenCheckout в REACT

0 голосов
/ 08 июля 2019

Я новичок в Adyen и относительно новичок в Javascript и REACT.Я пытаюсь использовать компоненты Adyen dropin в REACT, но не могу создать новый компонент AdyenCheckout.

Я загрузил Adyen Javascript в componentDidMount, используя следующий код: 

const script = document.createElement("script");
script.src = "https://checkoutshopper- 
test.adyen.com/checkoutshopper/sdk/3.0.0/adyen.js";
script.async = true;
document.body.appendChild(script);

И япытаясь создать компонент AdyenCheckout, используя приведенный ниже код: 

const configuration = {
locale: "en_US",
environment: "test",
originKey: "YOUR_ORIGIN_KEY",
paymentMethodsResponse: this.state.paymentMethodsResponse,
};

const checkout = new AdyenCheckout(configuration);
const dropin = checkout
    .create('dropin', {
        onSubmit: (state, dropin) => {
        },
        onAdditionalDetails: (state, dropin) => {
        }
    })
.mount('#dropin');`

Или, изменив new AdyenCheckout(configuration) на new window.AdyenCheckout(configuration),

, поскольку люди, похоже, добились успеха с этим синтаксисом впрошлое.

Используя new AdyenCheckout(configuration)

, я получаю ошибку AdyenCheckout is not defined.

Используя new window.AdyenCheckout(configuration)

, я получаю ошибку TypeError: window.AdyenCheckout is not a constructor.

Я уверен, что это что-то довольно простое, я делаю что-то не так, поэтому, если кто-то может помочь, это будет оценено.

Пожалуйста, помогите!

Ответы [ 2 ]

0 голосов
/ 11 июля 2019

Здесь происходит то, что вы пытаетесь инициировать AdyenCheckout до фактической загрузки скрипта.

Самым простым решением для этих случаев является добавление тега сценария в документ HTML. Таким образом, скрипт будет загружен до запуска приложения React.

При этом, поскольку вы будете использовать скрипт только в определенном разделе, добавление тега скрипта в ваше приложение React имеет смысл.

Чтобы решить эту проблему, просто переместите все функции, связанные с AdyenCheckout, в метод, который вы вызываете после загрузки скрипта: 

class AdyenDropin extends Component {
  constructor(props) {
    super(props);
    this.initAdyenCheckout = this.initAdyenCheckout.bind(this);
  }

  componentDidMount() {
    const script = document.createElement("script");
    script.src =
      "https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.0.0/adyen.js";
    script.onload = this.initAdyenCheckout; // Wait until the script is loaded before initiating AdyenCheckout
    document.body.appendChild(script);
  }

  initAdyenCheckout() {
    // ...

Здесь у вас есть рабочий пример .

Ура!

0 голосов
/ 10 июля 2019

Используйте componentDidMount для инициализации объекта AdyenCheckout, поскольку он будет иметь доступ к DOM.


class AdyenDropin extend Component {
  contructor(props){
    this.checkout = {};
  }

  componentDidMount(){
    const script = document.createElement("script");
    script.src = "https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.0.0/adyen.js";
    script.async = true;
    document.body.appendChild(script);

    const configuration = {
      locale: "en_US",
      environment: "test",
      originKey: "YOUR_ORIGIN_KEY",
      paymentMethodsResponse: this.state.paymentMethodsResponse,
    };

    const checkout = new AdyenCheckout(configuration);
    const dropin = checkout
      .create('dropin', {
        onSubmit: (state, dropin) => {
        },
        onAdditionalDetails: (state, dropin) => {
        }
      })
      .mount('#dropin');`
    }
  }

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