on
E-commerce Vanilla JS [12편] 페이팔 SandBox 결제
E-commerce Vanilla JS [12편] 페이팔 SandBox 결제
import { hideLoading , rerender , showLoading , showMessage , parseRequestUrl } from '../utils' ; // 추가
import { getOrder , getPaypalClientId } from '../api' ; // 추가
const addPaypalSdk = async ( totalPrice ) => { // <-- 추가
const clientId = await getPaypalClientId ();
showLoading ();
if (! window . paypal ){
const script = document . createElement ( 'script' );
script . type = 'text/javascript' ;
script . src = https://www.paypalobjects.com/api/checkout.js' ;
script . async = true ;
script . onload = () => handlePayment ( clientId , totalPrice );
document . body . appendChild ( script );
} else {
handlePayment ( clientId , totalPrice );
}
}
const handlePayment = ( clientId , totalPrice ) => {
window . paypal . Button . render ({
env : 'sandbox' ,
client : {
sandbox : clientId ,
production : '' ,
},
locale : 'ko_KR' ,
style : {
size : 'responsive' ,
color : 'gold' ,
shpe : 'pill' ,
},
commit : true ,
payment : ( data , actions ) => {
return actions . payment . create ({
transactions : [
{
amount : {
total : totalPrice ,
currency : 'USD'
}
}
]
})
},
onAuthorize : ( data , actions ) => {
return actions . payment . execute (). then ( async () => {
showLoading ();
hideLoading ();
showMessage ( 'Payment was successful' , () => {
rerender ( OrderScreen );
})
})
}
}, '#paypal-button' ). then ( () => {
hideLoading ();
});
}
// 추가 -->
const OrderScreen = {
after_render : async () => {},
render : async () => {
const request = parseRequestUrl ();
const {
_id ,
shipping ,
payment ,
orderItems ,
itemsPrice ,
shippingPrice ,
taxPrice ,
totalPrice ,
isDelivered ,
deliveredAt ,
isPaid ,
paidAt ,
} = await getOrder ( request . id );
// <-- 추가
if (! isPaid ){
addPaypalSdk ( totalPrice );
}
// 추가 -->
return `
// 중략
},
};
from http://webdoli.tistory.com/603 by ccl(A) rewrite - 2021-12-16 07:02:10