Bubble.io 앱을 Braintree와 통합하여 안전한 결제를 위해 배우는 방법. 단계별 가이드에는 계정 생성, API 키 획득, 결제 플로우 구축이 포함됩니다.
Braintree는 비즈니스가 앱이나 웹사이트에서 결제를 받기 쉽게 만드는 도구를 제공하는 풀스택 결제 플랫폼입니다. 이는 페이팔의 부문이며 전세계 130개가 넘는 통화를 지원합니다. Braintree는 결제, 청구, 마켓플레이스를 만드는 기능 등 다양한 종류의 서비스를 제공합니다. 또한, 주요 전자상거래 및 청구 플랫폼과 통합되어, 모든 규모의 기업들을 위한 판매상의 서비스를 제공합니다.
Book a call with an Expert
Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.
Bubble.io를 Braintree와 통합하는 방법
Bubble.io 앱을 Braintree와 통합하는 것은 게임을 바꿀 수 있습니다. 특히 제품이나 서비스에 대한 결제를 받고자 하는 경우에 그렇습니다. 아래에서 이 과정을 안내하겠습니다.
1단계: Bubble.io 계정 생성
아직 Bubble.io 계정을 만들지 않았다면 Bubble.io로 이동하여 새 계정을 생성합니다. 플랫폼을 사용하기 전에 이메일 주소를 확인해야 합니다.
2단계:Bubble.io에서 새 프로젝트 시작
그 후, Bubble.io에서 새 프로젝트를 시작해야 합니다. "New App"을 클릭하고, 앱 이름을 입력하고, 템플릿을 선택하거나 새로이 시작하세요.
3단계: Braintree 계정 생성
이제 Braintree Payments 웹사이트로 이동하고 계정을 생성합니다. 필요한 세부 사항을 작성하고 이메일 주소를 확인하십시오.
4단계: Braintree에서 API 키 가져오기
계정이 설정되면 API 키를 가져와야 합니다. 이를 위해 Account > My user > API Keys로 이동합니다. API 키 또는 페어링을 만들지 않은 경우, "새 API 키 생성" 버튼을 클릭하세요. 이 키들을 안전하게 보관하십시오. 이들은 Braintree 계정을 Bubble.io와 연결하는 데 사용됩니다.
5단계: Bubble.io에 Braintree 플러그인 설치
다음으로, Bubble.io 앱으로 돌아가서 Braintree 플러그인을 설치합니다. 이것을 Plugins > Add plugins로 이동하여 "Braintree"를 검색하여 할 수 있습니다. 찾으면 "Install"을 클릭하세요.
6단계: Braintree 플러그인 구성
Braintree 플러그인이 설치된 후에 API 키를 입력하여 플러그인을 구성해야 합니다. 이것은 Plugins > Braintree로 이동하여 Braintree Merchant ID, Public Key, Private Key를 각각의 필드에 입력함으로써 할 수 있다. 정보를 정확하게 입력하여 나중에 문제가 없도록 하세요.
7단계: 결제 흐름 구축
이제 결제 흐름을 구축할 시간입니다. Bubble.io의 비주얼 프로그래밍 인터페이스 덕분에, 이를 미리 제작된 블록들을 선택하고 커스터마이징하기만 하면 됩니다. 먼저 디자인 탭으로 이동하여 결제 정보를 입력하는 폼을 추가하고, 워크플로우 탭으로 이동하여 결제 폼이 제출될 때 트리거되는 새로운 워크플로우를 만듭니다. 새로운 워크플로우에 Braintree 플러그인으로 사용자에게 요금을 청구하는 액션을 추가하고, 결제 세부 정보를 지정합니다.
8단계: 결제 흐름 테스트
결제 흐름을 구축한 후에는 모든 것이 제대로 작동하는지 철저히 테스트해야 합니다. 이는 Bubble.io 편집기에서 앱을 미리보고, Braintree에서 제공하는 테스트 신용 카드 번호를 이용하여 할 수 있습니다.
9단계: 앱 발행
결제 흐름이 정상적으로 작동한다는 확신이 들면, 앱을 발행할 차례입니다. Bubble.io 편집기에서 "Deploy" 버튼을 클릭하고, 라이브 버전을 선택한 후 "Deploy Current"를 클릭합니다. 몇 가지 진행 사항 후에 앱이 실제 결제를 받을 수 있도록 준비된 상태로 공개됩니다.
이제 Bubble.io 앱을 Braintree와 통합했습니다! 이제 제품이나 서비스에 대한 결제를 받을 수 있습니다. 항상 API 키를 안전하게 보관하고, 최대한의 보안과 성능을 보장하기 위해 앱과 플러그인을 최신 상태로 유지하십시오.
시나리오: 온라인 서점이 Bubble.io를 사용하여 웹사이트를 구축하고, 고객들이 해당 사이트에서 직접 책을 구매할 수 있도록 안전한 결제 처리 솔루션을 통합하려고 한다. 그들은 광범위한 기능, 국제 결제 지원, 그리고 쉬운 통합을 위해 Braintree를 선택한다.
솔루션: Bubble.io와 Braintree 통합
웹사이트 개발: 서점은 Bubble.io를 사용하여 그들의 eCommerce 웹사이트를 개발하고, 사용자 친화적으로 만들며, 원활한 제품 검색 및 체크아웃 과정을 가능케 한다.
통합 설정: 서점은 Bubble.io에 Braintree 플러그인을 설치하고, 두 플랫폼 간의 통신을 가능하게 하기 위해 Braintree API 키를 입력한다. 이후에는 거래 시작시에 트리거되는 Bubble.io의 작업 흐름을 설정한다.
거래 처리 작업 흐름: 고객이 책을 선택하고 체크아웃을 진행하면, Braintree 플러그인이 활성화된다. 고객은 사이트에 포함된 보안된 Braintree 인터페이스에서 결제 정보를 입력하도록 요청받고, 확인 후 결제가 실시간으로 처리된다.
매출 후 작업: Braintree의 고급 기능을 활용하면, 서점은 매출 후 작업을 맞춤화할 수 있다. 예를 들어, 성공적인 거래 후에는 고객에게 즉시 자동영수증을 발송할 수 있어서 사용자 경험을 향상시킨다.
Braintree에서의 수익 수집: 책 판매로부터 얻은 모든 수익은 Braintree에서 처리되고 수집되며, 서점의 선호하는 지급 방식에 따라 은행 계좌로 이체될 수 있다.
모니터링 및 분석: 통합을 통해 Braintree 내에서 판매원 및 상호 작용을 원활하게 추적할 수 있다. 거래 성공률, 흔한 오류, 화폐 선호도 등을 모니터링하고 도움이 되는 데이터 기반의 의사결정을 도와준다.
장점:
Bubble.io와 Braintree 통합을 통해 온라인 서점은 고객에게 안전하고 원활한 결제 과정을 제공할 수 있으며, 전 세계적인 범위를 넓히고 판매를 증대할 수 있다. 또한 성장을 위한 가치 있는 통찰력도 얻게된다.
.svg)
Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.
.svg)
Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.
.svg)
Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.
Then all you have to do is schedule your free consultation. During our first discussion, we’ll sketch out a high-level plan, provide you with a timeline, and give you an estimate.
.png)
.png)
