Кнопка отслеживания полосы не отображается при использовании Angular Маршруты

В настоящее время я пытаюсь выполнить стандартный диалог проверки платежей Stripe Payments. Когда я опускаю короткий <script> include, описанный в документах (https://stripe.com/docs/checkout), кнопка, которая должна отображаться, не отображается.

Когда я помещаю его в свой файл index.html верхнего уровня, кнопка DOES отображается. Когда я помещаю его в частичное, которое отображается при попадании на конкретный маршрут, это не так. Я предполагаю, что это происходит потому, что он не выполняет Javascript, потому что он не происходит при загрузке страницы, когда он находится на маршруте.

Есть ли что-нибудь, что я могу сделать, чтобы заставить это работать на маршруте или я должен просто реализовать пользовательскую форму, указывающую на библиотеку stripe.js? Спасибо.

Ответы

Ответ 1

Проблема в том, что js не срабатывает, как вы сказали. Решение состоит в том, чтобы просто включить Stripe checkout.js в ваш файл index.html, а затем запустить всплывающее окно Stripe для открытия с помощью вашего контроллера (или в другом месте).

В вашем index.html(или эквиваленте)

<script src="https://checkout.stripe.com/checkout.js"></script>
<!-- Angular script(s) -->

В вашем контроллере (или в другом месте)

var handler = StripeCheckout.configure({
  key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
  image: '/img/documentation/checkout/marketplace.png',
  locale: 'auto',
  token: function(token) {
    // Use the token to create the charge with a server-side script.
    // You can access the token ID with `token.id`
  }
});

handler.open({
  name: 'Stripe.com',
  description: '2 widgets',
  amount: 2000
});

// handler.close();

Это адаптация для документов Stripe по адресу: https://stripe.com/docs/checkout#integration-custom