한 페이지에 여러 개의 버튼이있는 PayPal 익스프레스 체크 아웃 통합

Question

현재 각 항목과 관련된 페이팔 버튼이있는 상품 목록이 있습니다. 각 항목은 관련 단추를 클릭하여 별도로 구입합니다.

<ul> 
    <li data-id="1">Item 1 <div class="paypal-button"></div></li> 
    <li data-id="2">Item 2 <div class="paypal-button"></div></li> 
    <li data-id="3">Item 3 <div class="paypal-button"></div></li> 
</ul> 

<script src="https://www.paypalobjects.com/api/checkout.js"></script> 

<script> 
    paypal.Button.render({ 
     // options 
    }, '.paypal-button'); 
</script> 

불행히도, paypal.Button.render()는 단지 그것을 발견하는 첫 번째 요소를 렌더링 할 것으로 보인다.

여러 요소에서이 호출을 수행 할 수 있습니까?

Answer 1

당신은 여러 번 다음, 각 요소에 고유 ID를 부여 렌더링 호출해야합니다 : 당신이 나 같은 ID를 추적하는 마음에 들지 않으면, 당신이 대신 클래스를 사용할 수 있습니다

<ul> 
    <li data-id="1">Item 1 <div id="button-1"></div></li> 
    <li data-id="2">Item 2 <div id="button-2"></div></li> 
    <li data-id="3">Item 3 <div id="button-3"></div></li> 
</ul> 

<script src="https://www.paypalobjects.com/api/checkout.js"></script> 

<script> 
    [ '#button-1', '#button-2', '#button-3' ].forEach(function(selector) { 
     paypal.Button.render({ 
      // options 
     }, selector); 
    }); 
</script> 

Answer 2

. 데이터 속성을 사용하여 차별화하십시오.

<div class="paypal-button" data-my-attribute="tree"></div> 
<div class="paypal-button" data-my-attribute="dog"></div> 
<div class="paypal-button" data-my-attribute="car"></div> 

<script src="https://www.paypalobjects.com/api/checkout.js"></script> 

<script> 
    document.querySelectorAll('.paypal-button').forEach(function(selector) { 
     paypal.Button.render({ 
      // options 
      console.log(selector.dataset.myAttribute); 
     }, selector); 
    }); 
</script>