Bubble.io 노코드 툴 - 30일차 - (결제연동 방법2 - 성공!)

지난 포스팅에서는 Stripe 플러그인을 활용하여 설정한 금액만큼 사용자가 'Stripe 결제모듈' 페이지로 이동하여 결제하도록 하는 방법을 구현해보았다. 이번 방법은 Stripe.js 를 활용하여, Stripe 공식 결제 모듈이 아닌 서비스 내에서 사용자의 카드정보를 입력받아 결제를 진행하는 결제 방식이다.

 

결과적으로 유투브의 설명을 하나씩 보면서 따라 진행하였고 크게 어렵지 않게 실제 결제까지 완료할 수 있었다.

(다만 Stripe의 경우 국내 PG와는 달리, 금액 결제 후 곧바로 취소를 진행하여도 transaction에 대한 수수료 0.5불을 책정한다.)

 

최소 금액에 대해 혼동이 있어서 몇 차례 시도해보았다. 결과적으로 US결제 진행 시에는 0.5불 이하는 결제 가능함.

한화 결제하도록 설정할 수 있는데 이 경우 500원은 0.5불이 안돼서 결제 실패하였고, 800원은 0.5불 이상이라 결제 진행되었다.

(Stripe 공식 정책 문서에 따르면 한화 결제로 설정한 경우, 최소 결제 금액을 5,000원으로 안내하고 있다. 아마도 내가 시도한 방법은 결국 달러를 거쳐서 결제가 진행되다보니 원 금액보다는 달러 금액을 기준으로 최소 기준이 설정된 것으로 보인다.)

방법2 진행을 위해 Plugin 목록에서 Stripe.js 2 를 다운로드

 

서비스 페이지에서 받은 각각의 값들을 활용하여 Stripe 토큰을 생성하도록 하는 플로우

Stripe 토큰이 생성되면 이후 해당 토큰을 사용하여 결제하라는 플로우

위와 같이 입력 폼을 구성하였다. 사용자는 이름과 카드정보를 기입하고 Purchase 버튼을 클릭함으로써 설정한 금액 결제를 할 수 있다.

금액을 한화(KRW)로 설정하고 '500'이라고 값을 입력했더니 50,000원이 (테스트모드에서) 결제된 것을 확인할 수 있다. 1 = 100원이라는 것을 알 수 있다.

50,000원 결제 이후 / 5라고 값을 입력했다. 500원이 결제되기를 바랐지만 결제 진행되지 않았다.

 

----

아래 캡쳐는 Stirpe 공식 정책 문서임. KRW의 경우 5,000원(KRW)로 설정하고 있는 것을 확인할 수 있다.

500원 결제 시도 시, 500원=0.35$ 로 환산되어 최소 결제액(USD) 0.5$를 충족하지 못하여 결제가 실패한 화면

금액을 800원으로 높였더니 성공적으로 결제 진행됨.

 

------

아래 카드번호 4242 4242 4242 4242는 Stripe가 설정한 공식 테스트용 카드번호. 유효기간/CVC 등의 값은 내 마음대로 입력하면 됨.

 

제대로 된 값이 아닌 경우 (4141) 위 이미지처럼 Failed to pay out (결제 실패)

 

-------

아직 해결하지 못한 문제 중 하나.

Stripe API에서 보내주는 에러 코드 값을, 내 서비스에서 오류 메시지로 보여주고 싶다.

이론적으로는 API를 통해 에러 값과 설명 값을 받아와서, 그걸 Alert 메시지에서 dynamic으로 보여주면 되는데 이렇게 구현하기 위해서는 Stripe PlugIn이 아니라 API Connector를 사용해야하는 것으로 생각된다.

 

카드가 거절되었을 때 이런 오류값(오류코드)를 받아와서 "카드 결제가 거절되었습니다. 다른 카드를 이용해 보세요."같은 알림 문구를 띄우고 싶다.

이 부분은 향후 API Connector를 좀 더 자유롭게 다룰 수 있을 때 해보는 것으로!