성리액트네이티브 웹뷰로 브랜드페이 연동하기
안녕하세요 v2에 있는 브랜드페이 기능 중 결제 수단 변경 관련 UI 및 API를 사용하려고 합니다.
v2는 RN을 지원하지 않는다고 해서, 웹뷰로 작업중인데요.
const TossPaymentMethod = () => {
const webViewRef = useRef(null);
const [customerKey, setCustomerKey] = useState('f9KC7GDaHr-VKUE9XJT_W');
const htmlContent =
return <WebView ref={webViewRef} source={{html: htmlContent}} />;
};
이렇게 코드를 작성해서 테스트를 해봤는데 오류가 발생했다는 문구만 뜨고 이 이상 진행되지 않고 있습니다.
혹시 리액트 네이티브에서는 결제 수단 변경과 관련해서 위젯또는 API 사용이 어려운 걸까요?
v2는 RN을 지원하지 않는다고 해서, 웹뷰로 작업중인데요.
const TossPaymentMethod = () => {
const webViewRef = useRef(null);
const [customerKey, setCustomerKey] = useState('f9KC7GDaHr-VKUE9XJT_W');
const htmlContent =
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://js.tosspayments.com/v2/standard"></script>
</head>
<body>
<h2>결제 수단 변경</h2>
<script>
const clientKey = "${Config.TOSS_PAYMENT_CLIENTKEY}";
const customerKey = "${customerKey}";
const tossPayments = TossPayments(clientKey);
const brandpay = tossPayments.brandpay({customerKey, redirectUrl: "/"});
brandpay.openSettings();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://js.tosspayments.com/v2/standard"></script>
</head>
<body>
<h2>결제 수단 변경</h2>
<script>
const clientKey = "${Config.TOSS_PAYMENT_CLIENTKEY}";
const customerKey = "${customerKey}";
const tossPayments = TossPayments(clientKey);
const brandpay = tossPayments.brandpay({customerKey, redirectUrl: "/"});
brandpay.openSettings();
</script>
</body>
</html>
;return <WebView ref={webViewRef} source={{html: htmlContent}} />;
};
이렇게 코드를 작성해서 테스트를 해봤는데 오류가 발생했다는 문구만 뜨고 이 이상 진행되지 않고 있습니다.
혹시 리액트 네이티브에서는 결제 수단 변경과 관련해서 위젯또는 API 사용이 어려운 걸까요?
