리디렉션 기능이 있는 전자 지갑
PayPal, Klarna, Skrill 등 리디렉션 기능이 있는 전자 지갑은 사용자를 결제 시스템 웹사이트로 리디렉션하여 결제를 승인하고 확인한 후 판매자의 웹사이트로 돌아갑니다. 이 방법은 판매자가 사용자 결제 데이터에 액세스할 수 없으므로 결제 보안이 보장됩니다.
아래 지침은 일례로 PayPal을 사용하여 리디렉션이 있는 전자 지갑을 통해 결제를 수락하는 헤드리스 체크아웃 구성에 대해 설명합니다.
PayPal 결제 후 사용자가 리디렉션되는 결제 상태 페이지를 생성합니다. 예:
https://example.com/return-page.html.결제 UI의 HTML 마크업에
psdk-status구성 요소를 추가하여 결제 상태를 표시합니다.
예:
Copy
- html
@if (showStatus) {
<psdk-status></psdk-status>
}
PayPal 양식을 표시할 페이지를 생성합니다. 예:
https://example.com/form-page.html.결제 수단 ID와 상태 페이지 URL을 지정하여 결제 UI를 초기화합니다.
예:
Copy
- typescript
await headlessCheckout.form.init({
paymentMethodId: 24, // PayPal payment ID
returnUrl: 'https://example.com/return-page.html',
});
- PayPal을 통해 결제하기 위해 사용자를 외부 페이지로 리디렉션하는
redirect이벤트 처리를 추가합니다. 구매를 완료하면 사용자가 결제 상태 페이지(https://example.com/return-page.html)로 리디렉션됩니다.
예:
Copy
- typescript
headlessCheckout.form.onNextAction((nextAction) => {
switch (nextAction.type) {
case 'redirect':
this.handleRedirectAction(nextAction);
}
});
private handleRedirectAction(redirectAction: RedirectAction): void {
const url = this.buildRedirectUrl(redirectAction);
window.location.href = url; // redirect to PayPal page
}
private buildRedirectUrl(redirectAction: RedirectAction): string {
const url = new URL(redirectAction.data.redirect.redirectUrl);
const params = Object.entries(redirectAction.data.redirect.data);
params.forEach((entry) => {
const [key, value] = entry;
url.searchParams.append(key, value);
});
return url.toString();
}
이 기사가 도움이 되었나요?
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.
