노코드 버블 자동결제 연동 문의
안녕하세요.
현재 버블로 개발하고 있는 서비스에 자동결제를 붙이려고 합니다. 그래서 몇가지 테스트를 해보고 있는데 어떤 버블 앱 페이지에서는 잘 출력되고, 어떤 버블 앱 페이지에서는 오류를 내뱉고 있는 상태입니다.
1. 혹시 이 부분 어떤 사유로 인해 발생하는 오류인지 판단 가능할까요?
2. 그리고 잘 출력되는 페이지에서 카드정보 입력 후 다음 클릭 시 본인 인증화면이 출력되지 않고 바로 빌링키가 발급되는데 이부분 테스트 결제라 그런것인지 확인 주시면 감사하겠습니다. (가이드 문서에선 그렇지 않아 보이네요)
a. 잘 출력되는 페이지 : https://testtesttest-89078.bubbleapps.io/version-test/aa?debug_mode=true
b. 오류가 발생하는 페이지 : https://sadfsdafasdfa.bubbleapps.io/version-test/asd?debug_mode=true
2가지 페이지는 서로 다른앱(URL만 다름)이라는 차이점 말고는 모든 페이지 구성 및 HTML 코드를 동일하게 적용한 결과 값입니다. (일부러 샘플 코드를 수정없이 동일하게 적용했습니다)
5 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
a. 잘 출력되는 페이지 적용 코드
<head>
<title>결제하기</title>
<meta charset="utf-8" />
<!-- 토스페이먼츠 결제창 SDK 추가 -->
<script src="https://js.tosspayments.com/v1/payment"></script>
</head>
<body>
<script>
// ------ 클라이언트 키로 객체 초기화 ------
var clientKey = 'test_ck_GePWvyJnrKbJm0q1jZaVgLzN97Eo'
var tossPayments = TossPayments(clientKey)
tossPayments.requestBillingAuth('카드', { // 결제수단 파라미터 (자동결제는 카드만 지원합니다.)
// 결제 정보 파라미터
customerKey: '1UFYHsXApsTVvDOi1pNaf', // 고객 ID로 상점에서 만들어야 합니다. 빌링키와 매핑됩니다. 자세한 파라미터 설명은 파라미터 설명을 참고하세요: https://docs.tosspayments.com/reference/js-sdk#결제-정보-5
successUrl: "https://my-store.com/success", // 카드 등록에 성공하면 이동하는 페이지(직접 만들어주세요)
failUrl: "https://my-store.com/fail", // 카드 등록에 실패하면 이동하는 페이지(직접 만들어주세요)
})
.catch(function (error) {
if (error.code === 'USER_CANCEL') {
// 결제 고객이 결제창을 닫았을 때 에러 처리
}
})
</script>
</body>
b. 출력 오류 페이지 적용 코드
<head>
<title>결제하기</title>
<meta charset="utf-8" />
<!-- 토스페이먼츠 결제창 SDK 추가 -->
<script src="https://js.tosspayments.com/v1/payment"></script>
</head>
<body>
<script>
// ------ 클라이언트 키로 객체 초기화 ------
var clientKey = 'test_ck_GePWvyJnrKbJm0q1jZaVgLzN97Eo'
var tossPayments = TossPayments(clientKey)
tossPayments.requestBillingAuth('카드', { // 결제수단 파라미터 (자동결제는 카드만 지원합니다.)
// 결제 정보 파라미터
customerKey: 'rpolCiOA0-43oTKmmAJ7s', // 고객 ID로 상점에서 만들어야 합니다. 빌링키와 매핑됩니다. 자세한 파라미터 설명은 파라미터 설명을 참고하세요: https://docs.tosspayments.com/reference/js-sdk#결제-정보-5
successUrl: "https://my-store.com/success", // 카드 등록에 성공하면 이동하는 페이지(직접 만들어주세요)
failUrl: "https://my-store.com/fail", // 카드 등록에 실패하면 이동하는 페이지(직접 만들어주세요)
})
.catch(function (error) {
if (error.code === 'USER_CANCEL') {
// 결제 고객이 결제창을 닫았을 때 에러 처리
}
})
</script>
</body>콘솔 오류 내용은 사진과 같습니다.
혹시 첫번째 페이지에는 저희가 제공하는 플러그인이 있고, 두번째 페이지에는 없나요?
직접 넣으신
<script src="https://js.tosspayments.com/v1/payment"></script>
이코드는 위치상 동작하지 않습니다.
아마 첫번째 페이지에는 저희가 제공한 플러그인이 있어서 js 파일이 정상적으로 import 된것 같아요.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.