V0.1

Quick Start

스텝페이에서 다음의 과정을 거쳐서 결제를 시작해볼 수 있습니다

위 과정은 스텝페이 앱 이용 또는 API 연동 두 가지 방법을 이용해 시작할 수 있습니다. 아래는 API 연동을 이용한 방법입니다.

STEP 1. 고객 생성

후에 주문을 생성하기 위해서는 고객 데이터가 필요합니다.
고객은 고객 API를 이용하여 추가, 생성할 수 있습니다.

고객 추가

가맹점에 새로운 고객을 추가할 수 있습니다.

URL

POST
1https://api.steppay.kr/api/customers

고객 추가 요청 예시

자세한 내용은 #고객 추가를 참고해주세요!

STEP 2. 상품 생성

마찬가지로 주문을 위해서는 상품이 필요합니다.
상품 생성은 상품 관리 API를 이용하여, 판매할 상품의 정보를 등록할 수 있습니다.

상품 생성

다양한 옵션을 선택하여 상품을 생성할 수 있습니다.

URL

POST
1https://api.steppay.kr/api/products

상품 생성 요청 예시

자세한 내용은 #상품 생성을 참고해주세요!

STEP 3. 주문 생성

먼저 고객과 상품이 생성이 되어야만 주문을 생성할 수 있습니다.
주문은 주문 API에서 생성할 수 있습니다.

주문 생성

결제 가능한 주문을 생성할 수 있습니다.

URL

POST
1https://api.steppay.kr/api/orders

주문 생성 요청 예시

자세한 내용은 #주문 생성을 참고해주세요!

STEP 4. 결제 링크 생성

다음과 같은 형식의 주소를 통해 스텝페이 결제화면을 사용할 수 있습니다.
API를 이용해 주문을 생성한 후 결제 연동을 하실 수 있습니다.
파라메터로 콜백 URL을 넘겨서 결제 후 처리를 할 수 있습니다.

GET
1https://api.steppay.kr/api/orders/${order_id}/pay

STEP 5. 결제 연동

다음 세 가지 방식을 이용하여 결제를 연동할 수 있습니다.

리다이렉트

결제주소로 직접 이동하여 처리하는 방식입니다.

예제 코드

1function redirectPay() {
2    var url = "https://api.steppay.kr/api/orders/1/pay?successUrl=https://your-site.com&errorUrl=https://your-site.com&cancelUrl=https://your-site.com";
3    window.location.href = url;
4}

팝업

팝업 형태로 결제 화면을 표시하는 방식입니다.

예제 코드

1function popupPay () {
2    var url = "https://api.steppay.kr/api/orders/1/pay?successUrl=https://your-site.com&errorUrl=https://your-site.com&cancelUrl=https://your-site.com";
3    var name = "popup test";
4    var option = "width = 425, height = 812, top = 100, left = 200, location = no";
5    window.open(url,name,option);
6}

iframe

iframe으로 현재 화면에 결제 화면을 포함시키는 방식입니다.

예제 코드

1function iframePay () {
2    const iframe = document.createElement("iframe");
3    iframe.id = "steppay__iframe";
4    iframe.src = "https://api.steppay.kr/api/orders/1/pay?successUrl=https://your-site.com&errorUrl=https://your-site.com&cancelUrl=https://your-site.com";
5    document.body.appendChild(iframe);
6}

Parameters

successURL : https://your-site.com/success
결제 성공 시 해당 주소로 리다이렉트 됩니다. 위 링크 주소는 예제입니다.

errorUrl : https://your-site.com/error
에러 발생 시 해당 주소로 리다이렉트 됩니다. 위 링크 주소는 예제입니다.

cancelUrl : https://your-site.com/cancel
결제 화면창의 닫기 버튼을 누를 시 해당 주소로 리다이렉트 됩니다. 위 링크 주소는 예제입니다.

cancelUrl을 제외한 나머지 주소로 리다이렉트 시 주문 아이디가 파라메터로 전달됩니다. ex) https://your-site.com?order_id=35

주문 아이디로 결제 상태를 확인하신 후 다음 작업을 진행하시면 됩니다.

팝업과 iframe 사용 시 권장사항

  • 결제 안정성을 위해서 인터랙션을 막는 것을 권장합니다.
  • width: 425px, height: 812px 지정을 권장합니다.