Chan
Chan11mo ago

Flutter 브랜드 페이(카드 등록) 질문

카드 등록 UI를 어떻게 표시하나요?
62 Replies
토스페이먼츠 BOT
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) : - 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요. * 주말/공휴일에는 답변이 늦을 수 있어요.
Kimoon Lee
Kimoon Lee11mo ago
결제위젯으로 연동중이신가요? 결제위젯으로 연동중이시라면 결제위젯 UI 에 카드 등록 내용이 자동으로 표시 됩니다.
Chan
ChanOP11mo ago
이렇게 UI를 구현해야하는데요. 현재 위 샘플 앱에서 테스트 중입니다
No description
No description
Chan
ChanOP11mo ago
데모 앱에서는 이렇게 표시가 되고 있습니다
No description
Chan
ChanOP11mo ago
mid: cp_monoraj4v6 입니다
Kimoon Lee
Kimoon Lee11mo ago
결제위젯에 브랜드페이를 추가 하지 않으신것으로 보이네요. 결제위젯 어드민 UI 에서 추가해 주시기 바랍니다.
Chan
ChanOP11mo ago
_paymentWidget
.renderPaymentMethods(
selector: 'methods',
amount: Amount(
value: info.amount,
currency: info.currency,
country: info.country),
options: RenderPaymentMethodsOptions(
variantKey: info.variantKeyMethod ?? "DEFAULT"))
.then((control) {
_paymentMethodWidgetControl = control;
}, onError: (fail) {
// Get.offAndToNamed("/result", arguments: fail);
return;
});
_paymentWidget
.renderPaymentMethods(
selector: 'methods',
amount: Amount(
value: info.amount,
currency: info.currency,
country: info.country),
options: RenderPaymentMethodsOptions(
variantKey: info.variantKeyMethod ?? "DEFAULT"))
.then((control) {
_paymentMethodWidgetControl = control;
}, onError: (fail) {
// Get.offAndToNamed("/result", arguments: fail);
return;
});
이렇게 사용하고 있고, varientKeyMethod가 렌더링에 영향을 주는 거 같은데요. 현재 DEFAULT로 되어있어서 그런 것 같습니다. varientKey 값을 뭐라고 줘야하나요?
이실장
이실장11mo ago
아까도 말씀드렸지만 mid알려주세요 정해진 값이 있는게 아니라
이실장
이실장11mo ago
No description
이실장
이실장11mo ago
여기서 직접 생성해주셔야합니다. 브랜드페이 계약된 상점관리자로 들어가셔서 직접 브랜드페이 포함된 UI를 생성하시기 바랍니다.
Chan
ChanOP11mo ago
@이실장 mid는 위에 알려드렸습니다
이실장
이실장11mo ago
확인했습니다! 그럼 위에 확인하셔서 varinatKey추가 해보시겠어요?
Chan
ChanOP11mo ago
뜨는 거 확인되었습니다. 혹시 flutter용 브랜드 페이 sdk도 있을까요? 다른 질문에서 언급된 것 같아서요 variantKeyAgreement는 variantKeyMethod값과 동일한 건가요?
Kimoon Lee
Kimoon Lee11mo ago
flutter용 브랜드 페이 sdk는 별도로 없고 결제 위젯 SDK 를 이용해서 사용하셔야 합니다.
이실장
이실장11mo ago
variantKeyAgreement는 variantKeyMethod값과 동일한 건가요? 다릅이나. 각각설정하는 위치가 달라요 UI설정/약관설정
Chan
ChanOP11mo ago
결제위젯을 통해 카드 등록 시에 결제 없이 등록만 할 거라 아래 부분은 불필요할 거라 생각했었는데요. amount가 0이면 inappwebview 쪽에서 0보다 커야한다는 에러가 나오는데요. 다음 설정을 어떻게 줘야하나요? 1으로 주면 동작하긴 합니다.
_paymentWidget
.renderPaymentMethods(
selector: 'methods',
amount: Amount(
value: config.amount,
currency: config.currency,
country: config.country),
options: RenderPaymentMethodsOptions(
variantKey: config.variantKeyMethod))
.then((control) {
_paymentMethodWidgetControl = control;
}, onError: (fail) {
// Get.offAndToNamed("/result", arguments: fail);
return;
});
_paymentWidget
.renderPaymentMethods(
selector: 'methods',
amount: Amount(
value: config.amount,
currency: config.currency,
country: config.country),
options: RenderPaymentMethodsOptions(
variantKey: config.variantKeyMethod))
.then((control) {
_paymentMethodWidgetControl = control;
}, onError: (fail) {
// Get.offAndToNamed("/result", arguments: fail);
return;
});
Kimoon Lee
Kimoon Lee11mo ago
결제위젯을 통해 카드 등록 시에 결제 없이 등록만 할 거라 아래 부분은 불필요할 거라 생각했었는데요
그러시다면 그냥 100 정도로 세팅만 해주시면 됩니다. 어차피 결제하기 버튼을 호출하지 않으실거라 문제 없으실거에요.
토스페이먼츠 BOT
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
Chan
ChanOP11mo ago
위에 결제 방법이나 안내 글씨를 지우고 싶은데, javascript의 카드 등록 api처럼 UI를 표시할 수는 없나요?
No description
이실장
이실장11mo ago
결제위젯 UI설정에서 지울수 있습니다.
Chan
ChanOP11mo ago
어떻게 지울 수 있나요? 코드 상으로 세팅할 수 있는 값은 보이지 않습니다
Kimoon Lee
Kimoon Lee11mo ago
코드가 아니라 상점관리자 상에 UI 에서 하셔야 합니다.
이실장
이실장11mo ago
No description
이실장
이실장11mo ago
한번 쭉 어드민 이것저것 확인해보시면 확인 가능하실거에요
Chan
ChanOP11mo ago
넵 감사합니다. 결제수단 관리 버튼은 제거 불가능한 것 같은데 맞을까요? 그리고 토스페이 위젯 로드가 바로 되지 않아, 깜빡임이 발생하는데, 로드 완료되었을때, 캐치할 수 있는 방법이 있을까요? 약관 동의 widget은 별도로 호출하고 싶은데, 결제 위젯에서 가능한가요?
Kimoon Lee
Kimoon Lee11mo ago
관리버튼은 제거가 불가한게 맞습니다. 깜빡임은 Ready 이벤트를 받으시면됩니다.
Kimoon Lee
Kimoon Lee11mo ago
약관동의 위젯은 표시 안하시려면 render 를 하지 않으시면 됩니다.
Chan
ChanOP11mo ago
플러터에서도 가능한가요? 그리고 정기결제에 대한 약관 동의가 필요한데, 결제 UI 처럼 별도로 약관을 생성 후에 정기결제 약관을 포함시킬 수 있나요? 추가하는 버튼이 안 보이네요
No description
Kimoon Lee
Kimoon Lee11mo ago
플러터도 renderAgreement 를 하지 않으시면 약관은 표시 되지 않습니다. custom 약관 추가는 상점관리자 약관설정 메뉴에서 필수약관 추가하기로 원하시는 약관을 추가해 주시면 됩니다. 하지만 아마도 브랜드페이 UI 만 보여주시고 별도로 정기 약관만 받으시려는 것으로 보이는데요. 이경우는 그냥 약관 UI 를 직접 만드시는게 나을겁니다.
Chan
ChanOP11mo ago
플러터에서도 Ready 이벤트가 있나요?
이실장
이실장11mo ago
renderPaymentMethod가 Promise로  동작합니다.
.renderPaymentMethods(
selector: 'methods',
amount: Amount(value: info.amount, currency: info.currency, country: info.country),
options: RenderPaymentMethodsOptions(variantKey: info.variantKeyMethod ?? ""))
.then((control) {
_paymentMethodWidgetControl = control;
}, onError: (fail) {
Get.offAndToNamed("/result", arguments: fail);
return;
});
.renderPaymentMethods(
selector: 'methods',
amount: Amount(value: info.amount, currency: info.currency, country: info.country),
options: RenderPaymentMethodsOptions(variantKey: info.variantKeyMethod ?? ""))
.then((control) {
_paymentMethodWidgetControl = control;
}, onError: (fail) {
Get.offAndToNamed("/result", arguments: fail);
return;
});
.then((control) { _paymentMethodWidgetControl = control; } 이 부분이 render완료되야 실행되요
Chan
ChanOP11mo ago
답변 감사합니다. 여기에 뜨는 약관은 어디서 설정하는 건가요? 현재 이렇게 설정되어있는데요. 어디서 가져오는건지 모르겠습니다
No description
No description
이실장
이실장11mo ago
브랜드페이 약관설정은 불가합니다. 저희가 제공해드리는대로쓰셔야해요 상점관리자 약관설정 메뉴는 결제위젯에서 제공하는 renderAgreement 관련 내용입니다.
Chan
ChanOP11mo ago
여기에서 마지막 약관이 좀 다르게 들어가 있는듯한데, 아래 약관이 누락된듯합니다
{
"id": 8,
"title": "자동승인 이용약관",
"version": "1.0",
"url": "https://pages.tosspayments.com/terms/brandpay/billing",
"required": true,
"agreed": false
}
{
"id": 8,
"title": "자동승인 이용약관",
"version": "1.0",
"url": "https://pages.tosspayments.com/terms/brandpay/billing",
"required": true,
"agreed": false
}
전체동의를 해도 이 약관만 agreed false로 떨어지더라구요.
이실장
이실장11mo ago
저건 따로 받아주셔야해요 그런데 브랜드페이 자동결제 사용 승인은 받으셨나요?
Chan
ChanOP11mo ago
이실장
이실장11mo ago
자동결제의 경우 별도로 약관 받아주셔야합니다~!
Chan
ChanOP11mo ago
약관 동의를 한 번에 받으면 좋을 거 같은데 위 이미지에 있는 것들도 토스 위젯 말고 별도로 구현해도 되는 부분이죠?
이실장
이실장11mo ago
네 맞습니다.
Kimoon Lee
Kimoon Lee11mo ago
네 별도로 구현하신후 약관동의 APi 로 호출해 주시면 됩니다.
Chan
ChanOP11mo ago
No description
Chan
ChanOP11mo ago
플러터 토스페이먼츠 sdk로 이렇게 띄우는 방법이 있나요?
이실장
이실장11mo ago
웹뷰위에서 sdk 실행해주시면 될 것 같습니다~
이실장
이실장11mo ago
api로 그냥 하시는게 https://docs.tosspayments.com/reference/brandpay#약관-동의 간단할 것 같습니다.
브랜드페이 API | 토스페이먼츠 개발자센터
브랜드페이에서 제공하는 API 엔드포인트(Endpoint)와 객체 정보, 파라미터, 요청 및 응답 예제를 살펴보세요.
Chan
ChanOP11mo ago
위에 까지는 진행 완료하였는데요. 혹시 카드 여러개 등록 시에 현재 선택된 카드 정보를 알 수가 있을까요? _paymentMethodWidgetControl?.getSelectedPaymentMethod() 이런식으로 가져오려했지만, 브랜드페이로만 내려오는 것 같구요. API(/v1/brandpay/payments/methods) 로도 시도해봤더니, 슬라이드해서 카드를 다른 걸 선택한 상태에서 API 호출하더라도 selectedMethodId가 변경되지 않더라구요. 현재 보여지는(선택된) 카드의 method_id를 가져오는 방법이 있을까요?
이실장
이실장11mo ago
결제위젯 JavaScript SDK | 토스페이먼츠 개발자센터
결제위젯 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
Chan
ChanOP11mo ago
플러터입니다
이실장
이실장11mo ago
No description
이실장
이실장11mo ago
아 정기결제하시려고 그러시는거죠?
Chan
ChanOP11mo ago
네네
이실장
이실장11mo ago
이건 flutter sdk ver 올라가야겠네요 조치되면 말씀드릴게요
Chan
ChanOP11mo ago
네 감사하빈다
이실장
이실장11mo ago
귀사 mid가 어떻게되었었죠?
Chan
ChanOP11mo ago
cp_monoraj4v6 입니다
이실장
이실장11mo ago
이건 일정 나오면 공유드릴게요 차주 중 배포예정입니다.
Chan
ChanOP11mo ago
아 아직 현재 선택된 카드가 뭔지는 구현이 안되어있나보군요. 넵 감사합니다. 혹시 결제수단 관리 > 해지하기와 같이 UI가 바뀌어야할만한 엑션을 유저가 취했을 때 응답을 받을 수 있는게 있을까요? 뭔가 갱신을 해줘야할 거 같은데 카드 리스트도 sdk에 속해있는 거라 sdk 자체에서 업데이트가 되어야할 거 같긴합니다.
이실장
이실장11mo ago
해지했을 때 응답 말씀하시는거세요?
Chan
ChanOP11mo ago
네 해지 등을 했을 때 응답을 받아 UI를 갱신할 수 있는 방법이 있는지요? 해지 후 카드등록 화면으로 오면 카드들이 그대로 보여지는 상황이더라구요
이실장
이실장11mo ago
1. 웹훅 2. 해지완료 화면에서 뒤로가기 누르면 아래 이벤트 전달됨
No description
이실장
이실장11mo ago
현재는 아래 2가지 방법 있습니다. https://discord.com/channels/864296203746803753/1117655878733156353/1229657800406204467 배포되었습니다 @Chan

Did you find this page helpful?