# 3. 결제 요청하기

{% hint style="warning" %}
**Deprecated**

이 문서는 더 이상 관리되지 않습니다.

[PortOne 개발자센터](https://developers.portone.io/)를 이용해주세요.
{% endhint %}

[**IMP 객체 초기화**](/docs/auth/guide/2..md)가 완료 되었으면 이제 결제창을 호출할 차례입니다.

결제창 호출시 필요한 [**파라미터**](/docs/sdk/javascript-sdk-old.md)**를 request\_pay** 함수 첫번째 파라미터 인자로 설정합니다.

{% tabs %}
{% tab title="JavaScript" %}

<pre class="language-javascript"><code class="lang-javascript">&#x3C;script>
  function requestPay() {
    IMP.request_pay({
      pg: "kcp.{상점ID}",
      pay_method: "card",
      merchant_uid: "ORD20180131-0000011",   // 주문번호
      name: "노르웨이 회전 의자",
      amount: 64900,                         // 숫자 타입
      buyer_email: "gildong@gmail.com",
      buyer_name: "홍길동",
      buyer_tel: "010-4242-4242",
      buyer_addr: "서울특별시 강남구 신사동",
      buyer_postcode: "01181"
    }, function (rsp) { // callback
      //rsp.imp_uid 값으로 <a data-footnote-ref href="#user-content-fn-1">결제 단건조회 API</a>를 호출하여 결제결과를 판단합니다.
      
    });
  }
&#x3C;/script>
</code></pre>

{% endtab %}

{% tab title="React.js" %}

```jsx
class RequestPay extends React.Component {
  requestPay = () => {
    IMP.request_pay({ // param
      pg: "kcp.{상점ID}",
      pay_method: "card",
      merchant_uid: "ORD20180131-0000011",
      name: "노르웨이 회전 의자",
      amount: 64900,
      buyer_email: "gildong@gmail.com",
      buyer_name: "홍길동",
      buyer_tel: "010-4242-4242",
      buyer_addr: "서울특별시 강남구 신사동",
      buyer_postcode: "01181"
    }, rsp => { // callback
      if (rsp.success) {
        ...,
        // 결제 성공 시 로직,
        ...
      } else {
        ...,
        // 결제 실패 시 로직,
        ...
      }
    });
  }
```

{% endtab %}

{% tab title="Vue.js" %}

```javascript
<script>
  export default {
    methods: {
      requestPay: function () {
        IMP.request_pay({ // param
          pg: "kcp.{상점ID}",
          pay_method: "card",
          merchant_uid: "ORD20180131-0000011",
          name: "노르웨이 회전 의자",
          amount: 64900,
          buyer_email: "gildong@gmail.com",
          buyer_name: "홍길동",
          buyer_tel: "010-4242-4242",
          buyer_addr: "서울특별시 강남구 신사동",
          buyer_postcode: "01181"
        }, rsp => { // callback
          if (rsp.success) {
            ...,
            // 결제 성공 시 로직,
            ...
          } else {
            ...,
            // 결제 실패 시 로직,
            ...
          }
        });
      }
    }
  }
</script>
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
**주문번호(merchant\_uid) 생성 시 유의사항**

* 주문번호는 결제창 요청 시 항상 **고유 값**으로 채번 되어야 합니다.
* 결제 완료 이후 **결제 위변조** 대사 작업시 주문번호를 이용하여 검증이 필요하므로 주문번호는 가맹점 서버에서 **고유하게**(unique)채번하여 **DB 상에 저장**해주세요
  {% endhint %}

현재까지 진행한 소스코드에 <mark style="color:red;">**결제 버튼을 추가**</mark>**한 샘플 코드**입니다.

{% code title="sample.html" %}

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- jQuery -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>
    <!-- iamport.payment.js -->
    <script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-1.2.0.js"></script>
    <script>
        var IMP = window.IMP; 
        IMP.init("impXXXXXXXXX"); 
    
        function requestPay() {
            IMP.request_pay({
                pg : 'kcp.{상점ID}',
                pay_method : 'card',
                merchant_uid: "57008833-33004", 
                name : '당근 10kg',
                amount : 1004,
                buyer_email : 'Iamport@chai.finance',
                buyer_name : '포트원 기술지원팀',
                buyer_tel : '010-1234-5678',
                buyer_addr : '서울특별시 강남구 삼성동',
                buyer_postcode : '123-456'
            }, function (rsp) { // callback
                //rsp.imp_uid 값으로 결제 단건조회 API를 호출하여 결제결과를 판단합니다.
            });
        }
    </script>
    <meta charset="UTF-8">
    <title>Sample Payment</title>
</head>
<body>
    <button onclick="requestPay()">결제하기</button> <!-- 결제하기 버튼 생성 -->
</body>
</html>
```

{% endcode %}

{% embed url="<https://youtu.be/Gq7r5AUoMKs>" %}
결제하기 버튼 생성 및 결제창 호출
{% endembed %}

{% embed url="<https://codepen.io/chaiport/pen/NWXrGvQ>" %}
결제창 예제
{% endembed %}

[^1]: [https://api.iamport.kr/payments/{imp\_uid}](https://api.iamport.kr/payments/%7Bimp_uid%7D)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://portone.gitbook.io/docs/auth/guide/3..md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
