今回はClickFunnelsの中でページにPayPalのボタンを入れていきましょう。
今回お届けするノウハウはこちら
Step1. PayPalで決済ボタンを作成する
通常はこういう決済ボタンですよね。stripeでハンドルしていてクレジットカードが受けられるようにしています。ここにカード情報を入れて購入と押した時に、一定のお客さんで買えないという人がいるので、PayPalでも決済が受けられるようにしていきましょう。ということで、PayPalのボタンを追加してきましょう。
まずは PayPal にいきましょう。PayPal にログインして上のところにすべてのツールというところがあるので、そこをクリックしてください。するとこの画面になります。
そしたら決済ボタンというところをクリックして開いていきましょう。今回選択するのは「今すぐ購入」です。クリックしました。少し読み込みに時間がかかります。
Step2. 商品の内容を設定する
そしたら早速埋めていきましょう。商品名は今回、Evergreen Factoryにしましょう。そして価格は日本円になっていることを確認して249,700円にしましょう。このあたりはこれで OK です。このままボタンを作りましょう。
Step3. PayPalのボタンの内容を設定する
そうすると見てください。ウェブサイトの方はウェブサイトに埋め込むような形で、こういうようにHTMLタグがついています。メールアドレスの方はこういうURLが発行されるので、この両方を使っていきます。
Step4. 「メールアドレス」のURLを使ってPayPalにリンクする方法
最初にボタンの方からいきます。まずはPayPalに飛ぶためのボタンをClickFunnelsで作っていきましょう。
ボタンエレメントを配置しました。そうしたら「PayPal で支払う」としましょう。あとはよりPayPal の色に近づけるために、Color Codeを検索していきましょう。PayPal color codeで検索すると出てくる、PayPalのHEX COLORというのが、PayPalのcolor codeです。
真ん中の色がPayPalっぽいので、これをコピーしましょう。そしてこのボタンの色のBG COLOR（Background Color）というところにペーストしていきます。似たようなボタンの色かもしれませんが、ちょっと PayPal らしくなりましたかね。あまり変わらないかもしれません。
そしたらこのボタンにACTIONをSETしていきましょう。まずは、SET ACTIONというところからWEBSITE URLを入れるところまできました。
そしたらPayPalの「メールアドレス」の方のURLをクリックしてきて、GO TO WEBSITE URLに入れましょう。＃が最初に入っているんですが、そこに上書きするような形で入れてください。Open in same Windowでいいと思います。同じWindowの中で開いていくという感じになります。Saveしましょう。
Step5. 「ウェブサイト」のURLを使ってPayPalにリンクする方法
そしたらもう1個は、よりPayPalらしい埋め込みのボタンを入れられるのでやっていきましょう。CUSTOM JS/HTMLを開いてください。そしてこの中のOpen Code Editorに、さっきのタグを貼り付けていきましょう。
PayPalに戻って「ウェブ サイト」の方で埋め込みコードをクリックすると、勝手に全選択されるので、コピーしましょう。そしてCode EditorにCustom Codeを貼り付けます。
Previewすると、ここで「PayPalで支払う」というのともう1個PayPalのが出てきてますが、左に寄っています。中央に戻したいのですが、例えばSETTINGSの辺に大体セットする場所がありますが、CUSTOM JS/HTMLは選べる項目がすごく少なくて、要はCodeの中で全部やってくれという話になっているのです。
なのでこういう場合は、Code Editorの中でcenterタグで両方を囲んであげましょう。そしたらうまくいくはずです。Saveしましょう。
僕もHTMLタグにすごく詳しいわけではないので、centerタグ、これは昔の方法かもしれませんけども、多分これでうまくいくと思います。もっと詳しい方はご自身の方法でやっていただければいいと思います。
するとこんな感じでうまく仕上がってきます。これをクリックするとPayPalに飛んで、PayPalの支払いリンクが出てくると思います。ということで今回は以上です。やってみてください。
