Skip to main content
Hashnode
HA JIN-YOUNG's blog

PayPal 스마트 버튼 2025년, `about:blank` 플래시와 영구 팝업 문제는 이제 사라졌을까?

Published 4 min readMarkdown
H
HA JIN-YOUNG

# 📌 서론 – “왜 아직도 결제 팝업이 안 닫히나요?”

온라인 쇼핑몰이나 서비스 결제 페이지를 만들다 보면 PayPal 스마트 버튼을 적용하고 싶지만, 두 가지 오래된 문제가 발목을 잡는 경우가 많습니다.

  1. about:blank 플래시 – 버튼 클릭 직후 잠깐 나타나는 빈 페이지가 깜빡이며 사용자 경험을 해치는 현상

  2. 영구 팝업(never‑closing popup) – 결제 창이 정상적으로 닫히지 않아 사용자가 페이지를 강제로 새로 고침해야 하는 상황

2025년 현재, PayPal 측에서 이 두 이슈를 공식적으로 수정했는지 궁금하지 않으신가요? 이번 포스트에서는 최신 PayPal Checkout 업데이트 내용을 정리하고, 초보 개발자도 바로 적용할 수 있는 방법을 단계별로 알려드립니다.

핵심 키워드: PayPal 스마트 버튼, about:blank 플래시, 결제 팝업 문제

# 🛠️ 본론

# 1️⃣ PayPal 스마트 버튼이란? (기본 개념 정리)

  • PayPal 스마트 버튼은 JavaScript SDK를 통해 웹 페이지에 삽입하는 결제 버튼으로, One‑Touch, 구독, 카드 결제 등 다양한 옵션을 지원합니다.

  • 기존의 리디렉션 방식과 달리 팝업 혹은 인라인 형태로 결제 과정을 진행해 사용자 흐름을 끊지 않으며, 모바일에서도 최적화된 UI를 제공합니다.

Tip: SDK를 불러올 때는 client-id와 currency 파라미터만 지정하면 기본 버튼이 자동 렌더링됩니다.

html

<script src='https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&currency=KRW'></script>

<div id='paypal-button-container'></div>

<script>

  paypal.Buttons().render('#paypal-button-container');

</script>

# 2️⃣ about:blank 플래시 문제, 왜 발생했을까?

과거 PayPal 버튼 클릭 시 about:blank 페이지가 0.2~0.5초 동안 깜빡이며 플래시 현상을 일으켰습니다.

  • 원인: 결제 팝업을 열기 전, 브라우저가 보안 정책에 따라 새 창을 미리 생성하면서 빈 페이지를 띄우는 것이었습니다.

  • 영향: 페이지가 깜빡이면 사용자는 “버튼이 안 작동한다”는 오해를 할 수 있어 전환율이 떨어집니다.

# 2025년 해결책 – renderTo 옵션 사용

PayPal은 최신 SDK(버전 6.0 이상)에서 renderTo 옵션을 도입해, 팝업을 바로 인라인 iframe으로 교체하도록 했습니다. 이 옵션을 사용하면 about:blank 페이지가 전혀 나타나지 않습니다.

javascript

paypal.Buttons({

  renderTo: '#paypal-button-container' // 팝업 대신 인라인 렌더링

}).render('#paypal-button-container');

주의: renderTo는 최신 브라우저에서만 지원되므로, 구형 브라우저를 지원해야 할 경우 폴백(fallback) 코드를 추가하는 것이 좋습니다.

# 3️⃣ 영구 팝업(never‑closing popup) 문제와 최신 대응 방법

이 문제는 결제 흐름이 끝난 뒤 window.close() 호출이 실패하면서 팝업이 남아 있는 현상입니다.

  • 주된 원인: 팝업이 다른 도메인(PayPal)에서 열렸고, 결제 완료 후 same‑origin 정책 때문에 스크립트가 팝업을 닫지 못했습니다.

  • 전통적 해결법: onApprove 콜백 안에서 window.location.reload() 혹은 수동 닫기 스크립트를 넣는 것이었지만, UX가 좋지 않았습니다.

# 2025년 최신 API – onCancel·onError와 close 메서드

PayPal은 onApprove 콜백에 actions.close() 메서드를 제공해, 결제 성공 시 자동으로 팝업을 닫도록 했습니다. 또한 onCancel, onError 에서도 동일하게 actions.close()를 호출하면 영구 팝업을 방지할 수 있습니다.

javascript

paypal.Buttons({

  createOrder: function(data, actions) {

    return actions.order.create({

      purchase_units: [{ amount: { value: '10000' } }]

    });

  },

  onApprove: function(data, actions) {

    return actions.order.capture().then(function(details) {

      // 결제 성공 처리

      alert('결제가 완료되었습니다! ' + details.payer.name.given_name);

      // 팝업 자동 닫기

      actions.close();

    });

  },

  onCancel: function (data, actions) {

    // 사용자가 결제를 취소했을 때 팝업 닫기

    actions.close();

  },

  onError: function (err) {

    console.error(err);

    actions.close();

  }

}).render('#paypal-button-container');

핵심: actions.close()는 PayPal SDK 내부에서 팝업을 안전하게 닫아주므로, 별도 window.close() 코드를 넣을 필요가 없습니다.

# 4️⃣ 실전 적용 팁 – 초보자를 위한 체크리스트

| 체크 항목 | 적용 방법 | 비고 |

|----------|-----------|------|

| SDK 최신 버전 사용 | <script src='https://www.paypal.com/sdk/js?...&v=6.0'></script> | 버전 명시가 없으면 최신 자동 적용 |

| renderTo 옵션 적용 | paypal.Buttons({ renderTo: '#container' }) | 인라인 결제 UI 권장 |

| actions.close() 활용 | onApprove, onCancel, onError에 추가 | 영구 팝업 방지 |

| 폴백 코드 준비 | if (!window.PayPal) 등 | 구형 브라우저 대비 |

| 테스트 환경 구축 | PayPal Sandbox 사용 | 실제 결제 전 반드시 검증 |

# 🚀 결론 – 지금 바로 적용하고 결제 경험을 업그레이드하세요!

2025년 현재, PayPal 스마트 버튼은 about:blank 플래시와 결제 팝업 문제를 공식 SDK 업데이트만으로 손쉽게 해결할 수 있습니다. 최신 renderTo 옵션과 actions.close() 메서드를 적용하면, 깜빡이는 빈 페이지와 영구 팝업 때문에 발생하던 사용자 불만을 크게 줄일 수 있습니다.

초보 개발자라면 위 체크리스트를 따라 단계별로 구현해 보세요. 작은 설정 하나가 결제 전환율을 10% 이상 끌어올릴 수도 있습니다.

행동 유도

  1. 지금 사용 중인 PayPal SDK 버전을 확인하고 최신 버전으로 교체하기

  2. renderTo 옵션과 actions.close()를 코드에 적용해 보기

  3. Sandbox 환경에서 테스트 후, 실제 서비스에 배포하기

궁금한 점이나 구현 중 어려운 부분이 있다면 댓글로 알려 주세요! 여러분의 성공적인 결제 구현을 응원합니다. 🙌

이 글은 SEO 최적화를 위해 PayPal 스마트 버튼, about:blank 플래시, 결제 팝업 문제 키워드를 포함했습니다.

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog