브랜드페이 JavaScript SDK

브랜드페이 JavaScript SDK는 브라우저 환경에서 사용할 수 있는 SDK(Software Development Kit)로, 브랜드페이 결제와 관련한 메서드를 제공합니다. SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.

SDK 추가

<script> 태그로 설치하기

결제창을 연동할 HTML 페이지에 브랜드페이 JavaScript 파일을 추가합니다.

스크립트 로드가 완료되면 전역 객체(window)에 BrandPay가 생성됩니다. 이 함수를 이용해서 초기화를 진행할 수 있습니다.

index.html
<head>
<title>브랜드페이로 결제하기</title>
<!-- 1. 스크립트 추가 -->
<script src="https://js.tosspayments.com/v1/brandpay"></script>
</head>
<script> var clientKey = 'test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq' // 테스트용 클라이언트 키 var customerKey = '' // 고객을 식별할 수 있는 키 // 2. 초기화 var brandpay = BrandPay(clientKey, customerKey, { redirectUrl: 'http://example.com', ui: { buttonStyle: 'full', highlightColor: '#26C2E3', labels: { oneTouchPay: '바로페이', }, }, }) </script>
HTML

초기화는 SDK를 사용하기 위한 설정 작업입니다. 설치된 SDK에 포함된 메서드를 사용할 수 있도록 객체를 만들고, 클라이언트 키 값을 통해 상점을 구분할 수 있습니다.

클라이언트 키와 customerKey, 리다이렉트 URL을 SDK에서 제공하는 BrandPay 함수에 넣고 실행하면 초기화된 객체가 생성됩니다. 토스페이먼츠에서 제공하는 테스트용 클라이언트 키는 개발 설정 페이지에서 확인할 수 있습니다. 가맹점에서 고객을 특정하기 위해 사용하는 값을 customerKey로 사용할 수 있도록 준비해주세요.

패키지 매니저로 설치하기

브랜드페이 JavaScript SDK는 npm 패키지로도 제공됩니다. 사용하는 패키지 매니저에 따라 아래 명령어로 SDK를 설치해보세요.

npm install @tosspayments/brandpay-sdk
{
"name": "brandpay-test",
"version": "1.0.0",
"description": "토스페이먼츠 테스트 프로젝트",
"main": "app.js",
"author": "김커넥",
"dependencies": {
"@tosspayments/brandpay-sdk": "^1.0.0"
}
}
JSON

설치가 잘 되었다면 loadBrandPay 함수를 불러옵니다.

아래와 같이 loadBrandPay에 클라이언트 키, customerKey, 리다이렉트 URL 파라미터를 넣고 함수를 실행하면 초기화된 객체가 생성됩니다.

import { loadBrandPay } from '@tosspayments/brandpay-sdk'
const clientKey = 'test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq'
// async/await을 사용하는 경우
async function main() {
const brandpay = await loadBrandPay(clientKey, customerKey, {
redirectUrl: 'http://example.com',
})
}
// Promise를 사용하는 경우
loadBrandPay(clientKey).then(brandpay => {
// ...
})
JavaScript

브랜드페이 SDK의 npm 패키지는 패키지 내부에 브랜드페이 JavaScript SDK 소스코드를 포함하지 않습니다. 동적으로 HTML에 https://js.tosspayments.com/v1/brandpay 코드를 삽입하는 역할을 합니다. 따라서 사용하는 번들러의 번들링 대상에 포함되지 않습니다.

UI 옵션 설정하기

BrandPay 함수의 세번째 파라미터는 인증을 위해 필수적인 리다이렉트 URL, 선택적으로 적용할 수 있는 UI 옵션으로 이루어져 있습니다.

var brandpay = BrandPay(clientKey, customerKey, {
redirectUrl: 'http://example.com',
ui: {
highlightColor: '#26C2E3',
buttonStyle: 'full',
labels: {
oneTouchPay: '바로페이',
},
},
})
JavaScript

초기화 파라미터

  • redirectUrl 필수 · string

    리다이렉트 URL은 고객이 브랜드페이를 사용해서 결제할 수 있다는 권한을 증명하는 과정에서 필요한 필수 파라미터입니다. 고객이 브랜드페이 사용 약관에 동의하면 Access Token을 발급하기 위해 필요한 정보를 브랜드페이 서버에서 리다이렉트 URL과 함께 넘겨주기 때문입니다. 개발 설정 페이지에 이 값이 추가되어 있어야 합니다.

  • ui string

    UI 커스터마이징 옵션을 담은 객체입니다. 각 파라미터 옵션에 따라 달라지는 결제창 UI는 아래 이미지를 참고하세요.

    • buttonStyle string

      버튼 스타일입니다. 값을 넣지 않으면 기본값인 default로 설정됩니다.

      default로 설정하면 모서리가 둥글고 주변에 여백을 가진 버튼을 사용할 수 있고, full로 설정하면 하단 영역이 전부 채워지는 형태의 버튼을 사용할 수 있습니다.

      • default
      • full
    • highlightColor string

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

      • navigationBar object

        화면 뒤로 가기 기능을 제공하는 내비게이션 바 설정 정보입니다.

      • visible boolean

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

      • paddingTop number

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

    • labels object

      UI에 사용되는 커스텀 텍스트를 모아둔 객체입니다.

      • oneTouchPay string

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

UI 파라미터 옵션에 따라 달라지는 결제창 화면 예시

UI 옵션 이미지 1

UI 옵션 이미지 2

인증 결과 처리

requestPayment 실행 후 돌아온 인증 결과를 처리하는 방법에는 Promise로 처리하는 방법과 리다이렉트 URL로 처리하는 방법 두 가지가 있습니다.

성공

결제창에서 결제 요청 후 인증에 성공하면 아래와 같이 requestPayment가 반환하는 Promise가 resolve 됩니다. 이 때 돌아오는 결과 값을 이용해서 결제 승인을 요청하세요.

brandpay.requestPayment({
amount: 15000, // 결제 금액
orderId: '', // 주문에 대한 ID 값
orderName: '토스 티셔츠 외 2건', // 주문명
methodId: '', // 결제 수단 ID
customerEmail: 'customer@example.com', // 고객의 이메일 주소 (optional)
})
.then(function (result) {
// 상점 서버에서 구현한 결제 승인 API
return axios.post('https://merchant.com/shop/confirm-payment', result)
})
.then(function () {
// 승인 완료시 결제 성공 페이지로 리다이렉트
window.location.href = 'https://merchant.com/shop/payment-success'
})
JavaScript

돌아오는 결과 값은 아래와 같습니다.

{
"amount": "15000",
"methodId": "",
"orderId": "",
"paymentKey": ""
}
JSON
  • amount: 실제로 결제된 금액입니다.
  • methodId: 결제할 때 사용한 결제 수단의 ID입니다.
  • orderId: 상점에서 주문 건을 구분하기 위해 발급한 고유 ID입니다. 결제창을 열 때 requestPayment에 담아 보낸 값입니다.
  • paymentKey: 결제 건에 대한 고유한 키 값입니다.

결제 승인은 시크릿 키를 사용해야 하기 때문에 상점 서버에서 요청해야 합니다. 프론트엔드에서는 상점 서버로 결제 결과를 보내고, 상점 서버에서 토스페이먼츠 결제 승인 API를 호출해주세요.

paymentKey는 결제 승인 API에 Path 파라미터로 추가하고, orderIdamount 값은 요청 본문으로 함께 보냅니다.

import com.fasterxml.jackson.databind.JsonNode;
import org.springframework.http.*;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.client.RestTemplate;
import java.util.Base64;
import java.util.HashMap;
import java.util.Map;
@Controller
public class PaymentController {
private static final String SECRET_KEY = "test_sk_zXLkKEypNArWmo50nX3lmeaxYG5R";
private final RestTemplate restTemplate;
@Autowired
public PaymentController(RestTemplate restTemplate) {
this.restTemplate = restTemplate;
}
@RequestMapping(
method = RequestMethod.POST,
value = "/shop/confirm-payment"
)
public String confirmPayment(
@RequestParam("paymentKey") String paymentKey,
@RequestParam("orderId") String orderId,
@RequestParam("amount") Long amount,
Model model
) {
HttpHeaders headers = new HttpHeaders();
String authorization = Base64.getEncoder().encodeToString((SECRET_KEY + ":").getBytes());
headers.set("Authorization", "Basic " + authorization);
headers.setContentType(MediaType.APPLICATION_JSON);
Map<String, String> payloadMap = new HashMap<>();
payloadMap.put("orderId", orderId);
payloadMap.put("amount", String.valueOf(amount));
HttpEntity<Map<String, String>> request = new HttpEntity<>(payloadMap, headers);
String confirmRequestUrl = "https://api.tosspayments.com/v1/payments/" + paymentKey;
ResponseEntity<JsonNode> responseEntity = restTemplate.postForEntity(
confirmRequestUrl,
request,
JsonNode.class
);
if (responseEntity.getStatusCode() == HttpStatus.OK) {
JsonNode successNode = responseEntity.getBody();
// 커스텀 모델에 attribute 추가
model.addAttribute("orderId", successNode.get("orderId").asText());
return "success";
} else {
JsonNode failNode = responseEntity.getBody();
model.addAttribute("message", failNode.get("message").asText());
model.addAttribute("code", failNode.get("code").asText());
return "fail";
}
}
}
Java
const express = require("express")
const app = express()
const SECRET_KEY = "test_sk_zXLkKEypNArWmo50nX3lmeaxYG5R";
app.post("/shop/confirm-payment", async (req, res) => {
// 토스페이먼츠 서버로 결제 승인 요청
const response = await axios.post(
`https://api.tosspayments.com/v1/payments/${req.body.paymentKey}`,
{
headers: {
"Authorization": `Basic ${Buffer.from(`${SECRET_KEY}:`).toString("base64")}`,
"Content-Type": "application/json"
},
body: {
orderId: req.body.orderId,
amount: req.body.amount,
},
}
)
return res.status(200).send("OK")
})
JavaScript

언어별 코드 예제는 지속적으로 추가될 예정입니다.

실패

결제 인증에 실패한 경우에는 Promise의 catch 블록이 호출됩니다. catch 블록에서 상황에 맞게 에러를 처리해주세요.

brandpay.requestPayment({
amount: 15000,
orderId: '',
orderName: '토스 티셔츠 외 2건',
methodId: '',
customerEmail: 'customer@example.com'
}).then((result) => {
// 상점 서버에서 구현한 결제 승인 API로 결과 값 전달
return axios.post('https://merchant.com/shop/confirm-payment', result);
}).then(() => {
// 승인 완료 시 결제 성공 페이지로 리다이렉트
window.location.href = 'https://merchant.com/shop/payment-success';
}).catch((error) => {
// 인증 실패 처리
alert(error.message);
window.location.href = 'https://merchant.com/shop/payment-error';
});
JavaScript

처리할 에러 객체는 아래와 같습니다.

에러
{
"code": "DUPLICATED_ORDER_ID",
"message": "이미 승인 및 취소가 진행된 중복된 주문번호 입니다. 다른 주문번호로 진행해주세요.",
"orderId": ""
}
JSON
  • code: 오류 타입을 보여주는 에러코드입니다.
  • message: 에러 메시지입니다. 에러 발생 이유를 알려줍니다.
  • orderId: 상점에서 주문 건을 구분하기 위해 발급한 고유 ID입니다.

리다이렉트 URL로 처리하기

결제창 실행 후 결제 요청 결과에 따라 페이지를 이동시키는 리다이렉트 URL로 처리하는 방법도 지원합니다. 이 방법을 사용하려면 requestPayment를 호출할 때 파라미터로 successUrlfailUrl을 넘겨주어야 합니다.

결제 요청에 성공하면 메서드를 호출할 때 파라미터에 포함해서 보냈던 successUrl로 리다이렉트 됩니다.

successUrl에는 amount, methodId, orderId, paymentKey 네 가지 쿼리 파라미터가 들어있습니다.

https://{ORIGIN}/success?amount={AMOUNT}&methodId={METHOD_ID}&orderId={ORDER_ID}&paymentKey={PAYMENT_KEY}

돌아온 파라미터를 Path 파라미터, 요청 본문으로 포함해 결제 승인 API를 호출할 수 있습니다.

결제 요청에 실패하면 메서드를 호출할 때 파라미터에 포함해서 보냈던 failUrl로 리다이렉트 됩니다.

failUrlcode, message, orderId로 이루어져 있습니다.

https://{ORIGIN}/fail?code={ERROR_CODE}&message={ERROR_MESSAGE}&orderId={ORDER_ID}

응답 처리

모든 메서드 응답에 대해 성공 및 에러 처리를 동일한 방식으로 할 수 있습니다.

메서드를 실행하면 Promise 객체가 응답으로 돌아옵니다. Promise의 then 블록에서 성공 처리를 할 수 있습니다. catch 블록에서는 reject 된 에러를 이용해 아래와 같이 직접 취소 이벤트를 처리할 수 있습니다.

응답처리
brandpay
.getPaymentMethod() // 다른 메서드도 동일한 방식으로 처리됨
.then(function () {
// 성공 처리
})
.catch(function (error) {
if (error.code === 'USER_CANCEL') {
// 사용자가 창을 닫아 취소한 경우에 대한 처리
}
})
JavaScript

메서드

브랜드페이 JavaScript SDK에서 제공하는 메서드 목록입니다. 각 메서드의 용도와 파라미터, 응답 값을 살펴보세요.

휴대폰 본인 인증이 진행된 후에 메서드를 사용할 수 있습니다. 만약 휴대폰 본인 인증이 완료되지 않은 상태에서 메서드를 실행하면 휴대폰 본인 인증 과정을 먼저 거치게 됩니다.

setupPassword()

결제할 때 사용할 패스워드를 설정할 수 있는 메서드입니다.

메서드를 실행하면 Promise가 돌아오고, 비밀번호 설정이 완료되어 창이 닫히면 Promise가 fulfilled 상태로 변경됩니다.

brandpay.setupPassword()
.catch(function (error) {
if (error.code === 'USER_CANCEL') {
// 사용자가 창을 닫아 취소한 경우에 대한 처리
}
})
JavaScript

getPaymentMethods()

등록되어 있는 결제 수단을 조회하는 메서드입니다.

brandpay
.getPaymentMethods()
.then(function (methods) {
// 성공 처리
})
.catch(function (error) {
if (error.code === 'USER_CANCEL') {
// 사용자가 결제창을 닫은 경우 에러 처리
}
})
JavaScript

메서드를 실행하면 응답으로 Promise가 돌아옵니다. then 블록에서 등록된 결제 수단 정보를 확인할 수 있습니다. 이 데이터를 이용해서 결제 수단을 UI에 표시하는 작업을 할 수 있습니다.

각 결제 수단에 할당된 id 값은 결제 수단을 특정하는 값입니다. selectedMethodId 필드는 가장 최근에 등록했거나 사용한 결제 수단의 id 값을 보여줍니다. 전체 결제 수단의 등록 날짜와 최근 1달 이내에 사용한 결제 수단의 사용일을 비교해 가장 최근에 등록했거나 사용한 결제 수단의 id가 내려갑니다. 등록한 결제 수단이 없다면 null이 내려갑니다.

아래 예시에서는 등록되어 있는 카드 결제 수단이 없기 때문에 cards의 값이 null이고, selectedMethodId는 최근에 등록한 은행 계좌의 id 값입니다.

예시
{
"cards": null,
"accounts": [
{
"id": "b_aPz8LBLadxD6WVy4",
"methodKey": "b6vdX0wJDpj5mBZ1gQ4YVXe9DYzQparl2KPoqNbMGOkn9EW7y",
"accountName": "신한은행 계좌",
"accountNumber": "123***7890",
"alias": "내 계좌",
"bank": "신한",
"bankCode": "88",
"icon": "",
"iconUrl": "",
"registeredAt": "2022-06-07T10:00:43.838Z",
"status": "DISABLED",
"color": {
"background": "#006AB6",
"text": "#FFFFFF"
}
}
],
"isIdentified": true,
"selectedMethodId": "b_aPz8LBLadxD6WVy4",
}
JSON

addPaymentMethod('카드'|'계좌')

결제 수단을 등록할 수 있는 메서드입니다.

카드, 계좌 중 등록할 결제 수단을 파라미터로 추가하면 바로 해당 결제 수단 등록 창으로 연결됩니다. 파라미터 없이 실행하면 결제 수단을 선택하는 창으로 연결됩니다.

brandpay
.addPaymentMethod('카드')
.then(function (methods) {
// 성공 처리
})
.catch(function (error) {
if (error.code === 'USER_CANCEL') {
// 사용자가 결제창을 닫은 경우 에러 처리
}
})
JavaScript

결제 수단 등록창이 닫히면 Promise가 돌아옵니다. then 블록에서 등록된 결제 수단 정보를 확인할 수 있습니다.

selectedMethodId 값을 통해 가장 최근에 등록했거나 사용한 결제 수단 정보도 확인할 수 있습니다.

아래 예시는 새로운 카드 결제 수단을 등록한 뒤 결제 수단 정보가 어떻게 업데이트 되는 지 보여줍니다. 위 결제 수단 조회 메서드 예시에서 null이었던 cards에 값이 추가되고, selectedMethodId가 해당 결제 수단의 id로 변경된 것을 확인할 수 있습니다.

예시
{
"cards": [
{
"id": "m_Zzorzo1AJbaD78l5",
"alias": "카드 별칭",
"methodKey": "pa90ZoyegEOALnQvDd2VJ5vKkpRyN3Mj7X41mNW5kzKbwG6J",
"cardName": "현대비자플래티늄",
"cardNumber": "4330********1234",
"cardCompany": "현대",
"companyCode": "61",
"issueCompany": "현대",
"ownerType": "개인",
"cardType": "신용",
"installmentMinimumAmount": 10000,
"registeredAt": "2022-06-07T18:37:04+09:00",
"status": "ENABLED",
"icon": "icn-bank-square-hyundaicard",
"iconUrl": "https://static.toss.im/icons/png/4x/icn-bank-square-hyundaicard.png",
"cardImgUrl": "",
"color": {
"background": "#3C3C42",
"text": "#FFFFFF"
}
}
],
"accounts": [
{
"id": "b_aPz8LBLadxD6WVy4",
"methodKey": "b6vdX0wJDpj5mBZ1gQ4YVXe9DYzQparl2KPoqNbMGOkn9EW7y",
"accountName": "신한은행 계좌",
"accountNumber": "123***7890",
"alias": "내 계좌",
"bank": "신한",
"bankCode": "88",
"icon": "",
"iconUrl": "",
"registeredAt": "2022-06-07T10:00:43.838Z",
"status": "DISABLED",
"color": {
"background": "#006AB6",
"text": "#FFFFFF"
}
}
],
"isIdentified": true,
"selectedMethodId": "m_Zzorzo1AJbaD78l5"
}
JSON

requestPayment(결제 정보)

브랜드페이 결제창을 띄우는 메서드입니다. 결제 정보 객체를 파라미터로 추가해서 실행합니다.

brandpay.requestPayment({
amount: 15000,
orderId: '',
orderName: '토스 티셔츠 외 2건',
customerName: '박토스',
customerEmail: 'customer@example.com',
})
.then(function (data) {
// 결제 요청 성공 처리
})
.catch(function (error)) {
if (error.code === 'USER_CANCEL') {
// 사용자가 창을 닫아 취소한 경우에 대한 처리
}
})
JavaScript

결제 정보

  • amount 필수 · number

    결제되는 금액입니다.

  • orderId 필수 · string

    상점에서 주문 건을 구분하기 위해 발급한 고유 ID입니다.

  • orderName 필수 · string

    결제에 대한 주문명입니다. 예를 들면 생수 외 1건 같은 형식입니다.

  • successUrl string

    결제가 성공하고 나면 리다이렉트(Redirect)되는 URL입니다. 결제 승인 처리에 필요한 값들이 쿼리 파라미터(Query Parameter)로 함께 전달됩니다. 반드시 오리진(origin)을 포함해야 합니다. 예를 들면 https://www.example.com/success와 같은 형태입니다. 리다이렉트 URL 방식으로 결제 요청을 처리하고 싶을 때 추가해주세요.

  • failUrl string

    결제가 실패하면 리다이렉트되는 URL입니다. 에러 코드 및 에러 메시지가 쿼리 파라미터로 함께 전송됩니다. 반드시 오리진(origin)을 포함해야 합니다.

  • methodId string

    결제 수단 ID 입니다. 등록되어 있는 결제 수단 중 하나를 지정해서 바로 결제하고 싶을 때 사용합니다.

  • customerEmail string

    고객의 이메일 주소입니다.

  • shippingAddress string

    고객의 배송지 주소입니다. 부정거래탐지시스템(FDS, Fraud Detection System, 거래 정보와 고객 정보, 평소 거래 패턴 등을 분석해서 의심되는 전자금융거래를 탐지하고 차단하는 기술)에 사용할 수 있습니다.

  • taxFreeAmount string

    결제할 금액 중 면세 금액입니다. 값을 넣지 않으면 기본값인 0으로 설정됩니다.

    *면세 상점 혹은 복합 과세 상점일 때만 설정한 금액이 적용되고, 일반 과세 상점인 경우에는 적용되지 않습니다. 더 자세한 내용은 복합 과세 처리하기에서 살펴보세요.

  • cultureExpense boolean

    문화비로 지출했는지 여부입니다. (도서구입, 공연 티켓, 박물관·미술관 입장권 등)

    결제 수단이 계좌일 때만 사용할 수 있습니다.

  • cardInstallmentPlan string

    카드로 결제할 때 설정하는 할부 개월 수입니다. 값이 있으면 할부 개월 수가 고정된 상태로 결제창이 열립니다.

    값은 2부터 12까지 사용할 수 있습니다. 0이 들어가는 경우 할부가 아닌 일시불로 결제됩니다.

    값을 넣지 않으면 결제창에서 전체 할부 개월 수를 선택할 수 있습니다.

  • useCardPoint string

    카드로 결제할 때 설정하는 카드사 포인트 사용 여부입니다. 값을 주지 않으면 사용자가 카드사 포인트 사용 여부를 결정할 수 있습니다.

    이 값을 true로 주면 카드사 포인트 사용이 체크된 상태로 결제창이 열립니다. 이 값을 false로 주면 사용자는 카드사 포인트를 사용할 수 없습니다.

  • discountCode string

    카드로 결제할 때 설정하는 카드사의 할인 코드입니다.

    카드혜택 조회 API를 통해 적용할 수 있는 할인 코드의 목록을 조회할 수 있습니다.

  • cashReceipt string

    계좌이체로 결제할 때 현금영수증 발급 정보를 담는 객체입니다.

    • type string

      현금영수증의 종류입니다. 미발급소득공제지출증빙 중 하나입니다. 값이 있으면 결제창에 현금영수증이 입력된 채 열립니다.

    • registrationNumber string

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

openSettings()

브랜드페이에서 사용하는 결제 수단, 비밀번호, 원터치결제 사용을 관리하는 결제 관리창을 열 수 있습니다.

brandpay.openSettings().catch(function (error) {
if (error.code === 'USER_CANCEL') {
// 사용자가 창을 닫아 취소한 경우에 대한 처리
}
})
JavaScript

setupOneTouchPay()

원터치페이 설정창을 열어서 원터치페이 사용 여부를 설정할 수 있습니다. 원터치페이는 결제할 때 비밀번호 입력없이 바로 결제할 수 있는 기능입니다.

메서드를 실행하면 Promise가 돌아오고, 원터치페이 설정이 완료되어 창이 닫히면 Promise가 fulfilled 상태로 변경됩니다.

brandpay.setupOneTouchPay().catch(function (error) {
if (error.code === 'USER_CANCEL') {
// 사용자가 창을 닫아 취소한 경우에 대한 처리
}
})
JavaScript

toggleOneTouchPay()

원터치페이 설정창에 진입하지 않고 바로 끄거나 켤 때 사용합니다. 원터치페이는 결제할 때 비밀번호 입력없이 바로 결제할 수 있는 기능입니다. 설정이 꺼진 상태에서 켜진 상태로 바뀔 때는 비밀번호 입력창이 열리고, 비밀번호를 입력하면 설정이 완료됩니다. 켜진 상태에서 꺼진 상태로 바꿀 때는 바로 꺼진 상태로 설정이 변경됩니다.

켜짐 설정이 완료되었다면 isEnabledtrue로 돌아오고, 꺼짐 설정이 완료되었다면 isEnabledfalse로 돌아옵니다.

brandpay.toggleOneTouchPay().catch(function (error) {
if (error.code === 'USER_CANCEL') {
// 사용자가 창을 닫아 취소한 경우에 대한 처리
}
})
JavaScript

requestAgreement('빌링')

선택약관 동의 창을 띄우는 메서드입니다.

파라미터로 동의받을 선택약관 이름을 추가하면 해당 약관을 볼 수 있습니다. 현재 자동 결제를 위한 빌링 파라미터만 지원합니다.

brandpay.requestAgreement('빌링')
JavaScript

빌링을 설정하면 자동 결제 동의 약관 창을 열 수 있습니다. 동의가 완료되면 자동 결제에 대한 결제 실행 API를 사용할 수 있습니다.

메서드를 실행하면 Promise가 돌아오고, 약관동의가 완료되면 Promise가 fulfilled 상태로 변경됩니다.

응답
brandpay
.requestAgreement('빌링') // 자동 결제 선택 약관 동의 호출
.then(function () {
// 성공 처리
})
.catch(function (error) {
if (error.code === 'USER_CANCEL') {
// 사용자가 창을 닫아 취소한 경우에 대한 처리
}
})
JavaScript
내용이 도움 되셨나요?
  • 더 궁금한 내용이 있나요?
  • 코드 샘플을 참고하세요
  • 기술지원이 필요한가요?
    디스코드 채팅|이메일 보내기