Search

PortPone(๊ตฌ ์•„์ž„ํฌํŠธ) ๊ฒฐ์ œ๋ชจ๋“ˆ ์—ฐ๋™

PortPone ํฌํŠธ์› ๊ฒฐ์ œ๋ชจ๋“ˆ ์—ฐ๋™

SPRING_PROJECT
ALOHA-CLASS
โ€ข
ํฌํŠธ์›
โ€ข
ํฌํŠธ์› ๊ฐ€์ž… ๋ฐ ๋กœ๊ทธ์ธ
โ€ข
๊ด€๋ฆฌ์ž ์ฝ˜์†”
โ€ข
๊ฒฐ์ œ ์—ฐ๋™
โ€ข
๊ฒฐ์ œ ๋Œ€ํ–‰์‚ฌ ์„ค์ •
โ€ข
ํฌํŠธ์› ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ถ”๊ฐ€
โ€ข
๊ฐ์ฒด ์ดˆ๊ธฐํ™” ํ•˜๊ธฐ
โ€ข
๊ฒฐ์ œ ์š”์ฒญํ•˜๊ธฐ
โ€ข
๊ฒฐ์ œ ๊ฒฐ๊ณผ ์ฒ˜๋ฆฌํ•˜๊ธฐ
โ€ข
ํ…Œ์ŠคํŠธ

ํฌํŠธ์›

ํฌํŠธ์› ๊ฐ€์ž… ๋ฐ ๋กœ๊ทธ์ธ

๊ด€๋ฆฌ์ž ์ฝ˜์†”

๊ฒฐ์ œ ์—ฐ๋™

๊ฒฐ์ œ ๋Œ€ํ–‰์‚ฌ ์„ค์ •

ํฌํŠธ์› ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ถ”๊ฐ€

๊ฐ์ฒด ์ดˆ๊ธฐํ™” ํ•˜๊ธฐ

// 2๏ธโƒฃ ๊ฐ์ฒด ์ดˆ๊ธฐํ™” ํ•˜๊ธฐ var IMP = window.IMP; IMP.init('๊ฐ€๋งน์  ์‹๋ณ„์ฝ”๋“œ')
JavaScript
๋ณต์‚ฌ

๊ฒฐ์ œ ์š”์ฒญํ•˜๊ธฐ

โ€ข
๋ฐ์ดํ„ฐ ์ž…๋ ฅ
<h1>๊ฒฐ์ œ ๋ชจ๋“ˆ ์—ฐ๋™</h1> <h3>PortOne PG์‚ฌ ์—ฐ๋™ํ•˜๊ธฐ</h3> <table> <tr> <td><label for="productName">์ƒํ’ˆ๋ช…</label></td> <td><input type="text" name="productName" id="productName" placeholder="์ƒํ’ˆ๋ช…" value="๊ธฐ๋ณธ ์ƒํ’ˆ"></td> </tr> <tr> <td><label for="price">๊ฒฐ์ œ๊ธˆ์•ก</label></td> <td><input type="text" name="price" id="price" placeholder="๊ฒฐ์ œ๊ธˆ์•ก" value="1000"></td> </tr> <tr> <td><label for="name">์ด๋ฆ„</label></td> <td><input type="text" name="name" id="name" placeholder="์ด๋ฆ„"></td> </tr> <tr> <td><label for="tel">์ „ํ™”๋ฒˆํ˜ธ</label></td> <td><input type="text" name="tel" id="tel" placeholder="์ „ํ™”๋ฒˆํ˜ธ"></td> </tr> <tr> <td><label for="email">์ด๋ฉ”์ผ</label></td> <td><input type="text" name="email" id="email" placeholder="์ด๋ฉ”์ผ"></td> </tr> <tr> <td><label for="address">์ฃผ์†Œ</label></td> <td><input type="text" name="address" id="address" placeholder="์ฃผ์†Œ"></td> </tr> <tr> <td><label for="postcode">์šฐํŽธ๋ฒˆํ˜ธ</label></td> <td><input type="text" name="postcode" id="postcode" placeholder="์šฐํŽธ๋ฒˆํ˜ธ"></td> </tr> </table> <div> <button onclick="requestPay()">๊ฒฐ์ œํ•˜๊ธฐ</button> </div>
HTML
๋ณต์‚ฌ
โ€ข
๊ฒฐ์ œ ์š”์ฒญํ•˜๊ธฐ
var today = new Date(); var hours = today.getHours(); // ์‹œ var minutes = today.getMinutes(); // ๋ถ„ var seconds = today.getSeconds(); // ์ดˆ var milliseconds = today.getMilliseconds(); var makeMerchantUid = hours + minutes + seconds + milliseconds; // 3๏ธโƒฃ ๊ฒฐ์ œ ์š”์ฒญํ•˜๊ธฐ function requestPay() { // ๊ฒฐ์ œ ์ •๋ณด ๊ฐ€์ ธ์˜ค๊ธฐ let productName = document.getElementById('productName').value let price = document.getElementById('price').value let name = document.getElementById('name').value let tel = document.getElementById('tel').value let email = document.getElementById('email').value IMP.request_pay({ pg : 'kcp', // PG์‚ฌ pay_method : 'card', // ๊ฒฐ์ œ๋ฐฉ์‹ merchant_uid: "IMP"+makeMerchantUid, // ์ฃผ๋ฌธ๋ฒˆํ˜ธ(์ƒํ’ˆID) name : productName, // ์ƒํ’ˆ๋ช… amount : price, // ๊ฒฐ์ œ๊ธˆ์•ก buyer_email : email, // ๊ฒฐ์ œ์ž ์ด๋ฉ”์ผ buyer_name : name, // ๊ฒฐ์ œ์ž ์ด๋ฆ„ buyer_tel : tel, // ๊ฒฐ์ œ์ž ์ „ํ™”๋ฒˆํ˜ธ buyer_addr : address, // ๊ฒฐ์ œ์ž ์ฃผ์†Œ buyer_postcode : postcode, // ๊ฒฐ์ œ์ž ์šฐํŽธ๋ฒˆํ˜ธ // m_redirect_url : "success" // "๋ฆฌ๋””๋ ‰์…˜ URL", (๋ฆฌ๋””๋ ‰์…˜ ๋ฐฉ์‹์˜ ๊ฒฝ์šฐ callback์€ ์‹คํ–‰๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.) }, function (rsp) { // callback if (rsp.success) { // ๊ฒฐ์ œ ์„ฑ๊ณต console.log(rsp); // ๊ฒฐ์ œ ์™„๋ฃŒ ํŽ˜์ด์ง€๋กœ ์ด๋™ location.href = 'success?result=ok&proudctId=' + ("IMP"+makeMerchantUid) // ๋˜๋Š” ajax ์š”์ฒญ ์ฒ˜๋ฆฌ ํ›„ ์ด๋™ } else { // ๊ฒฐ์ œ ์‹คํŒจ console.log(rsp); } }); }
JavaScript
๋ณต์‚ฌ

๊ฒฐ์ œ ๊ฒฐ๊ณผ ์ฒ˜๋ฆฌํ•˜๊ธฐ

๊ฒฐ์ œ ์—ฐ๋™ ์ „์ฒด ์ฝ”๋“œ

โ€ข
index.html
โ€ข
success.html

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>๊ฒฐ์ œ ๋ชจ๋“ˆ</title> </head> <body> <h1>๊ฒฐ์ œ ๋ชจ๋“ˆ ์—ฐ๋™</h1> <h3>PortOne PG์‚ฌ ์—ฐ๋™ํ•˜๊ธฐ</h3> <table> <tr> <td><label for="productName">์ƒํ’ˆ๋ช…</label></td> <td><input type="text" name="productName" id="productName" placeholder="์ƒํ’ˆ๋ช…" value="๊ธฐ๋ณธ ์ƒํ’ˆ"></td> </tr> <tr> <td><label for="price">๊ฒฐ์ œ๊ธˆ์•ก</label></td> <td><input type="text" name="price" id="price" placeholder="๊ฒฐ์ œ๊ธˆ์•ก" value="1000"></td> </tr> <tr> <td><label for="name">์ด๋ฆ„</label></td> <td><input type="text" name="name" id="name" placeholder="์ด๋ฆ„"></td> </tr> <tr> <td><label for="tel">์ „ํ™”๋ฒˆํ˜ธ</label></td> <td><input type="text" name="tel" id="tel" placeholder="์ „ํ™”๋ฒˆํ˜ธ"></td> </tr> <tr> <td><label for="email">์ด๋ฉ”์ผ</label></td> <td><input type="text" name="email" id="email" placeholder="์ด๋ฉ”์ผ"></td> </tr> <tr> <td><label for="address">์ฃผ์†Œ</label></td> <td><input type="text" name="address" id="address" placeholder="์ฃผ์†Œ"></td> </tr> <tr> <td><label for="postcode">์šฐํŽธ๋ฒˆํ˜ธ</label></td> <td><input type="text" name="postcode" id="postcode" placeholder="์šฐํŽธ๋ฒˆํ˜ธ"></td> </tr> </table> <div> <button onclick="requestPay()">๊ฒฐ์ œํ•˜๊ธฐ</button> </div> <!-- 1๏ธโƒฃ ํฌํŠธ์› ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ถ”๊ฐ€ --> <script src="https://cdn.iamport.kr/v1/iamport.js"></script> <script> // 2๏ธโƒฃ ๊ฐ์ฒด ์ดˆ๊ธฐํ™” ํ•˜๊ธฐ var IMP = window.IMP; IMP.init('๊ฐ€๋งน์  ์‹๋ณ„์ฝ”๋“œ') var today = new Date(); var hours = today.getHours(); // ์‹œ var minutes = today.getMinutes(); // ๋ถ„ var seconds = today.getSeconds(); // ์ดˆ var milliseconds = today.getMilliseconds(); var makeMerchantUid = hours + minutes + seconds + milliseconds; // 3๏ธโƒฃ ๊ฒฐ์ œ ์š”์ฒญํ•˜๊ธฐ function requestPay() { // ๊ฒฐ์ œ ์ •๋ณด ๊ฐ€์ ธ์˜ค๊ธฐ let productName = document.getElementById('productName').value let price = document.getElementById('price').value let name = document.getElementById('name').value let tel = document.getElementById('tel').value let email = document.getElementById('email').value IMP.request_pay({ pg : 'kcp', // PG์‚ฌ pay_method : 'card', // ๊ฒฐ์ œ๋ฐฉ์‹ merchant_uid: "IMP"+makeMerchantUid, // ์ฃผ๋ฌธ๋ฒˆํ˜ธ(์ƒํ’ˆID) name : productName, // ์ƒํ’ˆ๋ช… amount : price, // ๊ฒฐ์ œ๊ธˆ์•ก buyer_email : email, // ๊ฒฐ์ œ์ž ์ด๋ฉ”์ผ buyer_name : name, // ๊ฒฐ์ œ์ž ์ด๋ฆ„ buyer_tel : tel, // ๊ฒฐ์ œ์ž ์ „ํ™”๋ฒˆํ˜ธ buyer_addr : address, // ๊ฒฐ์ œ์ž ์ฃผ์†Œ buyer_postcode : postcode, // ๊ฒฐ์ œ์ž ์šฐํŽธ๋ฒˆํ˜ธ // m_redirect_url : "success" // "๋ฆฌ๋””๋ ‰์…˜ URL", (๋ฆฌ๋””๋ ‰์…˜ ๋ฐฉ์‹์˜ ๊ฒฝ์šฐ callback์€ ์‹คํ–‰๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.) }, function (rsp) { // callback if (rsp.success) { // ๊ฒฐ์ œ ์„ฑ๊ณต console.log(rsp); // ๊ฒฐ์ œ ์™„๋ฃŒ ํŽ˜์ด์ง€๋กœ ์ด๋™ location.href = 'success?result=ok&proudctId=' + ("IMP"+makeMerchantUid) // ๋˜๋Š” ajax ์š”์ฒญ ์ฒ˜๋ฆฌ ํ›„ ์ด๋™ } else { // ๊ฒฐ์ œ ์‹คํŒจ console.log(rsp); } }); } </script> </body> </html>
HTML
๋ณต์‚ฌ

success.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>๊ฒฐ์ œ ์™„๋ฃŒ</title> </head> <body> <h1>๊ฒฐ์ œ ์™„๋ฃŒ</h1> <h3>๊ฒฐ์ œ๊ฐ€ ์„ฑ๊ณต์ ์œผ๋กœ ์ฒ˜๋ฆฌ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค!</h3> </body> </html>
HTML
๋ณต์‚ฌ

ํ…Œ์ŠคํŠธ

1.
๊ฒฐ์ œ ์ •๋ณด ์ž…๋ ฅ
2.
๊ฒฐ์ œ ์š”์ฒญ
3.
๊ฒฐ์ œ ์™„๋ฃŒ

๊ฒฐ์ œ ์ •๋ณด ์ž…๋ ฅ

๊ฒฐ์ œ ์š”์ฒญ

๊ฒฐ์ œ ์™„๋ฃŒ

Github (์†Œ์Šค์ฝ”๋“œ)