D

Toss payments 개발자 커뮤니티•4w ago

페이팔 연동

페이팔 test 연동 하려고 하는데
const clientKey = "test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm"; // 페이팔과 계약된 클라이언트 키를 사용해주세요
const tossPayments = TossPayments(clientKey);
// 회원 결제
const customerKey = "Nxcl5YfA_4uWXExevjN8c";
const widgets = tossPayments.widgets({customerKey});

문서에 나와 있는 clientKey랑 customerKey 쓰면 연동이 되어야 하는게 맞나요?

일반결제 연동에는 성공했는데 해외결제 연동하려고 할 시 결제 UI 설정에서 variantKey 따로 설정해줘야 하나요?

PayPal 앞으로 mid가 나왔는데, API 개별 연동키에서 mid 가 뜹니다. 공식 문서 말고 이 API 개별 연동키를 사용해도 되나요?

토스페이먼츠 BOT

토

토스페이먼츠 BOT•11/22/25, 6:37 AM

⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다

오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.

- 주문번호(orderId) : - 문의 내용 :

(문제가 발생한 이미지나 전체 결제흐름 동영상을 첨부해주시면 빠른 분석을 받으실 수 있습니다.)

* 계약관련 내용은 1544-7772로 문의주세요. * 주말/공휴일에는 답변이 늦을 수 있어요.

이실장

이

이실장•11/23/25, 11:48 PM

paypal계약된 mid알려주세요

Derrick

D

DerrickOP•11/24/25, 12:43 AM

qblacktddm 입니다

Kimoon Lee

K

Kimoon Lee•11/24/25, 12:50 AM

개발자 센터에 있는 위젯키를 사용해주세요.

Kimoon Lee

K

Kimoon Lee•11/24/25, 12:50 AM

https://developers.tosspayments.com/1246446/accounts/1888518/phases/test/api-keys

API 키 | 토스페이먼츠 개발자센터

토스페이먼츠 결제 연동 문서, API, 키, 테스트 내역, 웹훅 등록 등 개발에 필요한 정보와 기능을 확인해 보세요. 결제 연동에 필요한 모든 개발자 도구를 제공해 드립니다.

Derrick

D

DerrickOP•11/24/25, 3:20 AM

const setupPayPal = async () => {
if (!mounted) return;

const clientKey = "test_ck_24xLea5zVAJbPbp4zqG6rQAMYNwW";
const tossPayments = window.TossPayments(clientKey);

// 비회원 결제
const widgets = tossPayments.widgets({
customerKey: ANONYMOUS,
});

// 결제 금액 설정
await widgets.setAmount({
currency: "USD",
value: selectedPlan.priceUSD,
});

// PayPal UI 렌더링
await Promise.all([
widgets.renderPaymentMethods({
selector: "#payment-method",
variantKey: "PAYPAL",
}),
widgets.renderAgreement({
selector: "#agreement",
variantKey: "AGREEMENT",
}),
]);

// 버튼 가져오기
const button = document.getElementById("us-payment-button");

Derrick

D

DerrickOP•11/24/25, 3:21 AM

const handleClick = async () => {
try {
await widgets.requestPayment({
orderId: ,
orderName: selectedPlan.name,
successUrl: window.location.origin + "/success",
failUrl: window.location.origin + "/fail",
customerEmail:
localStorage.getItem("userEmail") "홍길동",
customerMobilePhone:
localStorage.getItem("userPhone") "홍길동",
address: {
country: "US",
line1: "123 Main St",
line2: "",
area1: "CA",
area2: "San Jose",
postalCode: "95112",
},
},

paymentMethodOptions: {
paypal: {},
},
},
});
} catch (err) {
console.error("PayPal Payment Error:", err);
alert("PayPal 결제 중 오류가 발생했습니다.");
}
};

Derrick

D

DerrickOP•11/24/25, 3:21 AM

paypal 결제창이 안뜨는데 이유를 모르겠습니다

Kimoon Lee

K

Kimoon Lee•11/24/25, 3:55 AM

test_ck_24xLea5zVAJbPbp4zqG6rQAMYNwW

Kimoon Lee

K

Kimoon Lee•11/24/25, 3:55 AM

이게 개발자 센터에 있는 위젯키가 아닌데요.

Kimoon Lee

K

Kimoon Lee•11/24/25, 3:56 AM

제가 드린 개발자 센터 위젯키를 사용하시기 바랍니다.

Derrick

D

DerrickOP•11/24/25, 4:59 AM

test_gck_26DlbXAaV0707M229vx03qY50Q9R

Derrick

D

DerrickOP•11/24/25, 4:59 AM

이거 아닌가요?

Derrick

D

DerrickOP•11/24/25, 4:59 AM

여전히 안됩니다

Kimoon Lee

K

Kimoon Lee•11/24/25, 5:04 AM

const clientKey = "test_ck_24xLea5zVAJbPbp4zqG6rQAMYNwW";

Kimoon Lee

K

Kimoon Lee•11/24/25, 5:04 AM

이렇게 넣었던 부분을 수정하신건가요?

Derrick

D

DerrickOP•11/24/25, 5:04 AM

넵

Kimoon Lee

K

Kimoon Lee•11/24/25, 5:06 AM

PAYPAL 이라는 variant 는 만드신건가요/

Kimoon Lee

K

Kimoon Lee•11/24/25, 5:07 AM

variantKey: "PAYPAL",

Kimoon Lee

K

Kimoon Lee•11/24/25, 5:07 AM

variant 는 뭘로 쓰시나요?

Derrick

D

DerrickOP•11/24/25, 5:09 AM

질문을 이해를 못했습니다.

Derrick

D

DerrickOP•11/24/25, 5:09 AM

https://docs.tosspayments.com/guides/v2/payment-widget/integration-paypal

PayPal 연동하기 | 토스페이먼츠 개발자센터

토스페이먼츠 결제위젯 SDK로 PayPal 해외 간편결제를 연동하는 가이드입니다. 결제위젯으로 간편하게 주문서 페이지의 결제 UI를 연동할 수 있기 때문에 해외 간편결제 연동에 추천하는 방법입니다.

Derrick

D

DerrickOP•11/24/25, 5:09 AM

공식 문서에 나와있는대로 했습니다

Kimoon Lee

K

Kimoon Lee•11/24/25, 5:11 AM

그건 샘플이고

Kimoon Lee

K

Kimoon Lee•11/24/25, 5:11 AM

https://dashboard.tosspayments.com/payment-widget-service/tm/1246446/ui-setting-list

Kimoon Lee

K

Kimoon Lee•11/24/25, 5:11 AM

여기에서 해당 VARIANT 를 만들어 주셔야 합니다.

Kimoon Lee

K

Kimoon Lee•11/24/25, 5:12 AM

만약 페이팔 결제창만 띄우실거라면 그냥

Kimoon Lee

K

Kimoon Lee•11/24/25, 5:12 AM

https://docs.tosspayments.com/guides/v2/payment-window

결제창 이해하기 | 토스페이먼츠 개발자센터

주문서 UI는 직접 만들고 각 결제수단의 결제창을 연동하세요.

Kimoon Lee

K

Kimoon Lee•11/24/25, 5:12 AM

이걸 보고 연동해 주세요.

Derrick

D

DerrickOP•11/24/25, 5:59 AM

dashboard에 variantKey를 설정해줘야 하는건 위젯이고, 결제창은 variantKey 설정없이 그냥 바로 띄우면 되는 것인가요?

Derrick

D

DerrickOP•11/24/25, 5:59 AM

https://docs.tosspayments.com/guides/v2/payment-window 이거 보고 결제창 연동까지는 됐는데, 주문서 페이지에서 팝업창을 띄우는 방식은 없나요? 아예 새로운 결제창 페이지로 넘어갑니다.

결제창 이해하기 | 토스페이먼츠 개발자센터

주문서 UI는 직접 만들고 각 결제수단의 결제창을 연동하세요.

Derrick

D

DerrickOP•11/24/25, 6:02 AM

const handleClick = async () => {
try {
await payment.requestPayment({
method: "FOREIGN_EASYPAY",
amount: {
currency: "USD",
value: selectedPlan.priceUSD * 1.1,
},
orderId: `order${Date.now()}`,
orderName: selectedPlan.name,
successUrl: window.location.origin + "/success",
failUrl: window.location.origin + "/fail",
customerEmail: localStorage.getItem("userEmail"),
customerName: localStorage.getItem("userFirstName"),
customerMobilePhone: localStorage.getItem("userPhone") || "01012345678",

// PayPal 옵션
foreignEasyPay: {
provider: "PAYPAL",
country: "US",
paymentMethodOptions: {
paypal: {
// PayPal STC 옵션
setTransactionContext: {
sender_account_id: "guest_01",
sender_first_name: "Guest",
sender_last_name: "User",
sender_email: "guest@example.com",
sender_phone: "(1) 123 456 7890",
sender_country_code: "US",
sender_create_date: "2021-01-01T00:00:00.000-00:00",
},
},
},
},
});
} catch (err) {
console.error("PayPal Payment Error:", err);
alert("PayPal 결제 중 오류가 발생했습니다.");
}
};

이걸로 연동한 페이팔 결제창은 실제로 결제되는 페이지인가요? 테스트용인가요?

Kimoon Lee

K

Kimoon Lee•11/24/25, 6:11 AM

네 주문서 페이지 팝업은 제공하지 않습니다. 필요하시다면 새창을 열고 그안에서 페이팔 창을 호출해 주세요.

Kimoon Lee

K

Kimoon Lee•11/24/25, 6:11 AM

테스트 키를 사용해서 열어주시면 테스트 용으로 뜹니다.

Derrick

D

DerrickOP•11/24/25, 6:42 AM

결제위젯은 주문서 페이지에서 결제위젯이 보인다는 차이만 존재하고, 결제위젯이랑 결제창은 결국에 동일하게 Paypal 자체 결제 페이지로 이동하는게 맞나요?

Kimoon Lee

K

Kimoon Lee•11/24/25, 6:50 AM

네 맞습니다.

토스페이먼츠 BOT

토

토스페이먼츠 BOT•11/24/25, 10:13 AM

❤️ 기술문의 경험이 어떠셨나요?!

간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.