電商網站開發 - 應用weebly (part 2 金流串接)

+

Website Solution

�

Advance – 金流服務串接 (PayPal)�

+

Outline

n Advance n 第三方金流支付基礎概念

n 免費快速建立銷售網站—Weebly.com n Weebly店鋪頁面簡介

n PayPal金流服務串接實作 n Weebly嵌入代碼元件 n PayPal賬戶申請與設定 n 串接Paypal與Weebly網站

n 成果展示與問答 (15 min)

YS, Fang. [email protected]

+


第三方金流支付基礎概念�

3

+3 Essentials to Commerce�

n 資訊流

n 物流（實體商品）

n 金流

n 支付界面的演進 n F2F, n PC/Internet n Mobile Devices with wireless connection ability


4

現代商業活動三元素

+Payment�

n 支票

n 轉帳、劃撥、eATM

n 信用卡

n 代收貨款

n 第三方支付 n PayPal, 支付寶, PayLink, 歐付寶, 第e支付…

n 行動支付

� YS, Fang. [email protected]

5

各式金流服務�

+ 3rd Party Payment�

第三⽅方⽀支付 YS, Fang. [email protected]

6

��

��$� �

��

��#��

��

��"! ��

+


建立銷售網站�

7

+建置銷售網站�


8

運用Weebly提供的店鋪頁面�



9

運用Weebly提供的店鋪頁面：缺點1�

沒有新台幣幣別�



10


沒有新台幣幣別�



11


支援刷卡, 但是要被抽成…�



12


支援PayPal服務, 但是要升級為付費用戶…�


13

自己動手做吧！� Step1. 運用Weebly 內嵌代碼(embed code)元件 Stpe2 . 申請 PayPal賬戶 Stpe3. 建立商品銷售按鈕 Step4. 將PayPal按鈕代碼嵌入Weebly網頁 Step5. 試用(網頁/手機)，完成！ �

+Use “Embed Code” component within Weebly Service.�

Step1 使用Weebly內嵌代碼元件

YS, Fang. [email protected] 14

+Step1 網站編輯進階操作�


15

內嵌程式碼（Embed Code）元件。可以寫程式碼了！�

+Step1 網站編輯進階操作�


16

內嵌程式碼（Embed Code）元件，提供自由組裝其他網站的能力，可將找到的HTML code整合到Weebly中，增加彈性。�

在網頁中的位置在 <body>… </body> 之間�

+Apply Your 3rd party payment account with PayPal.�

Step2 申請PayPal帳號


+ PayPal支付服務� https://www.paypal.com/�


18

+PayPal服務�


19

註冊 – 特選�

+ PayPal服務�


20

註冊 – 略過信用卡資訊�

+PayPal服務�


21

登入主畫面。�

+PayPal服務�


22

認證細節。� 以銀行帳戶或信用卡認證�

+Setup shopping payment Button (Link) with PayPal.�

Step3 設定PayPal購物支付按鈕連結


+建立支付按鈕�


24

點擊「產品與服務」�



25

可用線上支付方案，點選「網站付款標準版」（可一併產生電子郵件付款方案）�



26

使用結帳按鈕工廠�



27

結帳按鈕工廠-主畫面�



28

單一結帳按鈕-立即購�



29

單一結帳按鈕-立即購：設定細節�



30

單一結帳按鈕-立即購：產生HTML代碼貼回Weebly的Embed Code元件�

+Embed PayPal Button into Weebly Page�

Step4 將PayPal按鈕代碼嵌入Weebly網頁




32

單一結帳按鈕-立即購：Weebly的Embed Code元件操作�



33

單一結帳按鈕-立即購：產生HTML代碼貼回Weebly的Embed Code元件，完成畫面�

+Have a TEST!�

Step5 完成！用網頁/手機來試用看看吧！




35

PayPal結賬畫面 – 正確！（PayPal or 信用卡）



36

PayPal結賬畫面 – 正確！（信用卡付款，點選「沒有PayPal帳戶」）



37

PayPal結賬畫面 – 信用卡付款輸入界面完成！

+ PayPal support Different Checkout Interfaces. Compare following two.�


38

PayPal支援不同的結帳畫面。同樣是「立即購」，有分Desktop 與 Mobile版本。�

DESKTOP�

MOBILE�



39

PayPal結賬畫面 – 錯誤！（編碼問題）�



40

PayPal結賬畫面 – 錯誤！我的個人檔案à我的銷售工具àPayPal 按鈕語⾔言編碼

�

改為UTF-8�


41

你已經建立完成一個銷售網站了�

來些變化吧！ <加入購物車> <改變按鈕風格>�

+<加入購物車>�

一次結帳多個商品。




43

多筆結帳按鈕-購物車�



44

多筆結帳按鈕-購物車：設定細節�



45

多筆結帳按鈕-購物車：產生HTML代碼貼回Weebly的Embed Code元件�



46

多筆結帳按鈕-購物車：Weebly的Embed Code元件操作�



47

多筆結帳按鈕-購物車：Weebly的Embed Code元件操作，完成畫面�



48

多筆結帳按鈕-檢視購物車�



49

多筆結帳按鈕-檢視購物車：設定細節�



50

多筆結帳按鈕-檢視購物車：產生HTML代碼貼回Weebly的Embed Code元件�



51

多筆結帳按鈕-檢視購物車：Weebly的Embed Code元件操作�



52

多筆結帳按鈕-檢視購物車：Weebly的Embed Code元件操作，完成畫面�



53

「加到購物車」，跳轉後畫面。「檢視購物車」，跳轉後畫面。

+<改變按鈕風格>�

自訂購物按鈕進階技巧讓網站界面更專業。�


+自定義結帳按鈕外觀�


55

PayPal風格與網站不一致？We Can change it! 同樣的新增結帳按鈕，但「無法」新增選項。�

！不可添加選項�



56

PayPal風格與網站不一致？We Can change it! 選擇「電子郵件」，可見一個URL，貼回Weebly。



57

PayPal風格與網站不一致？We Can change it! 選擇「電子郵件」，可見一個URL，貼回Weebly。



58

PayPal風格與網站不一致？We Can change it! 使用Weebly-Button元件，完成一致風格的結帳按鈕。

PayPal標準按鈕�

使用付款URL，所自定義的結帳按鈕�



59

同樣的，可以產生 – 立即購、加到購物車、檢視購物車等三組按鈕。後續結帳操作流程與原本一致。



60

<!> 唯一的不足，無法選用下拉選單。 PayPal無法自動產生「電子郵件」結帳連結。

+Put All together! �

整合今日所學�


+金流整合�

n Weebly可免費、快速、簡易的建立電子商務網站的 [前端界面]

n PayPal可讓賣家透過它販賣商品並收費（刷口）的 [後端服務]

n 兩個獨立的工具，透過網站內嵌程式代碼，聯結在一起了！ n 簡單的程式運用 (Embed Code)�


62

前端（網站）＋後端（金流）�

+台灣的第三方支付服務�

n  https://firstpay.firstbank.com.tw/ (第一銀行) n  可製作類似PayPal的付款按鈕 n  https://firstpay.firstbank.com.tw/doc/簡易收款說明.pdf

n  https://www.pockii.com (中國信託) n  可製作單一收款HTML按鈕與整筆訂購單按鈕

n  http://www.allpay.com.tw/Service/FAQQuickPayNormal 歐付寶 n  更貼近台灣的使用行為

n  http://www.twq.com.tw/ (台灣支付) – 需邀請碼�


63

開始蓬勃發展！�

+回家作業�

n  對於前端、後端略懂略懂後。技術的價值在於能夠解決問題…

n  想想：有一家連鎖超商，遇到了一個問題：中午時段來客數都蠻少的，可以怎麼做來增加來客數呢？如果是你，你會怎麼做呢？


64

+ 問答時間FAQ�


65

電商網站開發 - 應用weebly (part 2 金流串接)

Business