Skip to content

Commit

Permalink
린트 오류 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@CirnoV
CirnoV committed Apr 16, 2024
1 parent 540a72e commit 028c605
Show file tree
Hide file tree
Showing 22 changed files with 2,884 additions and 2,784 deletions.
321 changes: 166 additions & 155 deletions src/content/docs/en/auth/guide-1/bill/rest-api.mdx
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions src/content/docs/en/auth/guide/2.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,20 @@ import Tab from "~/components/gitbook/tabs/Tab.astro";
import Tabs from "~/components/gitbook/tabs/Tabs.astro";
import Hint from "~/components/Hint.astro";

#### On the checkout page, initialize the IMP object using your [Merchant ID](../../ready/3).
On the checkout page, initialize the IMP object using your [Merchant ID](../../ready/3).

<Tabs>
<Tab title="JavaScript">
```javascript title="Client-side"
var IMP = window.IMP; // Can be omitted
IMP.init("Merchant ID"); // Example: imp00000000
var IMP = window.IMP; // Can be omitted
IMP.init("Merchant ID"); // Example: imp00000000
```
</Tab>

<Tab title="JavaScript (ES Next)">
```javascript title="Client-side"
const IMP = window.IMP; // Can be omitted
IMP.init("{Merchant ID}"); // Example: imp00000000a
const IMP = window.IMP; // Can be omitted
IMP.init("{Merchant ID}"); // Example: imp00000000a
```
</Tab>
</Tabs>
Expand Down
143 changes: 70 additions & 73 deletions src/content/docs/en/auth/guide/3.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,46 +11,44 @@ import Hint from "~/components/Hint.astro";

Once [**IMP object initialization**](2) is complete, you can open the payment window.

You can pass the [**parameters**](../../sdk/javascript-sdk/readme) required to call the payment window in
the first argument of the **request\_pay** function.
You can pass the [**parameters**](../../sdk/javascript-sdk/readme) required to call the payment
window in the first argument of the **request\_pay** function.

<Tabs>
<Tab title="JavaScript">
```javascript
<script>
function requestPay() {
IMP.request_pay({
pg: "kcp",
pay_method: "card",
merchant_uid: "ORD20180131-0000011", // Order ID
name: "Norway swivel chair",
amount: 64900, // Number
buyer_email: "[email protected]",
buyer_name: "Hong Gildong",
buyer_tel: "010-4242-4242",
buyer_addr: "Shinsa-dong, Gangnam-gu, Seoul",
buyer_postcode: "01181"
}, function (rsp) { // callback
if (rsp.success) {
...,
// Payment is successful
...
} else {
...,
// Payment failed
...
}
});
```ts
IMP.request_pay(
{
pg: "kcp",
pay_method: "card",
merchant_uid: "ORD20180131-0000011", // Order ID
name: "Norway swivel chair",
amount: 64900, // Number
buyer_email: "[email protected]",
buyer_name: "Hong Gildong",
buyer_tel: "010-4242-4242",
buyer_addr: "Shinsa-dong, Gangnam-gu, Seoul",
buyer_postcode: "01181",
},
function (rsp) {
// callback
if (rsp.success) {
// Payment is successful
} else {
// Payment failed
}
</script>
},
);
```
</Tab>

<Tab title="React.js">
```jsx
class RequestPay extends React.Component {
requestPay = () => {
IMP.request_pay({ // param
```tsx
export class RequestPay extends React.Component {
requestPay = () => {
IMP.request_pay(
{
// param
pg: "kcp",
pay_method: "card",
merchant_uid: "ORD20180131-0000011",
Expand All @@ -60,66 +58,65 @@ the first argument of the **request\_pay** function.
buyer_name: "Hong Gildong",
buyer_tel: "010-4242-4242",
buyer_addr: "Shinsa-dong, Gangnam-gu, Seoul",
buyer_postcode: "01181"
}, rsp => { // callback
buyer_postcode: "01181",
},
(rsp) => {
// callback
if (rsp.success) {
...,
// Payment is successful
...
} else {
...,
// Payment failed
...
}
});
}
},
);
};
}
```
</Tab>

<Tab title="Vue.js">
```javascript
<script>
export default {
methods: {
requestPay: function () {
IMP.request_pay({ // param
pg: "kcp",
pay_method: "card",
merchant_uid: "ORD20180131-0000011",
name: "Norway swivel chair",
amount: 64900,
buyer_email: "[email protected]",
buyer_name: "Hong Gildong",
buyer_tel: "010-4242-4242",
buyer_addr: "Shinsa-dong, Gangnam-gu, Seoul",
buyer_postcode: "01181"
}, rsp => { // callback
if (rsp.success) {
...,
// Payment is successful
...
} else {
...,
// Payment failed
...
}
});
}
}
}
</script>
```ts
export default {
methods: {
requestPay: function () {
IMP.request_pay(
{
// param
pg: "kcp",
pay_method: "card",
merchant_uid: "ORD20180131-0000011",
name: "Norway swivel chair",
amount: 64900,
buyer_email: "[email protected]",
buyer_name: "Hong Gildong",
buyer_tel: "010-4242-4242",
buyer_addr: "Shinsa-dong, Gangnam-gu, Seoul",
buyer_postcode: "01181",
},
(rsp) => {
// callback
if (rsp.success) {
// Payment is successful
} else {
// Payment failed
}
},
);
},
},
};
```
</Tab>
</Tabs>

<Hint style="info">
**Note - Creating an order ID (merchant\_uid)**

- The order number must always be assigned a **unique** **value** when the payment window is requested.
- The order number must always be assigned a **unique value** when the payment window is requested.
- After the payment process is complete, the server uses the order ID to retrieve the order information for **payment fraud check**. Be sure to create a **unique ID** on the merchant server and **store it in the DB**.
</Hint>

#### The following is the above sample code with the <mark style="color:red;">Pay button</mark> added.
The following is the above sample code with the <mark style="color:red;">Pay button</mark> added.

```html title="sample.html"
<!DOCTYPE html>
Expand Down
83 changes: 49 additions & 34 deletions src/content/docs/en/auth/guide/4/iframe.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ import Hint from "~/components/Hint.astro";

<Figure src="/gitbook-assets/en/spaces\_hTv8JEzyM5h4cYcL5StH\_uploads\_tTzTD0S6IF5zvCag4EKG\_image.png" caption="iframe example" />

#### Most payments that are processed in the PC environment can receive payment results through the callback function, which is the second argument of the request\_pay() function.
Most payments that are processed in the PC environment can receive payment results
through the callback function, which is the second argument of the request\_pay() function.

<Hint style="success">
For **PayPal** payments, the payment window is loaded as a **pop-up (new window)** in a PC environment and you can also receive the payment result through **m\_redirect\_url**.
Expand All @@ -26,64 +27,78 @@ import Hint from "~/components/Hint.astro";
<Tabs>
<Tab title="JavaScript">
```javascript title="client-side"
IMP.request_pay({
/* ...Omitted... */
}, function (rsp) { // callback
if (rsp.success) { // payment successful: payment accepted or virtual account issued
// HTTP request with jQuery
jQuery.ajax({
url: "{Merchant endpoint that receives server's payment info}",
method: "POST",
headers: { "Content-Type": "application/json" },
data: {
imp_uid: rsp.imp_uid, // Payment ID
merchant_uid: rsp.merchant_uid // Order ID
}
}).done(function (data) {
// Merchant server payment API call is successful
```ts title="client-side"
IMP.request_pay(
{
/* ...Omitted... */
},
function (rsp) {
// callback
if (rsp.success) {
// payment successful: payment accepted or virtual account issued
// HTTP request with jQuery
jQuery
.ajax({
url: "{Merchant endpoint that receives server's payment info}",
method: "POST",
headers: { "Content-Type": "application/json" },
data: {
imp_uid: rsp.imp_uid, // Payment ID
merchant_uid: rsp.merchant_uid, // Order ID
},
})
} else {
alert("Payment failed. Error: " + rsp.error_msg);
}
});
.done(function (data) {
// Merchant server payment API call is successful
console.log(data);
});
} else {
alert("Payment failed. Error: " + rsp.error_msg);
}
},
);
```
</Tab>

<Tab title="JavaScript (ES Next)">
```javascript title="client-side"
IMP.request_pay({
```ts title="client-side"
IMP.request_pay(
{
/* ...Omitted... */
}, rsp => { // callback
if (rsp.success) {
},
(rsp) => {
// callback
if (rsp.success) {
// HTTP request with axios
axios({
url: "{Endpoint that receives server's payment info}",
method: "post",
headers: { "Content-Type": "application/json" },
data: {
imp_uid: rsp.imp_uid,
merchant_uid: rsp.merchant_uid
}
merchant_uid: rsp.merchant_uid,
},
}).then((data) => {
// Server payment API call is successful
})
console.log(data);
});
} else {
alert(\`Payment failed. Error: \${rsp.error_msg}\`);
alert(`Payment failed. Error: ${rsp.error_msg}`);
}
});
},
);
```
</Tab>
</Tabs>

Based on the the payment result (sucess/fail) in the response object
([**rsp**](../../../sdk/javascript-sdk/readme)) returned after the payment process is complete, add the
post-payment processing logic in the **callback** function. When the payment is successful, add the
logic to **send the payment ID (imp\_uid) and order ID (merchant\_uid) to the server** as shown
([**rsp**](../../../sdk/javascript-sdk/readme)) returned after the payment process is complete, add
the post-payment processing logic in the **callback** function. When the payment is successful, add
the logic to **send the payment ID (imp\_uid) and order ID (merchant\_uid) to the server** as shown
above.

> For information about the response parameter passed to the **callback** function, refer to [<mark style="color:red;">**rsp**</mark>](../../../sdk/javascript-sdk/undefined-1).
<Hint style="danger">
The final payment result logic processing must be handled stably by using a [<mark style="color:red;">**webhook**</mark>](../../../result/webhook). If you don't set up a webhook, you may fail to receive the payment result.
The final payment result logic processing must be handled stably by using a [<mark style="color:red;">**webhook**</mark>](../../../result/webhook).
If you don't set up a webhook, you may fail to receive the payment result.
</Hint>
Loading

0 comments on commit 028c605

Please sign in to comment.