Accept.js (authorize.net) и одностраничные приложения

Question

Мы стремимся использовать Authorize.NET accept.js для поддержания нашего соответствия SAQ-A (мы уже делаем это с помощью braintree и stripe).

Мне очень трудно работать с accept.js, основываясь на документации, и я надеюсь, что то, что я не хочу, возможно недокументированным способом!

Моя большая проблема заключается в следующем:

"ВАЖНО: при использовании формы с информацией о платеже убедитесь, что ваша страница загружает библиотеку после определения кнопки".

Сценарий, кажется, хочет обработать DOM, как только он загрузится, и найти необходимые ему атрибуты. Это крайне затрудняет работу с точки зрения одностраничного приложения, потому что, если пользователь просматривает страницу оплаты, затем решает вернуться, чтобы добавить что-то еще в корзину, а затем снова идет на оплату... сценарий уже был загружен, но теперь форма не отображается.

То, что я хочу сделать, это сделать так, чтобы accept.js дал мне функцию для вызова и передачи ей необходимых вещей (тестовый режим, ключ публикации и т. Д.). Вот как это делается в Braintree:

braintree.dropin.create({
      authorization: 'CLIENT_TOKEN_FROM_SERVER',
      container: '#dropin-container'
    }

и вот как это делается с полосой:

// Create an instance of the card Element
var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');

Этот стиль API прекрасно работает в Интернете, потому что я могу загрузить файл javascript один раз, но при необходимости создаю форму оплаты.

Есть ли способ сделать это с accept.js? Единственный способ, которым я смог придумать, - это создать форму самостоятельно и затем вызвать Accept.dispatch, но это переместит нас из SAQ-A в SAQ-A EP.

Спасибо!

Answer 1

Если вы используете React, есть довольно полезная библиотека под названием response-authorize-net, которая позволяет вам взаимодействовать с Authorize.Net через простой и понятный API на основе компонентов.

Чтобы интегрировать его в свой проект, вы обычно используете FormContainer компонент вместе с FormComponent чтобы сразу же получить полнофункциональную и готовую к использованию платежную форму.

Вы можете иметь собственную логику рендеринга, предоставив свой собственный компонент / функцию для FormContainer слишком.

Вот пример библиотеки, используемой в существующем проекте React https://github.com/j-em/react-authorize-net-example