R 반짝 앱

Question

와 스트라이프 체크 아웃을 통합 [는 R 반짝 구글 그룹 크로스 포스트 - 나는 24 시간 기다렸다] 다음 코드는 내가 단순히 .html 개방으로 저장 정상적으로 경우 스트라이프에서 checkout 버튼을 렌더링

을 그래서 같은 R 반짝 응용 프로그램에 배치

<h1> this is a test </h1> 
<form action="" method="POST"> 
    <script 
    src="https://checkout.stripe.com/checkout.js" class="stripe-button" 
    data-key="pk_test_qdunoptxl9KNXR5qk7WdtkVg" 
    data-amount="2000" 
    data-name="Demo Site" 
    data-description="2 widgets ($20.00)" 
    data-image="/128x128.png"> 
    </script> 
</form> 

:하지만 그것은 파이어 폭스와

가

output$StripeCheckOut <- renderUI({ 
    div(class="span6", 
    div(HTML(' 
       <h1> this is a test </h1> 
       <form action="" method="POST"> 
        <script 
        src="https://checkout.stripe.com/checkout.js" class="stripe-button" 
        data-key="pk_test_qdunoptxl9KNXR5qk7WdtkVg" 
        data-amount="2000" 
        data-name="Demo Site" 
        data-description="2 widgets ($20.00)" 
        data-image="/128x128.png"> 
       </script> 
       </form> 
      '))) 

가 012 아래에 빈 필드가 발생합니다텍스트.

R 샤이니가 페이지가 DOM에 의해 렌더링 된 후에 Javascript가 동적으로 버튼을로드하는 것을 허용하지 않는 것 같습니다.

R 반짝이 앱에 기본 Stripe Checkout 버튼을 포함하려면 어떻게해야합니까?

Answer 1

나는 포함하는 경우 : ui.r 내부

HTML(' 
     <h1> this is a test </h1> 
     <form action="" method="POST"> 
      <script 
      src="https://checkout.stripe.com/checkout.js" class="stripe-button" 
      data-key="pk_test_qdunoptxl9KNXR5qk7WdtkVg" 
      data-amount="2000" 
      data-name="Demo Site" 
      data-description="2 widgets ($20.00)" 
      data-image="/128x128.png"> 
      </script> 
     </form> 
     ') 

이 직접 작동 -하지만 조건부 패널 내부를 배치하면 스트라이프 JS로드 할 수 없습니다. 일

<div align="center" data-display-if="output.Unpaid==True"> 
... 
</div> 

모든 것을 :

대신에, 나는 HTML data-display-if 조건을 사용!

Shiny output 오브젝트 대 input 오브젝트에 조건을 바인드 할 수있어 작업하기가 더 쉽습니다. 추가 테스트 후

---

업데이트

그것은 내 편집이 꽤 일을 밝혀; Stripe Checkout JS가로드 된 후 내 Shiny App이 페이지의 다른 JS 요소와 상호 작용하는 것을 차단합니다.

스트라이핑 JS와 내부 빛나는 JS 일부 충돌이있는 것 같다

....

---

새로운 업데이트이

샤이니의 최신 버전 (0.9.1)이있다 이 문제가 수정되었습니다. 가장 최근의 릴리스에서 업데이트 된 js 헤드 및 싱글 톤이있는 것으로 보입니다.

더 이상이 문제가 발생하지 않습니다. 이제 반짝이는 줄무늬를 직접 사용할 수 있습니다.

Answer 2

좋아, 그 중 하나 (주석이 코드에 불행 이번 주)에서 작동하지 않았다. 노골적인 tags$script 전화로 포장 해 보셨습니까?

tags$script(src="https://checkout.stripe.com/checkout.js", 
      class="stripe-button", 
      "data-key"="pk_test_qdunoptxl9KNXR5qk7WdtkVg", 
      "data-amount"="2000", 
      "data-name"="Demo Site", 
      "data-description"="2 widgets ($20.00)", 
      "data-image"="/128x128.png") 

도움이되는지 확인하기 위해 전체 양식을 만드는 것이 유리할 수 있습니다.