[Next.js][PayPal] 페이팔 버튼(subscription) 연결 + 태그라인 없애기

현재 구현하고 있는 웹의 결제 기능을, 페이팔을 사용해서 구현하기로 했다.

Nextjs 프로젝트에 페이팔 버튼을 넣는 건 react-paypal-js 패키지를 사용하면 쉽게 구현할 수 있다.

@paypal/react-paypal-js

---

그런데 버튼을 추가하고 보니 버튼 아래에 계속 제공: PayPal 이 거슬리게 떠있었다. 디자인을 위해서 해당 태그는 없애야 했다.

개발자 도구로 살펴보니 해당 글자는 paypal-button-tagline라는 클래스에 속해있어, css로 해당 클래스를 안 보이게 처리하려 했다.

그런데 좀 더 찾아보니까 관련된 버튼 속성이 있어서 쉽게 태그 라인을 없앨 수 있었다.

 

결론: PayPal button의 style에 tagline 속성을 추가하면 된다.

style: {
    tagline: false
}

 

더욱 자세한 내용은 관련 react-paypal-js 문서 참고

 

 

아래는 혹시 도움이 될까 싶어 첨부하는 코드입니당

import {CreateSubscriptionActions, OnApproveActions, OnApproveData, OnCancelledActions} from '@paypal/paypal-js';

export default function PaymentPayPalButton() {
  async function onApprove(data: OnApproveData, actions: OnApproveActions): Promise<void> {
    if (data.subscriptionID) {
      // ...
    }
  }
  async function onCancel(data: Record<string, unknown>, actions: OnCancelledActions) {
    // alert cancel message...
  }
  async function onError(err: Record<string, unknown>) {
    // alert error...
  }

  async function createSubscription(data: Record<string, unknown>, actions: CreateSubscriptionActions) {
    return actions.subscription.create({
      plan_id: process.env.NEXT_PUBLIC_PAYPAL_SUBSCRIBE ?? ''
    });
  }


  return (
    <>
      <PayPalScriptProvider options={{
        clientId: process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID ?? '',
        components: 'buttons',
        intent: 'subscription',
        vault: true,
      }}>
        <PayPalButtons
          style={{
              layout: 'horizontal',
              shape: 'rect',
              color: 'white',
              label: 'paypal',
              tagline: false
        }}
          onApprove={onApprove}
          onCancel={onCancel}
          onError={onError}
          createSubscription={createSubscription} />
      </PayPalScriptProvider>
    </>
  )
}

 

끗~