Как создать всплывающее окно, как Stripe checkout - PullRequest
Новая
       8

Как создать всплывающее окно, как Stripe checkout

0 голосов
/ 02 июля 2018

Мне было поручено создать веб-приложение, которое создает всплывающие окна на других сайтах, таких как Stripe checkout и использует ли этот код (прилагается ниже) в документации для оформления заказа (https://stripe.com/docs/quickstart). У меня есть опыт работы с Iframe, но я не использую теги сценария .

Подойдет любой совет или пример кода. 

<form action="your-server-side-code" method="POST">   
  <script src="https://checkout.stripe.com/checkout.js" 
          class="stripe-button"     
          data-key="pk_test_g6do5S237ekq10r65BnxO6S0"     
          data-amount="999"     
          data-name="Stripe.com"    
          data-description="Example charge"     
          data-image="https://stripe.com/img/documentation/checkout/marketplace.png"     
          data-locale="auto"    
          data-zip-code="true">  
  </script> 
</form>

Ответы [ 2 ]

0 голосов
/ 09 июля 2018

То, что вы загружаете, это в основном javascript. Вот скрипт, который вы загружаете: https://checkout.stripe.com/checkout.js.

Этот скрипт создает всплывающее окно, называемое "Модальный".

Вот учебник от W3Schools: https://www.w3schools.com/howto/howto_css_modals.asp

Этого должно быть достаточно, чтобы начать работу.

0 голосов
/ 02 июля 2018

Для начала добавьте следующий код на свою страницу оплаты, убедившись, что форма соответствует вашему собственному серверному коду: 

<form action="your-server-side-code" method="POST">
 <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
   data-key="pk_test_g6do5S237ekq10r65BnxO6S0"
   data-amount="999"
   data-name="Stripe.com"
   data-description="Example charge"
   data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
   data-locale="auto"
   data-zip-code="true">
 </script>
</form>
...