リダイレクト付きの電子財布
PayPal、Klarna、Skrillなどのリダイレクト付きの電子財布は、支払いを承認および確認するためにユーザーを決済システムのウェブサイトにリダイレクトし、その後、販売者のウェブサイトに戻ります。この方法では、販売者がユーザーの支払いデータにアクセスできないため、支払いの安全性が確保されます。
以下の説明では、PayPalを例にして、リダイレクトで電子財布経由の支払いを受け付けるヘッドレスチェックアウトの設定について説明します。
PayPalの支払い後にユーザーがリダイレクトされる支払状況ページを作成します。例えば、
https://example.com/return-page.htmlです。支払状況を表示するには、決済UIののHTMLマークアップに
psdk-statusコンポーネントを追加します。
例：
Copy
- html
1@if (showStatus) {
2 <psdk-status></psdk-status>
3}
PayPalフォームを表示するページを作成します。例えば、
https://example.com/form-page.htmlです。決済方法IDとステータスページURLを指定して、決済UIを初期化します。
例：
Copy
- typescript
1await headlessCheckout.form.init({
2 paymentMethodId: 24, // PayPal payment ID
3 returnUrl: 'https://example.com/return-page.html',
4});
- PayPalでの決済を実行できるように、ユーザーを外部ページへリダイレクトする
redirectイベントの処理を追加します。購入を完了すると、ユーザーは支払状況のページ（https://example.com/return-page.html）にリダイレクトされます。
例：
Copy
- typescript
1headlessCheckout.form.onNextAction((nextAction) => {
2 switch (nextAction.type) {
3 case 'redirect':
4 this.handleRedirectAction(nextAction);
5 }
6});
7
8private handleRedirectAction(redirectAction: RedirectAction): void {
9 const url = this.buildRedirectUrl(redirectAction);
10 window.location.href = url; // redirect to PayPal page
11}
12
13private buildRedirectUrl(redirectAction: RedirectAction): string {
14 const url = new URL(redirectAction.data.redirect.redirectUrl);
15 const params = Object.entries(redirectAction.data.redirect.data);
16 params.forEach((entry) => {
17 const [key, value] = entry;
18 url.searchParams.append(key, value);
19 });
20 return url.toString();
21}
この記事は役に立ちましたか？
ご意見ありがとうございました！
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。誤字脱字などのテキストエラーを見つけましたか？ テキストを選択し、Ctrl+Enterを押します。
