React Native WebView의 Paypal
과정
저는 최근에 Paypal 통합이 필요한 프로젝트를 진행 중이었고 안정적인 오픈 소스 React Native 모듈을 찾을 수 없었기 때문에 WebView 기반 구현을 생각해 냈습니다.
구현 전 완료 단계
React Native 부분 설정
이 시점에서 앱의 대부분이 작동하고 흐름 프로세스를 완료하려면 결제 부분이 필요할 수 있다고 가정합니다.
우리는 WebView를 사용하고 있기 때문에 앱 사용자 인터페이스에 맞게 디자인할 HTML 파일과 WebView와 앞뒤로 통신하는 구성 요소가 있을 것입니다.
PayPal.js일부 기능 및 변수에 대한 간략한 설명
const patchPostMessageFunction는 여기에 설명된 문제를 해결합니다.
handleMessage 함수는 paypal.html 내에서 Javascript에서 내보낸 데이터를 수신합니다.
passValues 함수는 반응 네이티브에서 paypal.html로 데이터를 보냅니다.
sent 상태의 키는 반응 네이티브에서 WebView로 데이터가 전달된 시기를 표시하는 데 사용됩니다.
paypal.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Paypal</title>
<script src="https://www.paypal.com/sdk/js?client-id={clientID}"></script>
<style>
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(180deg, #3D40AD 0%, #6B6ED7 100%);
}
.container{
height: 100%;
display: flex;
margin-left: 20px;
margin-right: 20px;
overflow-y: scroll;
justify-content: center;
align-items: center;
}
p{
color: white;
font-size: 16px;
text-align: justify;
margin-bottom: 50px;
}
#preloaderSpinner{
display: none;
}
</style>
</head>
<body>
<div class="container">
<div style="justify-content: center; text-align: center">
<img width="80px" height="80px" src="logo.png"/>
<p>
</p>
<div id="paypal-button-container"></div>
</div>
</div>
<script>
function payWithPayPal(amount, orderID) {
paypal
.Buttons({
createOrder: function(data, actions) {
return new Promise(function(resolve, reject){
resolve(orderID);
});
},
onApprove: function(data, actions) {
window.postMessage(JSON.stringify({
reference: data.orderID,
message: 'Transaction Successful',
status: 'success'
}));
}
})
.render("#paypal-button-container");
}
document.addEventListener("message", function(data) {
var details = JSON.parse(data.data);
document.querySelector('p').innerText = "You are about to fund your wallet with USD "+details.amount+" on XYZ. Click on any of the payment options to proceed. Your account will be credited instantly after payment."
payWithPayPal(details.amount, details.orderID);
})
</script>
</body>
</html>
document.addEventListener("message", function(data)) 부분은 반응 네이티브에서 내보낸 메시지를 수신하고 전송된 데이터를 수신합니다. 그런 다음 이 데이터는 JSON으로 다시 구문 분석되어 표시 메시지를 준비하고 PayPal SDK도 설정하는 데 사용됩니다.
트랜잭션은 API 호출을 통해 서버 측에서 시작되고 PayPal의 orderID가 포함된 페이로드가 반환됩니다.
백엔드에서 거래를 시작하려면 PayPal SDK가 매우 유용하며 여기에서 다양한 언어로 찾을 수 있습니다.
결론
React Native WebView는 복잡한 애니메이션 그래프를 그릴 뿐만 아니라 이와 같은 상황에 유용합니다. 귀하의 의견을 듣고 더 많은 정보를 얻고 싶습니다.
Reference
이 문제에 관하여(React Native WebView의 Paypal), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/franko4don/paypal-in-react-native-4emd텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
