SlideShare a Scribd company logo
1 of 65
Download to read offline
+ 
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. ys.fang@thinkinviz.com
+ 
YS, Fang. ys.fang@thinkinviz.com 
第三方金流 
支付基礎概念 
3
+ 
3 Essentials to Commerce 
n 資訊流 
n 物流 (實體商品) 
n 金流 
n 支付界面的演進 
n F2F, 
n PC/Internet 
n Mobile Devices with wireless connection ability 
YS, Fang. ys.fang@thinkinviz.com 
4 
現代商業活動三元素
+ 
Payment 
n 支票 
n 轉帳、劃撥、eATM 
n 信用卡 
n 代收貨款 
n 第三方支付 
n PayPal, 支付寶, PayLink, 歐付寶, 第e支付… 
n 行動支付 
YS, Fang. ys.fang@thinkinviz.com 
5 
各式金流服務
#
! 	 
$  
 

 
+ 3rd Party Payment 
第三⽅方⽀支付 
YS, Fang. ys.fang@thinkinviz.com 
6
+ 
YS, Fang. ys.fang@thinkinviz.com 
建立銷售網站 
7
+ 建置銷售網站 
YS, Fang. ys.fang@thinkinviz.com 
8 
運用Weebly提供的店鋪頁面
+ 建置銷售網站 
YS, Fang. ys.fang@thinkinviz.com 
9 
運用Weebly提供的店鋪頁面:缺點1 
沒有新台幣幣別
+ 建置銷售網站 
YS, Fang. ys.fang@thinkinviz.com 
10 
運用Weebly提供的店鋪頁面:缺點1 
沒有新台幣幣別
+ 建置銷售網站 
YS, Fang. ys.fang@thinkinviz.com 
11 
運用Weebly提供的店鋪頁面:缺點2 
支援刷卡, 
但是要被抽成…
+ 建置銷售網站 
YS, Fang. ys.fang@thinkinviz.com 
12 
運用Weebly提供的店鋪頁面:缺點3 
支援PayPal服務, 
但是要升級為付費用戶…
YS, Fang. ys.fang@thinkinviz.com 
13 
自己動手做吧! 
Step1. 運用Weebly 內嵌代碼(embed code)元件 
Stpe2 . 申請 PayPal賬戶 
Stpe3. 建立商品銷售按鈕 
Step4. 將PayPal按鈕代碼嵌入Weebly網頁 
Step5. 試用(網頁/手機),完成!
+ Use “Embed Code” component 
within Weebly Service. 
Step1 使用Weebly內嵌代碼 
元件 
YS, Fang. ys.fang@thinkinviz.com 14
+ 
Step1 網站編輯進階操作 
YS, Fang. ys.fang@thinkinviz.com 
15 
內嵌程式碼(Embed Code)元件。 
可以寫程式碼了!
+ 
Step1 網站編輯進階操作 
YS, Fang. ys.fang@thinkinviz.com 
16 
內嵌程式碼(Embed Code)元件,提供自由組裝其他網站的 
能力,可將找到的HTML code整合到Weebly中,增加彈性。 
在網頁中的位置在 
body… /body 
之間
+ Apply Your 3rd party payment 
account with PayPal. 
Step2 申請PayPal帳號 
YS, Fang. ys.fang@thinkinviz.com 17
+ PayPal支付服務 
https://www.paypal.com/ 
YS, Fang. ys.fang@thinkinviz.com 
18
+ 
PayPal服務 
YS, Fang. ys.fang@thinkinviz.com 
19 
註冊 – 特選
+ 
PayPal服務 
YS, Fang. ys.fang@thinkinviz.com 
20 
註冊 – 略過信用卡資訊
+ 
PayPal服務 
YS, Fang. ys.fang@thinkinviz.com 
21 
登入主畫面。
+ 
PayPal服務 
YS, Fang. ys.fang@thinkinviz.com 
22 
認證細節。 
以銀行帳戶或信用卡 
認證
+ Setup shopping payment Button 
(Link) with PayPal. 
Step3 設定PayPal購物支付按鈕 
連結 
YS, Fang. ys.fang@thinkinviz.com 23
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
24 
點擊「產品與服務」
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
25 
可用線上支付方案,點選「網站付款標準版」 
(可一併產生電子郵件付款方案)
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
26 
使用結帳按鈕工廠
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
27 
結帳按鈕工廠-主畫面
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
28 
單一結帳按鈕-立即購
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
29 
單一結帳按鈕-立即購:設定細節
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
30 
單一結帳按鈕-立即購:產生HTML代碼 
貼回Weebly的Embed Code元件
+ 
Embed PayPal Button into Weebly Page 
Step4 將PayPal按鈕代碼嵌入 
Weebly網頁 
YS, Fang. ys.fang@thinkinviz.com 31
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
32 
單一結帳按鈕-立即購:Weebly的Embed Code元件操作
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
33 
單一結帳按鈕-立即購:產生HTML代碼 
貼回Weebly的Embed Code元件,完成畫面
+ 
Have a TEST! 
Step5 完成! 
用網頁/手機來試用看看吧! 
YS, Fang. ys.fang@thinkinviz.com 34
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
35 
PayPal結賬畫面 – 正確! 
(PayPal or 信用卡)
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
36 
PayPal結賬畫面 – 正確! 
(信用卡付款,點選「沒有PayPal帳戶」)
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
37 
PayPal結賬畫面 – 信用卡付款輸入界面 
完成!
+ PayPal support Different Checkout 
Interfaces. Compare following two. 
YS, Fang. ys.fang@thinkinviz.com 
38 
PayPal支援不同的結帳畫面。同樣是「立即購」,有分 
Desktop 與 Mobile版本。 
DESKTOP 
MOBILE
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
39 
PayPal結賬畫面 – 錯誤! 
(編碼問題)
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
40 
PayPal結賬畫面 – 錯誤! 
我的個人檔案à我的銷售工具àPayPal 按鈕語⾔言編碼 
改為UTF-8
YS, Fang. ys.fang@thinkinviz.com 
41 
你已經建立完成 
一個銷售網站了 
來些變化吧! 
加入購物車 
改變按鈕風格
+ 
加入購物車 
一次結帳多個商品。 
YS, Fang. ys.fang@thinkinviz.com 42
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
43 
多筆結帳按鈕-購物車
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
44 
多筆結帳按鈕-購物車:設定細節
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
45 
多筆結帳按鈕-購物車:產生HTML代碼 
貼回Weebly的Embed Code元件
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
46 
多筆結帳按鈕-購物車:Weebly的Embed Code元件操作
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
47 
多筆結帳按鈕-購物車:Weebly的Embed Code元件操作, 
完成畫面
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
48 
多筆結帳按鈕-檢視購物車
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
49 
多筆結帳按鈕-檢視購物車:設定細節
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
50 
多筆結帳按鈕-檢視購物車:產生HTML代碼 
貼回Weebly的Embed Code元件
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
51 
多筆結帳按鈕-檢視購物車:Weebly的Embed Code元件 
操作
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
52 
多筆結帳按鈕-檢視購物車:Weebly的Embed Code元件 
操作,完成畫面
+ 建立支付按鈕 
YS, Fang. ys.fang@thinkinviz.com 
53 
「加到購物車」,跳轉後畫面。 
「檢視購物車」,跳轉後畫面。
+ 
改變按鈕風格 
自訂購物按鈕進階技巧 
讓網站界面更專業。 
YS, Fang. ys.fang@thinkinviz.com 54
+ 自定義結帳按鈕外觀 
YS, Fang. ys.fang@thinkinviz.com 
55 
PayPal風格與網站不一致?We Can change it! 
同樣的新增結帳按鈕,但「無法」新增選項。 
!不可添加選項
+ 自定義結帳按鈕外觀 
YS, Fang. ys.fang@thinkinviz.com 
56 
PayPal風格與網站不一致?We Can change it! 
選擇「電子郵件」,可見一個URL,貼回Weebly。
+ 自定義結帳按鈕外觀 
YS, Fang. ys.fang@thinkinviz.com 
57 
PayPal風格與網站不一致?We Can change it! 
選擇「電子郵件」,可見一個URL,貼回Weebly。
+ 自定義結帳按鈕外觀 
YS, Fang. ys.fang@thinkinviz.com 
58 
PayPal風格與網站不一致?We Can change it! 
使用Weebly-Button元件,完成一致風格的結帳按鈕。 
PayPal標準按鈕 
使用付款URL, 
所自定義的結帳按鈕
+ 自定義結帳按鈕外觀 
YS, Fang. ys.fang@thinkinviz.com 
59 
同樣的,可以產生 – 立即購、加到購物車、檢視購物車 
等三組按鈕。後續結帳操作流程與原本一致。
+ 自定義結帳按鈕外觀 
YS, Fang. ys.fang@thinkinviz.com 
60 
! 唯一的不足,無法選用下拉選單。 
PayPal無法自動產生「電子郵件」結帳連結。
+ 
Put All together! 
整合今日所學 
YS, Fang. ys.fang@thinkinviz.com 61
+ 金流整合 
n Weebly可免費、快速、簡易的建立電子商務網站的 
[前端界面] 
n PayPal可讓賣家透過它販賣商品並收費(刷口)的 
[後端服務] 
n 兩個獨立的工具,透過網站內嵌程式代碼,聯結在一 
起了! 
n 簡單的程式運用 (Embed Code) 
YS, Fang. ys.fang@thinkinviz.com 
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/ (台灣支付) – 需邀請碼 
YS, Fang. ys.fang@thinkinviz.com 
63 
開始蓬勃發展!
+ 回家作業 
n 對於前端、後端 略懂略懂後。 
技術的價值在於能夠解決問題… 
n 想想: 
有一家連鎖超商,遇到了一個問題: 中午時段來客數都蠻少的, 
可以怎麼做來增加來客數呢? 
如果是你,你會怎麼做呢? 
YS, Fang. ys.fang@thinkinviz.com 
64

More Related Content

Viewers also liked

青年創業及圓夢網 創業計畫書撰寫【創業懶人包】
青年創業及圓夢網 創業計畫書撰寫【創業懶人包】青年創業及圓夢網 創業計畫書撰寫【創業懶人包】
青年創業及圓夢網 創業計畫書撰寫【創業懶人包】RICK Lin
 
power point 1
power point 1power point 1
power point 19728119
 
數位教學前的準備 ── 電腦、行動載具的認識與網路空間的介紹與運用
數位教學前的準備 ── 電腦、行動載具的認識與網路空間的介紹與運用數位教學前的準備 ── 電腦、行動載具的認識與網路空間的介紹與運用
數位教學前的準備 ── 電腦、行動載具的認識與網路空間的介紹與運用chihfangma
 
E commerce 金流串接實作教學 (pockii)
E commerce 金流串接實作教學 (pockii)E commerce 金流串接實作教學 (pockii)
E commerce 金流串接實作教學 (pockii)Yu-Hsien Fang
 
那些年,我們一起搞的金流
那些年,我們一起搞的金流那些年,我們一起搞的金流
那些年,我們一起搞的金流Chris Wu
 
大山北月 莊凱詠
大山北月 莊凱詠大山北月 莊凱詠
大山北月 莊凱詠凱詠 莊
 
Service Design Roundtable on 2/15/2014, Y. Sawatani
Service Design Roundtable on 2/15/2014, Y. SawataniService Design Roundtable on 2/15/2014, Y. Sawatani
Service Design Roundtable on 2/15/2014, Y. SawataniYuriko Sawatani
 
SF Service Jam Day 1 Deck
SF Service Jam Day 1 DeckSF Service Jam Day 1 Deck
SF Service Jam Day 1 DeckIzac Ross
 
Service Design Latest Information
Service Design Latest InformationService Design Latest Information
Service Design Latest InformationYuriko Sawatani
 
《Google超級用人學》導讀與反思
《Google超級用人學》導讀與反思《Google超級用人學》導讀與反思
《Google超級用人學》導讀與反思Lee CHIU
 
求職練功巴士_01_台大不一樣思考社友會
求職練功巴士_01_台大不一樣思考社友會求職練功巴士_01_台大不一樣思考社友會
求職練功巴士_01_台大不一樣思考社友會Jennifer Ting Yi Lee
 
Social Media Action Plan
Social Media Action PlanSocial Media Action Plan
Social Media Action PlanIan Farmer
 

Viewers also liked (17)

青年創業及圓夢網 創業計畫書撰寫【創業懶人包】
青年創業及圓夢網 創業計畫書撰寫【創業懶人包】青年創業及圓夢網 創業計畫書撰寫【創業懶人包】
青年創業及圓夢網 創業計畫書撰寫【創業懶人包】
 
power point 1
power point 1power point 1
power point 1
 
數位教學前的準備 ── 電腦、行動載具的認識與網路空間的介紹與運用
數位教學前的準備 ── 電腦、行動載具的認識與網路空間的介紹與運用數位教學前的準備 ── 電腦、行動載具的認識與網路空間的介紹與運用
數位教學前的準備 ── 電腦、行動載具的認識與網路空間的介紹與運用
 
E commerce 金流串接實作教學 (pockii)
E commerce 金流串接實作教學 (pockii)E commerce 金流串接實作教學 (pockii)
E commerce 金流串接實作教學 (pockii)
 
那些年,我們一起搞的金流
那些年,我們一起搞的金流那些年,我們一起搞的金流
那些年,我們一起搞的金流
 
大山北月 莊凱詠
大山北月 莊凱詠大山北月 莊凱詠
大山北月 莊凱詠
 
Service Design Roundtable on 2/15/2014, Y. Sawatani
Service Design Roundtable on 2/15/2014, Y. SawataniService Design Roundtable on 2/15/2014, Y. Sawatani
Service Design Roundtable on 2/15/2014, Y. Sawatani
 
SF Service Jam Day 1 Deck
SF Service Jam Day 1 DeckSF Service Jam Day 1 Deck
SF Service Jam Day 1 Deck
 
DTA Toolkit_Reference
DTA Toolkit_ReferenceDTA Toolkit_Reference
DTA Toolkit_Reference
 
Service Design Latest Information
Service Design Latest InformationService Design Latest Information
Service Design Latest Information
 
Weebly上手教學
Weebly上手教學Weebly上手教學
Weebly上手教學
 
《Google超級用人學》導讀與反思
《Google超級用人學》導讀與反思《Google超級用人學》導讀與反思
《Google超級用人學》導讀與反思
 
功夫微講堂第五卷
功夫微講堂第五卷功夫微講堂第五卷
功夫微講堂第五卷
 
求職練功巴士_01_台大不一樣思考社友會
求職練功巴士_01_台大不一樣思考社友會求職練功巴士_01_台大不一樣思考社友會
求職練功巴士_01_台大不一樣思考社友會
 
Social media plan
Social media planSocial media plan
Social media plan
 
Jerry直播筆記20170111
Jerry直播筆記20170111Jerry直播筆記20170111
Jerry直播筆記20170111
 
Social Media Action Plan
Social Media Action PlanSocial Media Action Plan
Social Media Action Plan
 

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

  • 1. + Website Solution Advance – 金流服務串接 (PayPal)
  • 2. + Outline n Advance n 第三方金流支付基礎概念 n 免費快速建立銷售網站— Weebly.com n Weebly店鋪頁面簡介 n PayPal金流服務串接實作 n Weebly嵌入代碼元件 n PayPal賬戶申請與設定 n 串接Paypal與Weebly網站 n 成果展示與問答 (15 min) YS, Fang. ys.fang@thinkinviz.com
  • 3. + YS, Fang. ys.fang@thinkinviz.com 第三方金流 支付基礎概念 3
  • 4. + 3 Essentials to Commerce n 資訊流 n 物流 (實體商品) n 金流 n 支付界面的演進 n F2F, n PC/Internet n Mobile Devices with wireless connection ability YS, Fang. ys.fang@thinkinviz.com 4 現代商業活動三元素
  • 5. + Payment n 支票 n 轉帳、劃撥、eATM n 信用卡 n 代收貨款 n 第三方支付 n PayPal, 支付寶, PayLink, 歐付寶, 第e支付… n 行動支付 YS, Fang. ys.fang@thinkinviz.com 5 各式金流服務
  • 6. #
  • 7. ! $ + 3rd Party Payment 第三⽅方⽀支付 YS, Fang. ys.fang@thinkinviz.com 6
  • 8. + YS, Fang. ys.fang@thinkinviz.com 建立銷售網站 7
  • 9. + 建置銷售網站 YS, Fang. ys.fang@thinkinviz.com 8 運用Weebly提供的店鋪頁面
  • 10. + 建置銷售網站 YS, Fang. ys.fang@thinkinviz.com 9 運用Weebly提供的店鋪頁面:缺點1 沒有新台幣幣別
  • 11. + 建置銷售網站 YS, Fang. ys.fang@thinkinviz.com 10 運用Weebly提供的店鋪頁面:缺點1 沒有新台幣幣別
  • 12. + 建置銷售網站 YS, Fang. ys.fang@thinkinviz.com 11 運用Weebly提供的店鋪頁面:缺點2 支援刷卡, 但是要被抽成…
  • 13. + 建置銷售網站 YS, Fang. ys.fang@thinkinviz.com 12 運用Weebly提供的店鋪頁面:缺點3 支援PayPal服務, 但是要升級為付費用戶…
  • 14. YS, Fang. ys.fang@thinkinviz.com 13 自己動手做吧! Step1. 運用Weebly 內嵌代碼(embed code)元件 Stpe2 . 申請 PayPal賬戶 Stpe3. 建立商品銷售按鈕 Step4. 將PayPal按鈕代碼嵌入Weebly網頁 Step5. 試用(網頁/手機),完成!
  • 15. + Use “Embed Code” component within Weebly Service. Step1 使用Weebly內嵌代碼 元件 YS, Fang. ys.fang@thinkinviz.com 14
  • 16. + Step1 網站編輯進階操作 YS, Fang. ys.fang@thinkinviz.com 15 內嵌程式碼(Embed Code)元件。 可以寫程式碼了!
  • 17. + Step1 網站編輯進階操作 YS, Fang. ys.fang@thinkinviz.com 16 內嵌程式碼(Embed Code)元件,提供自由組裝其他網站的 能力,可將找到的HTML code整合到Weebly中,增加彈性。 在網頁中的位置在 body… /body 之間
  • 18. + Apply Your 3rd party payment account with PayPal. Step2 申請PayPal帳號 YS, Fang. ys.fang@thinkinviz.com 17
  • 19. + PayPal支付服務 https://www.paypal.com/ YS, Fang. ys.fang@thinkinviz.com 18
  • 20. + PayPal服務 YS, Fang. ys.fang@thinkinviz.com 19 註冊 – 特選
  • 21. + PayPal服務 YS, Fang. ys.fang@thinkinviz.com 20 註冊 – 略過信用卡資訊
  • 22. + PayPal服務 YS, Fang. ys.fang@thinkinviz.com 21 登入主畫面。
  • 23. + PayPal服務 YS, Fang. ys.fang@thinkinviz.com 22 認證細節。 以銀行帳戶或信用卡 認證
  • 24. + Setup shopping payment Button (Link) with PayPal. Step3 設定PayPal購物支付按鈕 連結 YS, Fang. ys.fang@thinkinviz.com 23
  • 25. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 24 點擊「產品與服務」
  • 26. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 25 可用線上支付方案,點選「網站付款標準版」 (可一併產生電子郵件付款方案)
  • 27. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 26 使用結帳按鈕工廠
  • 28. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 27 結帳按鈕工廠-主畫面
  • 29. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 28 單一結帳按鈕-立即購
  • 30. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 29 單一結帳按鈕-立即購:設定細節
  • 31. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 30 單一結帳按鈕-立即購:產生HTML代碼 貼回Weebly的Embed Code元件
  • 32. + Embed PayPal Button into Weebly Page Step4 將PayPal按鈕代碼嵌入 Weebly網頁 YS, Fang. ys.fang@thinkinviz.com 31
  • 33. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 32 單一結帳按鈕-立即購:Weebly的Embed Code元件操作
  • 34. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 33 單一結帳按鈕-立即購:產生HTML代碼 貼回Weebly的Embed Code元件,完成畫面
  • 35. + Have a TEST! Step5 完成! 用網頁/手機來試用看看吧! YS, Fang. ys.fang@thinkinviz.com 34
  • 36. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 35 PayPal結賬畫面 – 正確! (PayPal or 信用卡)
  • 37. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 36 PayPal結賬畫面 – 正確! (信用卡付款,點選「沒有PayPal帳戶」)
  • 38. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 37 PayPal結賬畫面 – 信用卡付款輸入界面 完成!
  • 39. + PayPal support Different Checkout Interfaces. Compare following two. YS, Fang. ys.fang@thinkinviz.com 38 PayPal支援不同的結帳畫面。同樣是「立即購」,有分 Desktop 與 Mobile版本。 DESKTOP MOBILE
  • 40. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 39 PayPal結賬畫面 – 錯誤! (編碼問題)
  • 41. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 40 PayPal結賬畫面 – 錯誤! 我的個人檔案à我的銷售工具àPayPal 按鈕語⾔言編碼 改為UTF-8
  • 42. YS, Fang. ys.fang@thinkinviz.com 41 你已經建立完成 一個銷售網站了 來些變化吧! 加入購物車 改變按鈕風格
  • 43. + 加入購物車 一次結帳多個商品。 YS, Fang. ys.fang@thinkinviz.com 42
  • 44. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 43 多筆結帳按鈕-購物車
  • 45. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 44 多筆結帳按鈕-購物車:設定細節
  • 46. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 45 多筆結帳按鈕-購物車:產生HTML代碼 貼回Weebly的Embed Code元件
  • 47. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 46 多筆結帳按鈕-購物車:Weebly的Embed Code元件操作
  • 48. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 47 多筆結帳按鈕-購物車:Weebly的Embed Code元件操作, 完成畫面
  • 49. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 48 多筆結帳按鈕-檢視購物車
  • 50. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 49 多筆結帳按鈕-檢視購物車:設定細節
  • 51. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 50 多筆結帳按鈕-檢視購物車:產生HTML代碼 貼回Weebly的Embed Code元件
  • 52. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 51 多筆結帳按鈕-檢視購物車:Weebly的Embed Code元件 操作
  • 53. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 52 多筆結帳按鈕-檢視購物車:Weebly的Embed Code元件 操作,完成畫面
  • 54. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 53 「加到購物車」,跳轉後畫面。 「檢視購物車」,跳轉後畫面。
  • 55. + 改變按鈕風格 自訂購物按鈕進階技巧 讓網站界面更專業。 YS, Fang. ys.fang@thinkinviz.com 54
  • 56. + 自定義結帳按鈕外觀 YS, Fang. ys.fang@thinkinviz.com 55 PayPal風格與網站不一致?We Can change it! 同樣的新增結帳按鈕,但「無法」新增選項。 !不可添加選項
  • 57. + 自定義結帳按鈕外觀 YS, Fang. ys.fang@thinkinviz.com 56 PayPal風格與網站不一致?We Can change it! 選擇「電子郵件」,可見一個URL,貼回Weebly。
  • 58. + 自定義結帳按鈕外觀 YS, Fang. ys.fang@thinkinviz.com 57 PayPal風格與網站不一致?We Can change it! 選擇「電子郵件」,可見一個URL,貼回Weebly。
  • 59. + 自定義結帳按鈕外觀 YS, Fang. ys.fang@thinkinviz.com 58 PayPal風格與網站不一致?We Can change it! 使用Weebly-Button元件,完成一致風格的結帳按鈕。 PayPal標準按鈕 使用付款URL, 所自定義的結帳按鈕
  • 60. + 自定義結帳按鈕外觀 YS, Fang. ys.fang@thinkinviz.com 59 同樣的,可以產生 – 立即購、加到購物車、檢視購物車 等三組按鈕。後續結帳操作流程與原本一致。
  • 61. + 自定義結帳按鈕外觀 YS, Fang. ys.fang@thinkinviz.com 60 ! 唯一的不足,無法選用下拉選單。 PayPal無法自動產生「電子郵件」結帳連結。
  • 62. + Put All together! 整合今日所學 YS, Fang. ys.fang@thinkinviz.com 61
  • 63. + 金流整合 n Weebly可免費、快速、簡易的建立電子商務網站的 [前端界面] n PayPal可讓賣家透過它販賣商品並收費(刷口)的 [後端服務] n 兩個獨立的工具,透過網站內嵌程式代碼,聯結在一 起了! n 簡單的程式運用 (Embed Code) YS, Fang. ys.fang@thinkinviz.com 62 前端(網站)+後端(金流)
  • 64. + 台灣的第三方支付服務 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/ (台灣支付) – 需邀請碼 YS, Fang. ys.fang@thinkinviz.com 63 開始蓬勃發展!
  • 65. + 回家作業 n 對於前端、後端 略懂略懂後。 技術的價值在於能夠解決問題… n 想想: 有一家連鎖超商,遇到了一個問題: 中午時段來客數都蠻少的, 可以怎麼做來增加來客數呢? 如果是你,你會怎麼做呢? YS, Fang. ys.fang@thinkinviz.com 64
  • 66. + 問答時間FAQ YS, Fang. ys.fang@thinkinviz.com 65