토스페이먼츠 브랜드페이

Javascript SDK
IMP.request_pay(
  {
    pg: "toss_brandpay.{상점 ID}",
    pay_method: "toss_brandpay",
    merchant_uid: "orderNo0001",
    name: "주문명:결제테스트",
    amount: 1004,
    buyer_email: "test@portone.io",
    customer_id: "d005f081-830a-4b9c-b5e2-73e56fbe6ac3",
    bypass: {
      isCulturalExpense: true,
    },
  },
  function (rsp) {
    // callback 로직
  },
);

Javascript SDK
IMP.request_pay(
  {
    pg: "toss_brandpay.{상점 ID}",
    pay_method: "toss_brandpay",
    merchant_uid: "orderNo0001",
    name: "주문명:결제테스트",
    amount: 1004,
    buyer_email: "test@portone.io",
    bypass: {
      toss_brandpay: {
        brandpayOptions: {
          ui: {
            buttonStyle: "default",
            highlightColor: "#3182f6",
            navigationBar: {
              visible: true,
              paddingTop: 10,
            },
            labels: {
              oneTouchPay: "원터치결제",
            },
          },
        },
      },
    },
  },
  function (rsp) {
    // callback 로직
  },
);

buttonStyle string

버튼스타일 구분코드

• 버튼 스타일입니다. 값을 넣지 않으면 기본값인 default로 설정됩니다.
• default로 설정하면 모서리가 둥글고 주변에 여백을 가진 버튼을 사용할 수 있고, full로 설정하면 하단 영역이 전부 채워지는 형태의 버튼을 사용할 수 있습니다.

highlightColor string

UI 메인 색상

• UI의 메인 색상입니다.
• 값을 넣지 않으면 기본 색상인 #3182f6로 설정됩니다.
• 웹에서 사용할 수 있는 색상 코드 형식을 모두 사용할 수 있습니다.

navigationBar.visible boolean

내비게이션 바 사용 여부

• 화면 뒤로 가기 기능을 제공하는 내비게이션 바 사용 여부입니다.
• 값을 넣지 않으면 기본값인 true로 설정됩니다.
• 내비게이션 바를 사용하지 않으려면 false로 설정해야 합니다.

navigationBar.paddingTop number

내비게이션 바 상단 여백

• 내비게이션 바 위쪽에 설정할 여백 값입니다. 값의 단위는 px입니다.

labels.oneTouchPay string

원터치결제 대체 텍스트

• UI에 표시되는 원터치결제를 대신해 사용할 텍스트입니다. 값을 넣지 않으면 원터치결제로 표시됩니다.

Javascript SDK
IMP.request_pay(
  {
    pg: "toss_brandpay.{상점 ID}",
    pay_method: "toss_brandpay",
    merchant_uid: "orderNo0001",
    name: "주문명:결제테스트",
    amount: 1004,
    buyer_email: "test@portone.io",
    customer_id: "d005f081-830a-4b9c-b5e2-73e56fbe6ac3",
    useCardPoint: true,
    display: {
      card_quota: [6],
    },
    bypass: {
      cashReceiptType: "personal",
      customerIdentifier: "01000000000",
      toss_brandpay: {
        methodId: "3nKLoSBV7l8zUHU14cZxK",
        discountCode: "001",
      },
    },
  },
  function (rsp) {
    // callback 로직
  },
);

기타 파라미터

아래 파라미터를 사용하기 위해서는 결제 수단 ID인 methodId를 지정하여 함께 결제 요청해야 합니다.

useCardPoint boolean

카드사 포인트 사용 여부

• 카드사 포인트를 사용 여부를 지정하는 값입니다.
• true 입력 시 카드사 포인트 사용이 가능하며, 입력하지 않는 경우 기본값은 false입니다.
• (단, 카드사 포인트를 사용하기 위해서는 사전에 토스페이먼츠를 통해 계약이 진행되어야 합니다.)

display.card_quota number array

카드 할부 개월 수

• 카드 결제 시 할부 개월 수를 지정할 수 있습니다.
• [3] 형식으로 전달하면 3개월 할부로 결제가 진행됩니다.
• (단, 일반적으로 결제금액이 5만원 이상일 때만 적용됩니다.)

bypass.cashReceiptType string

현금영수증 발급 타입

• unable로 설정시 현금영수증을 발행하지 않으며, personal로 설정 시에는 소득 공제용, corporate으로 설정 시에는 지출 증빙용으로 현금영수증을 발급합니다.
• anonymous으로 설정하는 경우 현금영수증 자진발급됩니다. 기본값은 unable입니다.

bypass.customerIdentifier string

현금영수증 발급 식별번호

• 현금영수증 발급을 위한 식별번호입니다.
• 현금영수증 종류에 따라 휴대폰번호, 사업자등록번호, 현금영수증 카드번호를 입력할 수 있습니다.

bypass.toss_brandpay.discountCode string

카드사 즉시 할인 코드

• 토스페이먼츠의 카드혜택 조회 API로 적용할 수 있는 할인 코드 목록을 조회할 수 있습니다.
• 해당 API는 포트원을 통해 지원이 불가능하므로, 직접 토스페이먼츠 API를 연동하여 사용해야 합니다.

브랜드페이 위젯 전용 파라미터

아래 파라미터를 사용하기 위해서는 결제 수단 ID인 methodId를 지정하여 함께 결제 요청해야 합니다.

methodType string

위젯에 보여줄 결제 수단

• 위젯에 보여줄 결제수단을 선택합니다.
• 카드, 계좌 중 하나입니다. 예를 들어 카드를 선택하면 등록한 결제수단 중 카드만 노출됩니다.

methodId string

위젯에서 기본 결제수단으로 선택할 결제수단의 ID

• 위젯을 열었을때, 해당 methodId에 해당하는 결제수단이 가장 먼저 보여집니다.
• 가장 최근에 결제한 카드를 보여주거나, 유저가 선호하는 카드를 보여줄 때 사용할 수 있습니다.

ui.promotionSection.summary.visible boolean

혜택 배지 영역 표시여부

• 해택 배지 영역에서는 즉시 할인 대상 카드 정보 등을 간략히 보여줍니다. 기본값은 true입니다.

ui.promotionSection.description.visible boolean

혜택 배지 영역 표시여부

• 결제 해택 영역을 보여주거나 숨깁니다. 기본값은 true입니다.

ui.promotionSection.description.defaultOpen boolean

결제 혜택 상세 설명 표시 여부

• 결제 혜택의 상세 설명을 보여주거나 숨깁니다.
• true인 경우, 결제 카드사의 결제 혜택을 자세히 설명합니다. 기본값은 false입니다.