Bubble.io 애플리케이션에 Stripe를 통합하는 방법을 단계별로 배우십시오. 이 가이드는 앱 생성부터 결제 작업 흐름 구성까지의 자세한 단계를 제공합니다.
Stripe는 인터넷의 경제 인프라를 개발하는 기술 회사입니다. 그것은 전자 상거래 기업을 위한 온라인 결제 처리 플랫폼을 제공하는 것을 전문으로 합니다. 이 플랫폼은 기업들이 온라인에서 결제를 받고 비즈니스를 관리할 수 있게 합니다. 청구, 분석, 은행, 사기 예방 등 다양한 기능을 제공합니다. 또한 사용자에게 API를 제공하여 그들의 필요에 따라 플랫폼을 맞춤화할 수 있게 합니다.
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와 Stripe 통합하기
1단계: Bubble.io 계정에 로그인하거나 만들기
먼저 Bubble.io 웹사이트를 방문하여 이미 계정이 있다면 로그인하거나, 없다면 가입해야 합니다.
2단계: 새로운 애플리케이션 만들기
로그인하면 'New Application'을 클릭하여 새 애플리케이션을 구축하기 시작하세요. 이름을 지정하고 올바른 계획을 선택해야 합니다.
3단계: 개발 환경 구축하기
Bubble.io는 디지털 제품을 만들기 위한 디자인 및 워크플로우 인터페이스를 제공합니다. 애플리케이션 생성 과정을 보다 잘 이해하기 위해 편집기에 익숙해져야 합니다.
4단계: 데이터베이스 설정하기
제품 설계를 시작하기 전에 데이터베이스를 설정해야 합니다. Bubble.io 인터페이스 상단에 위치한 '데이터' 탭을 클릭하고 사용자 및 제품을 설정합니다.
이제 Bubble.io 애플리케이션이 모두 설정되었으니, Stripe를 통합해보겠습니다.
5단계: Stripe 계정 만들기
아직 Stripe 계정이 없다면 만들어야 합니다. Stripe 사이트를 방문하여 '지금 시작하기'를 클릭하고 나타나는 지시사항을 따라 계정을 설정합니다.
6단계: Bubble.io에 Stripe 플러그인 추가하기
이제 애플리케이션을 Bubble.io로 돌아와 Stripe 플러그인을 설치합니다. Bubble.io 편집기의 왼쪽에 있는 '플러그인'을 클릭합니다. 검색 창을 사용해 'Stripe'을 검색하고 찾은 후 앱에 추가합니다.
7단계: Stripe 플러그인 구성하기
Stripe 플러그인을 설정하려면 Stripe에서 API 키가 필요합니다. 이를 찾으려면 Stripe 계정에 로그인하고, 왼쪽 메뉴의 '개발자'를 클릭한 다음 'API 키'를 선택합니다. '공개 키'와 '시크릿 키'를 복사합니다.
Bubble.io 앱으로 돌아가서 플러그인 탭 - Stripe에 '공개 키'와 '시크릿 키'를 적절한 상자에 붙여넣습니다.
8단계: Bubble에서 결제 워크플로우 설정하기
Bubble.io 편집기에서 결제를 설정하려는 페이지로 이동합니다. 이것은 결제 페이지 또는 기부 페이지일 수 있습니다.
결제가 이루어질 페이지의 편집기 디자인 탭에 버튼 (예: '지금 지불하기')을 만듭니다. 버튼을 배치한 후, 해당 버튼을 선택하고 속성 편집기의 '워크플로우 시작/편집' 작업을 클릭합니다.
워크플로우 탭에서 '+Action 추가'를 클릭한 다음 '결제 - 현재 사용자에게 요금 부과'를 선택합니다. 여기에서 결제를 구성할 수 있습니다. 예를 들어, 금액과 통화를 설정하는 것입니다.
9단계: 결제 과정 테스트하기
작동 여부를 확인하기 위해 결제 과정을 테스트 할 수 있습니다. Bubble.io는 테스트 결제를 할 수 있도록 합니다. 그렇게 하려면 Bubble.io 편집기의 오른쪽 상단에 있는 '미리보기'를 클릭합니다.
테스트 후 Stripe에 성공 메시지가 표시되면 Bubble과 Stripe 간의 통합이 성공적임을 의미합니다.
마지막 단계: 앱 출시하기
테스트를 마치고 모든 것이 예상대로 작동한다고 확신하면, Bubble.io 인터페이스에 있는 '배포' 버튼을 클릭하여 앱을 출시할 수 있습니다.
‘Stripe’ 플러그인 설정에서 ‘공개 키’와 ‘시크릿 키’를 Stripe의 라이브 키로 업데이트해야 합니다. 이것은 앱이 배포되면 실제 거래를 처리하는 데 필수적입니다.
여기까지입니다! Bubble.io 애플리케이션에 Stripe를 성공적으로 통합했습니다.
시나리오: 온라인 스타트업이 독특한 제품을 판매하기 위한 새로운 전자상거래 플랫폼을 구축하려고 합니다. 그들은 Bubble.io를 사용하여 웹사이트를 만들며, 고객이 주문을 할 수 있는 안전한 체크아웃 페이지를 함께 구성합니다. 그러나 그들은 고객이 선호하는 방식으로 쉽게 결제할 수 있도록 하고 싶습니다. 이를 위해, 신용 카드 처리, 구독 서비스, 사기 예방 등을 포함한 포괄적인 결제 시스템을 가진 Stripe를 사용하기로 결정했습니다.
솔루션: Bubble.io와 Stripe 결합
스타트업은 Bubble.io를 사용하여 고객이 제품을 탐색하고 구매할 수 있는 풍부하고 상호 작용적인 전자상거래 사이트를 디자인합니다.
결제 시스템을 설정하기 위해, 스타트업은 Bubble.io 플랫폼에 Stripe를 통합합니다. 그들은 Bubble.io에 Stripe 플러그인을 설치하고, Stripe API 키를 사용하여 플러그인을 구성합니다.
고객이 구매를 결정할 경우, 그들은 안전한 Bubble.io 체크아웃 페이지로 안내됩니다. 장바구니 내역, 포함된 품목, 수량, 총 비용이 자동으로 이 페이지에 표시됩니다.
고객이 결제 및 배송 정보를 입력하고 제출을 누르면, Stripe에서 결제를 처리합니다. Bubble.io는 주문 정보와 상태를 Stripe로 보내는 워크플로우를 트리거하고, 반대로 Stripe는 고객에게 확인 메세지를 보냅니다.
Bubble.io는 Stripe에서 주문 상세 정보와 거래 데이터를 캡처하여 추적 및 관리를 합니다. 수신된 데이터를 바탕으로 회사는 주문을 처리하고 출하할 수 있습니다.
Stripe와 Bubble.io의 통합 기능은 스타트업이 고객 서비스 문제를 처리하는 것을 가능하게 합니다. 고객이 환불 또는 주문 취소를 요청하면, 스타트업은 Stripe의 금융 도구를 사용하여 Bubble.io 대시보드에서 직접 환불 할 수 있습니다.
마지막으로, 스타트업은 Stripe에 저장된 데이터, 고객의 구매 행태, 거래 기록, 전환율 등을 분석하여 사업 성장을 위한 중요한 인사이트를 얻을 수 있습니다.
Bubble.io와 Stripe의 강력한 결합을 활용하여, 스타트업은 온라인 상점을 원활하게 운영할 수 있으며, 훌륭한 고객 경험, 효율적인 주문 관리, 그리고 가치 있는 분석을 보장할 수 있습니다.
.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)
