/No-Code Development Agency

Stripe를 Bubble.io와 어떻게 통합하나요?

Bubble.io를 사용하여 Stripe 통합을 마스터하세요. 저희의 간단한 단계별 가이드를 사용하여 결제 과정을 간소화하고 사용자에게 원활한 경험을 제공하세요.

Matt Graham, CEO of Rapid Developers

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.

Book a free No-Code consultation

Stripe를 Bubble.io와 어떻게 통합하나요?

Stripe를 Bubble.io와 통합하는 것은 먼저 활성화된 Stripe 계정이 있는지 확인하는 것에서 시작하는 간단한 과정입니다. 다음은 Bubble의 공식 Stripe 플러그인을 사용하여 Stripe 통합을 설정하는 방법에 대한 단계별 가이드입니다:

단계 1: Stripe 계정 만들기
아직 활성화된 Stripe 계정이 없다면 Stripe의 웹사이트를 방문하여 하나를 생성하십시오. 이 계정이 통합을 위한 API 키를 얻는 데 필요합니다.

단계 2: Stripe에서 API 키 가져오기
Stripe 대시보드에 로그인하고 개발자 섹션에서 API 키를 선택합니다. 실제 환경 및 테스트 환경의 API 키를 모두 검색해야 합니다:

실제 환경의 경우:

  • 실시간 클라이언트 ID: 설정 > 연결 설정에서 찾을 수 있습니다.
  • 실제 비밀 키: 개발자 > API 키에서 찾을 수 있습니다.
  • 실제 게시 가능한 키: 또한 개발자 > API 키에서 찾을 수 있습니다.

테스트 환경의 경우:

  • 클라이언트 ID - 개발: 설정 > 연결 설정에서 찾을 수 있습니다.
  • 비밀 키 - 개발: 개발자 > API 키에서 찾을 수 있습니다.
  • 게시 가능한 키 - 개발: 또한 개발자 > API 키에서 찾을 수 있습니다.

이 키들을 저장해 놓고 곧 Bubble에 입력하게 됩니다.

단계 3: Bubble 앱에 Stripe 플러그인 설치
Bubble 편집기의 플러그인 섹션으로 이동하여 공식 Stripe 플러그인을 검색합니다. 이를 애플리케이션에 설치합니다.

단계 4: 플러그인 설정 구성
플러그인 설정에서 Stripe에서 얻은 API 키를 입력합니다:

  • 실시간 및 개발 클라이언트 ID, 비밀 키 및 게시 가능한 키를 각각의 필드에 채웁니다.
  • 원한다면, Stripe 결제 시 기본 이미지를 추가하고 기본 제품 이름을 설정할 수 있습니다.
  • Stripe 체크아웃 버전을 선택합니다 (v3가 v2보다 권장됩니다).
  • 사용자의 주소 수집 또는 링크 결제 활성화 등 추가 설정을 선택할 수 있습니다.

단계 5: 추가 구성 설정 (선택사항)

  • Stripe 체크아웃과 사용자 정의 도메인을 사용하려면, Stripe 대시보드에 도메인을 추가하고, Stripe를 가리키는 DNS 레코드를 작성하고, DNS 설정을 검증하고, 도메인을 활성화로 설정하는 단계를 따라야 합니다.
  • Stripe 고객 데이터에 접근하려면 Bubble에서 "소셜 네트워크"하에 일정 필드를 묶는 개인 정보 보호 규칙을 조정합니다.

단계 6: Stripe 통합 테스트
라이브 상태로 전환하기 전에, Stripe 테스트 모드를 사용하여 모든 것이 예상대로 작동하는지 확인합니다. 개발 키를 사용하여 테스트 트랜잭션을 실행하고, Stripe 대시보드에서 그들이 처리되고 있는지 확인합니다.

단계 7: 라이브로 전환
테스트를 마치고 모든 것이 정상적으로 작동하는 것을 확인한 후, 실제 환경으로 전환하고 실제 거래를 처리하기 시작합니다. Bubble에서 애플리케이션을 개발에서 실시간으로 전환하면, Stripe 플러그인에 실제 키가 설정되어 있다면 자동으로 그것을 사용하게 될 것입니다.

결제 계획 및 제품이 Stripe 테스트와 실제 환경 간에 일관된 ID를 갖도록 항상 확인하십시오. 이렇게 하면 개발에서 실시간으로 전환할 때 문제가 발생하는 것을 방지할 수 있습니다. 이러한 단계를 따르면 이제 Stripe가 Bubble.io 애플리케이션과 성공적으로 통합되어야 합니다.

더 유용한 노코드 리소스 살펴보기

No-Code Tools Reviews

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.

Explore

WeWeb Tutorials

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.

Explore

No-Code Tools Comparison

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.

Explore

By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.

Cookie preferences