페이액션 플러그인 payaction for Bubble

중요 공지

“버블박스”가 “노코더스”라는 이름으로 변경됐어요

현재 사이트는 더 이상 운영하지 않으니 노코더스 사이트로 이동해주세요

노코더스 ㅣ 노코드 툴, 버블 시작하기

개발 없이 나만의 서비스를 만드는 방법! 노코드 툴, 버블을 노코더스에서 차근차근 시작하세요.

https://nocoders.kr/

한 줄 요약

버블에서 페이액션과 연동해 무통장 입금을 등록하는 플러그인입니다.

컨택 및 제안

bubbleboxerofficial@gmail.com

노코드 마스터로 거듭나기

아래 목차를 클릭해 필요한 부분으로 바로 이동할 수 있습니다.

a. payaction_order : 주문

b. payaction_order : 주문-매칭제외

Tutorial

1. 버블에서 무통장 입금건 등록하기

2. 버블에서 매칭 완료 확인하기

버블박스를 운영하는 페임리가 궁금하다면? If you're curious about FameLee?

페임리 알아보기 (Who is Famelee?)

인스타 팔로우하기 (Follow Instagram)

Intro

1. Why?

국내에서 결제 관리가 필요할 때, 토스 페이먼츠 외 다른 선택지가 필요한 분들이 있으리라 생각해 구현했습니다. 페이액션은 무통장 입금 관리 서비스로, 인터넷뱅킹에서 SMS통지서비스만 신청하고 손쉽게 연동할 수 있습니다.

페이액션 | 1초 무통장입금 자동확인 서비스 - PayAction

페이액션 | 커머스 액션 자동화 SaaS - ⚡ 무통장입금 ↔ 주문 실시간 매칭/입금확인 처리 ✅ 내 쇼핑몰 입금확인! 1초 만에 자동처리 ✅ 내 플랫폼 입금확인! 1초 만에 자동처리 ✅ 내 서비스 입금확인! 1초 만에 자동처리 🌟1초 입금확인 - 압도적인 고객경험👍

https://payaction.app/

페이액션의 API를 직접 설정할 수 있지만, 아직까지 API 기능이 낯선 분들을 위한 개발을 진행했습니다. 직접 API를 연동하고 싶다면, 페이액션의 API 문서를 참고해주세요.

2. ChangeLog

1.0.0

•

[POST] order : 주문

•

[POST] order : 주문-매칭제외

Core

1. Instruction

버블과 페이액션을 완벽히 연동하기 위해선 (1) 페이액션에서 API 기능을 제공하는 플랜과 (2) 버블에서 Backend API를 제공하는 플랜을 사용해야 합니다.

매칭 완료 웹훅 기능은 플러그인에서 사용하지 않고, 별도 세팅을 하셔야 합니다. 세팅 방식은 해당 페이지의 [튜토리얼] 섹션에 정리했습니다.

보다 자세한 정보가 필요하면, 페이액션의 개발 문서를 확인해주세요!

2. Related Docu

플러그인 페이지

payaction (페이액션) Plugin for Bubble, by famelee's bubblebox

payaction (페이액션) Plugin page on Bubble, by famelee's bubblebox. Add payaction (페이액션) in one click to your app. Bubble lets you build web apps without any code.

https://bubble.io/plugin/payaction-페이액션-1712485007952x791063635116687400

데모 링크

Bubble - Visual Programming

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

https://bubblebox-64217.bubbleapps.io/version-test/plugin_payaction/#s0

에디터 링크

Bubble Editor - bubblebox

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

https://bubble.io/page?type=page&name=plugin_payaction&id=bubblebox-64217&tab=tabs-1

3. API Call

a. payaction_order : 주문

무통장 입금 주문건을 생성하고, 페이액션에게 전달합니다.

Input

field	type	Required	설명
apiKey	str		발급 받은 apiKey를 입력해주세요.
secretKey	str		발급 받은 secretKey를 입력해주세요
mall_id	str		상점 번호를 입력해주세요
order_number	str		주문 번호를 입력해주세요.
order_amount	number		주문 금액을 입력해주세요.
order_date	date		주문일시를 입력해주세요, *Dates 속성 ISO_8601 Format YYYY-MM-DDTHH:MM:SS+09:00
billing_name	str		입금자명을 입력해주세요. 해당 입금자명으로 자동 매칭 시, 매칭 여부를 판단합니다.
orderer_name	str		주문자명을 입력해주세요.
orderer_phone_number	str		주문자 전화번호를 입력해주세요.
orderer_email	str		주문자 이메일을 입력해주세요

return

field	type	설명
body status	str	결과 상태를 반환합니다. (ex. Fail, success)
body message	str	결과값을 반환합니다.
error status_code	number	에러 코드를 반환합니다. (ex. 200)
error status_message	str	에러 메시지를 반환합니다.
error_body	str	에러 메시지의 원본(raw)을 반환합니다.
retunred_an_error	boolean	에러의 존재 유무를 반환합니다.

b. payaction_order : 주문-매칭제외

특정 주문건의 매칭을 제외합니다.

Input

field	type	Required	설명
apiKey	str		발급 받은 apiKey를 입력해주세요.
secretKey	str		발급 받은 secretKey를 입력해주세요
mall_id	str		상점 번호를 입력해주세요
order_number	str		주문 번호를 입력해주세요.

return

field	type	설명
body status	str	결과 상태를 반환합니다. (ex. Fail, success)
body message	str	결과값을 반환합니다.
error status_code	number	에러 코드를 반환합니다. (ex. 200)
error status_message	str	에러 메시지를 반환합니다.
error_body	str	에러 메시지의 원본(raw)을 반환합니다.
retunred_an_error	boolean	에러의 존재 유무를 반환합니다.

Tutorial

1. 버블에서 무통장 입금건 등록하기

해당 플러그인을 사용하기 위해서 아래 조건이 필요합니다.

페이액션에 상점 및 계좌 연동

페이액션에서 API 발급 및 등록

페이액션에 상점 및 계좌 연동

해당 부분은 페이액션에 회원가입을 진행하고, 상점을 개설한 후에 페이액션의 가이드를 따라서 완료하시면 됩니다.

페이액션 | 1초 무통장입금 자동확인 서비스 - PayAction

https://payaction.app/

참고로 연동할 상점의 URL은 현재 버블에서 배포한 서비스의 URL을 입력하시면 됩니다. 만약 커스텀 URL을 사용하고 계시다면, 커스텀 URL을 입력해야 합니다.

페이액션에서 API 발급 및 등록

상점 및 계좌 연동 후, 페이액션의 대시보드에서 [API 설정]에 들어옵니다. 여기서 API를 발급 받아야 합니다. 참고로 API 기능은 프로 플랜(24.04.07 기준)에서만 제공합니다. 여기서 보이는 [API Key], [Secret Key], [상점id]값을 플러그인에서 활용할 겁니다.

무통장 입금건 등록하기

버블 에디터로 이동하고, 플러그인 설정 페이지에서 방금 확인한 값을 모두 입력합니다.

유저의 주문 요청 로직을 처리하는 워크플로우에서 [payaction - order : 주문] 액션 이벤트를 생성하고 값을 입력합니다. [order_number]는 주문의 id 값과 같은 역할을 하므로, 버블에서 order table의 id 필드 값을 그대로 활용하는 게 좋습니다.

field	type	Required	설명
apiKey	str		발급 받은 apiKey를 입력해주세요.
secretKey	str		발급 받은 secretKey를 입력해주세요
mall_id	str		상점 번호를 입력해주세요
order_number	str		주문 번호를 입력해주세요.
order_amount	number		주문 금액을 입력해주세요.
order_date	date		주문일시를 입력해주세요, *Dates 속성 ISO_8601 Format YYYY-MM-DDTHH:MM:SS+09:00
billing_name	str		입금자명을 입력해주세요. 해당 입금자명으로 자동 매칭 시, 매칭 여부를 판단합니다.
orderer_name	str		주문자명을 입력해주세요.
orderer_phone_number	str		주문자 전화번호를 입력해주세요.
orderer_email	str		주문자 이메일을 입력해주세요

해당 액션 이벤트가 실행되면, 페이액션의 대시보드에서 아래와 같이 등록됩니다.

2. 버블에서 매칭 완료 확인하기

페이액션에서는 웹훅 기능을 통해 입금이 완료됐는지를 알려줍니다. 다만 플러그인에서 웹훅 URL을 별도로 설정할 수 없기에 해당 부분은 버블 에디터에서 직접 구현하셔야 합니다.

웹훅 URL 등록하기

에디터에서 [Setting] > [API]로 이동하고, [Enable workflow API and backend workflows]를 활성화합니다.

그러면 페이지 네비게이션에서 [Backend workflows] 선택란이 생성됩니다. 여기서 웹훅을 등록할 겁니다.

새로운 API를 생성하고, API 이름을 입력합니다. 이제 해당 API의 URL을 웹훅으로 사용할 겁니다.

API의 URL은 아래처럼 구성됩니다.

•

Dev : https://{serviceURL}/version-test/api/{Ver}/wf/{API workflow name}

•

Live : https://{ServiceURL}/api/{Ver}/wf/{API workflow name}

페이액션에서 위의 사용하고자 한 URL을 입력합니다.

웹훅 동작 시, 액션 이벤트 설정하기

이제 매칭이 완료될 때마다, 버블에서 작동시킬 로직을 만들면 됩니다. 앞서 만든 백엔드 API에서 아래와 같이 설정을 진행합니다. 그래야 웹훅에서 전달 받은 데이터를 확인할 수 있습니다.

field	type	설명
mall_id	str	상점 번호를 받아옵니다.
order_number	str	주문 번호를 받아옵니다.
order_status	str	주문 상태를 받아옵니다.
processing_date	date	처리일시를 받아옵니다. *Dates 속성 ISO_8601 Format YYYY-MM-DDTHH:MM:SS+09:00