diff --git a/css/default_shop.css b/css/default_shop.css index 60daa9d85..1683d457f 100644 --- a/css/default_shop.css +++ b/css/default_shop.css @@ -1299,4 +1299,7 @@ html.no-overflowscrolling #sc_coupon_frm, html.no-overflowscrolling #od_coupon_f /* PG별 간편결제 공통 버튼 */ #sod_frm_paysel .samsungpay_icon{background:url('../img/samsungpay.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px} -#sod_frm_paysel .tosspay_icon,#sod_frm_paysel .pinpay_icon{font-weight:bold} +#sod_frm_paysel .tosspay_icon{background:url('../img/tosspay-logo.svg') no-repeat 50% 50% #fff;background-size:90px auto;overflow:hidden;text-indent:-999px} +#sod_frm_paysel .pinpay_icon{background:url('../img/pinpay-logo.png') no-repeat 50% 50% #fff;background-size:90px 60px;overflow:hidden;text-indent:-999px} +#m_sod_frm_paysel .tosspay_icon{display:inline-block;width:72px;height:24px;vertical-align:middle;background:url('../img/tosspay-logo.svg') no-repeat 50% 50%;background-size:72px auto;overflow:hidden;text-indent:-999px} +#m_sod_frm_paysel .pinpay_icon{display:inline-block;width:68px;height:24px;vertical-align:middle;background:url('../img/pinpay-logo.png') no-repeat 50% 50%;background-size:68px auto;overflow:hidden;text-indent:-999px} diff --git a/css/mobile_shop.css b/css/mobile_shop.css index e7b5cf039..4add8a83e 100644 --- a/css/mobile_shop.css +++ b/css/mobile_shop.css @@ -1057,4 +1057,7 @@ box-shadow:0 0 8px rgba(65,98,255,0.8)} /* PG별 간편결제 공통 버튼 */ #sod_frm_paysel .samsungpay_icon{background:url('../img/samsungpay.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px} -#sod_frm_paysel .tosspay_icon,#sod_frm_paysel .pinpay_icon{font-weight:bold} +#sod_frm_paysel .tosspay_icon{background:url('../img/tosspay-logo.svg') no-repeat 50% 50% #fff;background-size:90px auto;overflow:hidden;text-indent:-999px} +#sod_frm_paysel .pinpay_icon{background:url('../img/pinpay-logo.png') no-repeat 50% 50% #fff;background-size:90px 60px;overflow:hidden;text-indent:-999px} +#m_sod_frm_paysel .tosspay_icon{display:inline-block;width:72px;height:24px;vertical-align:middle;background:url('../img/tosspay-logo.svg') no-repeat 50% 50%;background-size:72px auto;overflow:hidden;text-indent:-999px} +#m_sod_frm_paysel .pinpay_icon{display:inline-block;width:68px;height:24px;vertical-align:middle;background:url('../img/pinpay-logo.png') no-repeat 50% 50%;background-size:68px auto;overflow:hidden;text-indent:-999px} diff --git a/docs/pg-easypay.md b/docs/pg-easypay.md index 679e0b3d8..c5a60f942 100644 --- a/docs/pg-easypay.md +++ b/docs/pg-easypay.md @@ -41,3 +41,10 @@ node tests/pg_easypay.js 실제 PG 네트워크 요청과 운영 DB 마이그레이션은 이 테스트에서 실행하지 않는다. 배포 검수 시 계약된 MID에서 각 수단의 성공·실패·사용자 취소·재시도, 주문내역·관리자·영수증 표시, 전액 취소·부분 취소를 확인한다. 머니/포인트 및 카드 복합결제는 실제 총액·현금영수증·부분 취소 가능 여부도 확인한다. 커스텀 스킨이 주문서를 자체 구현했다면 공통 버튼 함수와 결제수단 변경 이벤트를 반영해야 한다. 토스 자체창 요청은 [SDK v2 결제창 문서](https://docs.tosspayments.com/sdk/v2/js/payment)의 `method=CARD`, `card.flowMode=DIRECT`, `card.easyPay` 규격을 사용한다. provider 코드는 [토스 ENUM 문서](https://docs.tosspayments.com/codes/enum-codes)를 따른다. 일반 카드로 변경하면 `DEFAULT`로 되돌리고 SDK 요청에서 `easyPay`를 제외한다. + +## 결제 로고 출처 + +- `img/tosspay-logo.svg`: [토스페이 공식 연동 가이드](https://docs-pay.toss.im/)에서 제공하는 로고 ZIP의 `logo-toss-pay-blue.svg` 원본. +- `img/pinpay-logo.png`: [스마트로페이 간편결제 안내](https://pg.smartro.co.kr/service/pg-service/payment/easypayment/)에서 제공하는 핀페이 로고 원본. + +로고의 비율과 색상을 유지하고 저장소의 로컬 파일을 사용한다. 무통장입금·가상계좌 등 일반 결제수단 아이콘은 자체 SVG이다. diff --git a/img/payment-bank.svg b/img/payment-bank.svg index 55509ac3c..e7f597dc6 100644 --- a/img/payment-bank.svg +++ b/img/payment-bank.svg @@ -1 +1 @@ - + diff --git a/img/payment-virtual-account.svg b/img/payment-virtual-account.svg index 59b2b5622..842c55775 100644 --- a/img/payment-virtual-account.svg +++ b/img/payment-virtual-account.svg @@ -1 +1 @@ - + diff --git a/img/pinpay-logo.png b/img/pinpay-logo.png new file mode 100644 index 000000000..4d89d810e Binary files /dev/null and b/img/pinpay-logo.png differ diff --git a/img/tosspay-logo.svg b/img/tosspay-logo.svg new file mode 100644 index 000000000..03faf5e72 --- /dev/null +++ b/img/tosspay-logo.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + diff --git a/theme/basic/css/default_shop.css b/theme/basic/css/default_shop.css index 4e01ed818..adcb5f05d 100644 --- a/theme/basic/css/default_shop.css +++ b/theme/basic/css/default_shop.css @@ -1316,4 +1316,7 @@ html.no-overflowscrolling #sc_coupon_frm, html.no-overflowscrolling #od_coupon_f /* PG별 간편결제 공통 버튼 */ #sod_frm_paysel .samsungpay_icon{background:url('../../../img/samsungpay.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px} -#sod_frm_paysel .tosspay_icon,#sod_frm_paysel .pinpay_icon{font-weight:bold} +#sod_frm_paysel .tosspay_icon{background:url('../../../img/tosspay-logo.svg') no-repeat 50% 50% #fff;background-size:90px auto;overflow:hidden;text-indent:-999px} +#sod_frm_paysel .pinpay_icon{background:url('../../../img/pinpay-logo.png') no-repeat 50% 50% #fff;background-size:90px 60px;overflow:hidden;text-indent:-999px} +#m_sod_frm_paysel .tosspay_icon{display:inline-block;width:72px;height:24px;vertical-align:middle;background:url('../../../img/tosspay-logo.svg') no-repeat 50% 50%;background-size:72px auto;overflow:hidden;text-indent:-999px} +#m_sod_frm_paysel .pinpay_icon{display:inline-block;width:68px;height:24px;vertical-align:middle;background:url('../../../img/pinpay-logo.png') no-repeat 50% 50%;background-size:68px auto;overflow:hidden;text-indent:-999px} diff --git a/theme/basic/css/mobile_shop.css b/theme/basic/css/mobile_shop.css index de539f38c..549d7340d 100644 --- a/theme/basic/css/mobile_shop.css +++ b/theme/basic/css/mobile_shop.css @@ -1056,4 +1056,7 @@ box-shadow:0 0 8px rgba(65,98,255,0.8)} /* PG별 간편결제 공통 버튼 */ #sod_frm_paysel .samsungpay_icon{background:url('../../../img/samsungpay.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px} -#sod_frm_paysel .tosspay_icon,#sod_frm_paysel .pinpay_icon{font-weight:bold} +#sod_frm_paysel .tosspay_icon{background:url('../../../img/tosspay-logo.svg') no-repeat 50% 50% #fff;background-size:90px auto;overflow:hidden;text-indent:-999px} +#sod_frm_paysel .pinpay_icon{background:url('../../../img/pinpay-logo.png') no-repeat 50% 50% #fff;background-size:90px 60px;overflow:hidden;text-indent:-999px} +#m_sod_frm_paysel .tosspay_icon{display:inline-block;width:72px;height:24px;vertical-align:middle;background:url('../../../img/tosspay-logo.svg') no-repeat 50% 50%;background-size:72px auto;overflow:hidden;text-indent:-999px} +#m_sod_frm_paysel .pinpay_icon{display:inline-block;width:68px;height:24px;vertical-align:middle;background:url('../../../img/pinpay-logo.png') no-repeat 50% 50%;background-size:68px auto;overflow:hidden;text-indent:-999px}