核心概念

在开始之前,需要明白ECSHOP的支付流程：

ecshop 模板 支付宝 paypal
（图片来源网络，侵删）
  1. 用户下单：用户在购物车页面点击“结算”，进入确认订单页面。
  2. 选择支付方式：在确认订单页面，用户从下拉菜单中选择一种支付方式（如支付宝、PayPal）。
  3. 提交订单：用户点击“提交订单”按钮。
  4. 后台处理：
    • ECSHOP后台根据用户选择的支付方式,调用对应的支付接口。
    • 对于支付宝/PayPal等在线支付：系统会生成一个支付请求，并将用户重定向到支付宝/PayPal的官方支付页面。
    • 对于货到付款等线下支付：系统直接生成“待处理”的订单，等待商家手动处理。
  5. 用户完成支付：用户在支付宝/PayPal的网站上完成付款。
  6. 支付回调：支付宝/PayPal的服务器会主动向你的ECSHOP网站发送一个支付成功的通知（这叫“服务器异步通知”或“IPN”），ECSHOP收到通知后，会验证其真伪，然后自动将订单状态更新为“已付款”。
  7. 跳转页面：支付完成后，用户会被重定向回你的ECSHOP网站的一个指定页面（如“订单支付成功”页面）。

第一步：后台配置支付接口（最关键）

无论使用什么模板,你都必须先在ECSHOP后台正确配置支付接口，模板本身不包含支付逻辑，它只是展示支付选项和支付结果页面。

支付宝支付配置

ECSHOP主要支持两种支付宝接口：即时到账 和 手机网站支付，对于电脑端，通常使用“即时到账”。

操作路径：ECSHOP后台 -> 系统设置 -> 支付方式管理

  1. 添加支付方式：

    ecshop 模板 支付宝 paypal
    （图片来源网络，侵删）
    • 点击 添加支付方式 按钮。
    • 支付方式名称：填写 支付宝 或 支付宝即时到账。
    • 支付代码：填写 alipay。
    • 处理 order 页面：填写 respond.php。这个是固定的，不要修改！
    • 是否在线支付：选择 是。
    • 排序：设置一个数字，决定它在支付列表中的顺序。
    • 点击 确定。

  2. 配置支付宝参数：

    • 在支付方式列表中,找到你刚刚创建的“支付宝”，点击后面的 配置 按钮。
    • 合作身份者ID (partner)：登录支付宝商家服务中心，在“产品中心” -> “产品详情” -> “即时到账”中找到，这是你的商户ID。
    • 安全校验码 (key)：在同一个产品详情页面，可以设置和获取。请务必妥善保管，不要泄露！
    • 支付宝接口安全校验码 (key)：同上，就是上面的 key。
    • 收款邮箱 / 卖家支付宝帐户：填写你的支付宝收款邮箱或账户。
    • 接口类型：选择 MD5/SHA (根据你的支付宝版本选择，新版本推荐使用 MD5)。
    • 启用：勾选 是。
    • 服务器异步通知页面：ECSHOP会自动生成，通常是 notify_url.php。这个不要动！
    • 页面跳转同步通知页面：ECSHOP会自动生成，通常是 return_url.php。这个也不要动！
    • 支付成功跳转提示信息：可以自定义，您已成功支付，我们正在为您处理订单，请耐心等待！”。
    • 点击 更新 保存。

注意事项：

  • 确保你的ECSHOP网站服务器能够访问到支付宝的服务器,用于回调。
  • 如果使用MD5签名,请确保 key 正确。
  • 新版的支付宝可能推荐使用 RSA 签名，ECSHOP 2.7.3等旧版本可能不完全支持，如果遇到问题，可以考虑使用ECSHOP官方的插件或升级到更新的版本。

PayPal 支付配置

PayPal的配置类似。

操作路径：ECSHOP后台 -> 系统设置 -> 支付方式管理

ecshop 模板 支付宝 paypal
（图片来源网络，侵删）

  1. 添加支付方式：

    • 点击 添加支付方式 按钮。
    • 支付方式名称：填写 PayPal。
    • 支付代码：填写 paypal。
    • 处理 order 页面：填写 respond.php。这个是固定的！
    • 是否在线支付：选择 是。
    • 点击 确定。

  2. 配置PayPal参数：

    • 在支付方式列表中,找到“PayPal”，点击 配置。
    • PayPal Business Email：填写你的PayPal商家邮箱。
    • PayPal API 用户名：登录PayPal开发者后台，创建一个API用户名。沙箱环境用于测试，生产环境用于真实交易。
    • PayPal API 密码：获取API密码。
    • PayPal API 签名：获取API签名。
    • PayPal API 证书路径：此项通常可以留空，除非你使用特定的证书认证。
    • 测试模式：在正式上线前，请务必勾选 是，使用PayPal的沙箱环境进行测试，避免真实扣款，测试成功后，再取消勾选，切换到生产环境。
    • 启用：勾选 是。
    • 服务器异步通知页面：自动生成，notify_url.php。
    • 页面跳转同步通知页面：自动生成，return_url.php。
    • 点击 更新 保存。

注意事项：

  • PayPal API凭据的获取需要你在PayPal开发者后台创建应用。
  • 测试非常重要！使用沙箱账户（买家和卖家）完成一笔测试交易，确保订单状态能正确更新为“已付款”。

第二步：前端模板修改

后台配置完成后,支付功能在逻辑上已经可以使用了，现在我们来调整模板，让它在页面上看起来更美观、更符合你的设计。

在确认订单页面展示支付图标

支付方式是一个下拉列表,我们可以在这个列表旁边或下方添加对应的支付图标，让用户更直观地选择。

涉及的文件：/themes/你的模板目录/flow.dwt

  1. 找到支付方式选择区域： 打开 flow.dwt 文件，找到类似下面的代码（不同模板可能略有差异）：

    <select name="payment_id" id="payment_id">
  <!-- {foreach from=$payment_list item=payment} -->
  <option value="{$payment.pay_id}">{$payment.pay_name}</option>
  <!-- {/foreach} -->
</select>

  2. 添加支付图标： 你可以在 <select> 标签旁边，用 <div> 或 <span> 包裹图标，并利用CSS来控制它们的显示。

    修改建议：

    <select name="payment_id" id="payment_id" class="payment-select">
  <!-- {foreach from=$payment_list item=payment} -->
  <option value="{$payment.pay_id}">{$payment.pay_name}</option>
  <!-- {/foreach} -->
</select>
<!-- 在select下方或旁边添加一个图标容器 -->
<div class="payment-icons">
  <!-- 为每个支付方式动态生成一个图标 -->
  <!-- {foreach from=$payment_list item=payment} -->
  <!-- {if $payment.pay_code eq 'alipay'} -->
  <img src="images/payment/alipay.png" alt="支付宝" title="支付宝支付" class="payment-icon {if $payment.selected}selected{/if}">
  <!-- {elseif $payment.pay_code eq 'paypal'} -->
  <img src="images/payment/paypal.png" alt="PayPal" title="PayPal支付" class="payment-icon {if $payment.selected}selected{/if}">
  <!-- {/if} -->
  <!-- {/foreach} -->
</div>

  3. 准备图标文件：

    • 在你的模板目录下创建一个文件夹,/themes/你的模板目录/images/payment/
    • 准备好支付宝和PayPal的官方Logo图标,分别命名为 alipay.png 和 paypal.png，并上传到该文件夹。

  4. 添加CSS样式： 在你的模板的CSS文件中（通常是 /themes/你的模板目录/style.css 或 /themes/你的模板目录/css/style.css），添加以下样式