Hexo 블로그에 카카오페이 후원버튼 삽입하기

2020-03-14

⏱ 12 min.

얼마 전에 도움이 되는 블로그 포스트를 읽고 포스트를 작성해주신 개발자분께 후원하고자 Buymeacoffee를 시도했는데, 결제에 실패해서 후원을 할 수 없었다. 무슨 이유였는지 모르겠지만, 현대카드를 통한 해외결제가 되지 않았다. 다른 후원방법이 없었기에 결국 그 분께 후원을 하지 못했다.

그래서 더 쉬운 후원이 없을까 고민하다가 내 블로그엔 페이팔 송금하기 기능을 이용해 후원버튼을 달아놓았었다. (뭐.. 아직까진 어떤걸 달아놓아도 아무일도 발생하지 않는다….)

그러다 최근 친구들과의 저녁식사자리에서 내가 먼저 결제를 하고, 친구들로부터 남은 금액을 송금받는 과정에서 카카오페이를 통해 들어오는 돈이 가장 많았던 경험이 생각났고, 카카오페이에서 iOS앱을 개발하고 있기도 한 콘의 도움으로 카카오페이 송금코드를 활용한 후원버튼을 만들었다.

카카오페이와 토스를 사용하는 사용자라면 누구나 송금을 받을 수 있는 QR코드를 발급받을 수 있다. 이 QR코드를 통해 다른 사용자들이 스캔해서 쉽게 돈을 송금할 수 있다. 나는 이 QR코드를 블로그를 후원하는 기능으로 활용해보았다.

카카오페이 송금코드 발급받기

카카오톡 앱 하단의 마지막 탭 [더보기]를 들어가면, 카카오페이를 사용할 수 있는 버튼이 내장되어 있다.

여기에서 빨간색 원안의 버튼을 클릭하면 이미지처럼 송금코드를 발급받을 수 있다. 송금받고자하는 금액을 작성하면 최종적으로 이미지로 저장할 수 있는 QR코드 발급이 완료된다. 정말 쉽다!

그리고 이 QR코드를 사용하여 아티클 페이지에서 보여줄 카드를 만들었다.

후원버튼 이미지 만들기

내 블로그 글을 읽는 사람 모두에게 QR코드를 보여줄 필요는 없다. 후원을 원하는 사람에게만 보여주려면 위에서 만든 버튼 이미지를 클릭했을때만 QR코드를 보여주면 된다.

그럼 후원버튼을 클릭했을때 QR코드 이미지를 보여주는 창으로 넘어가도 될 것이다. 그러나 이렇게하면 페이지를 벗어나게되고, 결과적으로 블로그를 이탈하게 된다. 후원 그 자체가 목적인 블로그는 아닌만큼 버튼을 클릭할 때만 QR코드를 보여주고, 또 버튼으로 QR코드를 사라지게 해주는 것이 내가 원하는 구현이다.

후원을 원하시는 멋지고 아름다우며 감사한 분들이 클릭할 수 있는 버튼 이미지를 만들자.

후원버튼은 카카오페이의 분위기(?)가 나는 버튼 이미지를 만들기 위해 카카오의 CI에서 배경색상(fffacd04)과 폰트색상(ff1e1e1e)을 가져와서 만들었다.

후원버튼/송금코드 HTML 작성

광고배너 코드만을 따로 모아둔 Hexo 폴더(ads)내에 donation.ejs라는 파일을 생성했다.

버튼을 보여주는 코드를 먼저 작성한다.

<!-- 후원하기 버튼 -->
<div class="donation-toggle-button">
    <a onclick="showQR_kakaopay()">
    	<img src="...">
    </a>
</div>

이미지 태그 바깥을 a 태그로 감싸서 클릭했을때 QR코드를 보여주는 함수가 작동되도록 설계했다.

<!-- QR코드 -->
<section class="donation_card" align="center" style="width: 100%;">
	<div id="qr_kakaopay" style="display: none;">
		<img src="...">
	</div>
</section>

QR코드는 후원버튼을 클릭할 때만 보여지려면, 버튼을 클릭할 때까진 보이지 않아야 한다. 그러기 위해 display: none; 을 스타일 속성을 부여했다.

js 함수 작성하기

이제 onclick() 속성에서 명시한 자바스크립트 함수를 작성할 차례이다.

버튼을 클릭했을때, QR코드가 화면에 출력(style.display="block")되어 있으면 닫는 기능을, 출력되어 있지 않으면(style.display="none") 출력되도록 할 것이다.

<script type="text/javascript">
var donationKakaopay = document.getElementById('qr_kakaopay'); 

// 후원버튼 클릭했을 때 QR코드 불러오는 함수
function showQR_kakaopay(){ 
  if(donationKakaopay.style.display=="none"){
    donationKakaopay.style.display="block";
  } else {
    donationKakaopay.style.display="none";
  }
}
</script>

위의 코드들을 하나의 ejs파일로 만들어서 이를 article.ejs(layout/common/article.ejs)의 footer영역에 삽입하면 완성된다.

donation.ejs

<div class="donation-toggle-button">
    <a onclick="showQR_kakaopay()">
    	<img src="...">
    </a>
</div>
<section class="donation-card" align="center" style="width: 100%;">
	<div id="qr_kakaopay" style="display: none;">
		<img src="...">
	</div>
</section>


<script type="text/javascript">
  var donationKakaopay = document.getElementById('qr_kakaopay');

function showQR_kakaopay(){ 
  if(donationKakaopay.style.display=="none"){
    donationKakaopay.style.display="block";
  } else {
    donationKakaopay.style.display="none";
  }
}
</script>

article.ejs

  ...
<footer class="article-footer">
   <div class="donation-button" style="text-align: center;">
      <%- partial('ads/donation') %>
   </div>
</footer>
  ...

DevHexo

카카오페이 송금코드 발급받기

후원버튼 이미지 만들기

후원버튼/송금코드 HTML 작성

js 함수 작성하기