PayPalで決済させた後にシナリオ遷移させる方法

PayPal連携(スマートボタン支払い)

コンテンツページにPayPalスマートボタンを貼り付け、支払い完了でシナリオ遷移する方法について説明します。

ポイント
PayPalはアメリカの会社が運営する、インターネットを利用した決済サービスです。
現在、世界で3億アカウント以上登録されており、世界的には最もポピュラーなオンライン決済サービスとなります。
(※もちろん、日本語での電話・メールでのお問い合わせにも対応しています)

事前準備

  • PayPal ビジネスアカウント
    ペイパル決済を導入するために、ビジネスアカウント登録(無料)が必要です
  • プロライン シナリオ
    決済ページに誘導するシナリオ、決済完了後のシナリオを作成しておきます
  • プロライン コンテンツページ
    決済ボタンを埋め込むコンテンツページ・LP(決済ページ)を作成しておきます。商品の魅力などを記述しましょう
  • プロライン フォーム送信完了ページ
    決済成功後に表示されるフォーム送信完了ページ(サンクスページ)を作成しておきます。

PayPalでの操作

手順1:PayPal公式ページからビジネスアカウントにログインします

PayPal公式ページ https://www.paypal.com/jp/

手順2:トップメニューより[決済ボタン]を選択します

トップメニューの ツール> 決済ボタン を選択します。
※表示されていない場合は、 ツール> すべてのツール を選択し、表示されたページで[決済ボタン]を選択してください

手順3:決済ボタンの種類で[スマートボタン]を選択します

応用
上記画像右上の「Smart Subscribe」ボタンは、スマートボタンの定期課金版です。こちらを使うと定期課金作成でシナリオ移動が可能です。
ただし、課金時にシナリオ移動ではなく、定期課金作成時にシナリオ移動になる点はご注意ください。

手順4:決済ボタンの設定を行い、HTMLコードを取得します

決済ボタンの設定で価格や、説明文、デザイン(スタイル)を変更できます。
設定出来たら [コードのコピー]ボタンをクリックします。

※クリップボードにHTMLコードがコピーされます。後ほど使用しますので、メモ帳に貼り付けて保存しておくなどしておきましょう。

プロラインフリーでの操作

手順1:プロラインフリーにログインし、決済ボタンを埋め込むコンテンツページ・LP(決済ページ)の編集画面を開きます

本ツール(プロラインフリー)にログインしてコンテンツページ・LP > 対象のコンテンツページ を選択します

手順2:スマート決済ボタンを設置したい位置の万能エディタを開きます

※万能エディタはスマート決済ボタン用に新規作成しても構いません。

手順3: 対象の万能エディタを、テキスト(HTML)モードにします

万能エディタの編集画面で[テキスト(HTML)]をクリックします

手順4:スマート決済ボタンのHTMLコードを貼り付けます

スマート決済ボタンを表示したい位置に、PayPalで取得したHTMLコードを貼り付けます。

手順5:決済成功時に完了ページに遷移するように設定します。

貼り付けたコードの下方にある、onApprove:で始まる行を見つけます。

以下の記述を削除して、書き換えます。

onApprove: function(data, actions) {
    return actions.order.capture().then(function(orderData) {
    
    // Full available details
    console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));

    // Show a success message within this page, e.g.
    const element = document.getElementById('paypal-button-container');
    element.innerHTML = '';
    element.innerHTML = '

Thank you for your payment!

'; // Or go to another URL: actions.redirect('thank_you.html'); }); },

onApprove: function(data, actions) {
    return actions.order.capture().then(function(orderData) {
        location.href='[[fp1]]';
    });
},

※[[fp1]]の部分は、決済成功後に表示される完了ページ(サンクスページ)を指定します。[フィールド挿入]ボタンから挿入すると間違いがありません。

応用
手順3: で「Smart Subscribe」ボタンを選択した場合は、以下の記述を削除して、書き換えます。

onApprove: function(data, actions) {
  alert(data.subscriptionID); // You can add optional success message for the subscriber here
}

onApprove: function(data, actions) {
  location.href='[[fp1]]';
}

手順6:[保存]ボタンをクリックします

[保存]ボタンをクリックして、編集内容を保存します

手順7:決済成功後に表示される完了ページ(サンクスページ)の編集画面を開きます

登録フォーム(アンケート) > フォーム送信完了ページ > 対象のフォーム送信完了ページ を選択します

手順8:フォーム送信完了ページの要素にシナリオ移動を追加します

[シナリオ移動]ボタンをクリックして、要素を追加します。

フォーム送信完了ページにシナリオ移動を設定する

手順9:決済成功後に実行するシナリオ移動を選択します

「決済に誘導するシナリオ」から「決済完了後のシナリオ」に遷移するシナリオ分岐タグを選択します。

シナリオ移動を選択

 必ず、フォーム送信完了ページに追加してください。コンテンツページ・LPにシナリオ分岐タグを追加すると、決済前にシナリオ遷移してしまいます。

手順10:[保存]ボタンをクリックします

[保存]ボタンをクリックして、編集内容を保存します

手順11:決済ページに誘導するシナリオから、動作確認をしましょう

決済ページに誘導するシナリオから、決済ページを表示してPayPal決済、サンクスページへ転送されシナリオ遷移する。という流れを確認してみましょう。

PC版LINEの場合、動作に様々な制限がある事がございます。
その為、正確な動作確認をしたい場合は、スマホ版LINEアプリをご利用ください。

プロラインフリーの無料アカウントはこちらから
他では絶対にできない、LINEのステップ配信を含む『自動マーケティング』が遂に無料~で実現

プロラインフリーは、LINE公式アカウント専用のLINE集客ツールです。

通常、LINE公式アカウントの機能だけでは実現できない、シナリオ移動などを含めた複雑なLINEステップ配信や、コンテンツページの作成などが、プロラインフリーを使う事で実現できます。です。

多くの個人事業主、企業様が、このプロラインフリーを導入、集客の自動化に成功しています!

また、公式LINEのステップ配信ツールの多くは有料ですが、プロラインフリーは、送信数無制限にも関わらず無料で使う事ができます。