外部サービス連携

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

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

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

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

事前準備

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

PayPalでの操作

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

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

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

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

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

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

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

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

オートSNSでの操作

手順1：オートSNSフリーにログインし、決済ボタンを埋め込むコンテンツページ（決済ページ）の編集画面を開きます

本ツール（オートSNSフリー）にログインしてコンテンツページ ＞ 対象のコンテンツページ を選択します

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

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

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

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

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

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

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

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

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

alert('Transaction completed by ' + details.payer.name.given_name + '!');

↓

location.href='[[fp1]]';

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

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

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

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

完了ページ ＞ 対象の完了ページ を選択します

手順8：完了ページの要素にシナリオ分岐タグを追加します

[シナリオ分岐タグ]ボタンをクリックして、要素を追加します

手順9：決済成功後に実行するシナリオ分岐タグを選択します

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

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

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

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

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

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