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決済、サンクスページへ転送されシナリオ遷移する。という流れを確認してみましょう。