65.9K
CodeProject 正在变化。 阅读更多。
Home

在 ASP.NET 表单中添加多个 PayPal "立即购买" 按钮

echokilo
starIconstarIconstarIconstarIconstarIcon

5.00/5 (2投票s)

2014年5月14日

CPOL

4分钟阅读

viewsIcon

21724

一个简单的技巧，可以避免 PayPal 为每个按钮提供单独的表单标签代码片段带来的麻烦

引言

本技巧将向您展示一种快速而简单的方法，在 ASP.NET 网页表单中添加多个 PayPal 立即购买（或其他类似按钮）。之所以需要该解决方案，是因为 PayPal 为每个按钮提供了 HTML 片段，每个片段都封装在其自己的表单中，其中包含该按钮特有的隐藏值。这对于 ASP.NET 世界来说远非理想，因为不允许嵌套表单（如 在 ASP.NET 中实现非 ASP.NET 帖子 中所讨论的）。

本技巧将向您展示如何通过实现对 PayPal 在点击“立即购买”按钮时使用的隐藏输入字段的一些简单 JavaScript 操作来避免此问题和其他相关问题。

解决方案

PayPal 代码

当您创建“立即购买”按钮时，您将看到类似于以下内容的 HTML 片段

<form action="https://www.paypal.com/cgi-bin/webscr" 
method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="[unique identifier]">
<input type="image" src=https://www.paypalobjects.com/en_US/GB/i/btn/btn_buynowCC_LG.gif> 
border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
<img alt="" border="0" src=https://www.paypalobjects.com/en_GB/i/scr/pixel.gif 
width="1" height="1">
</form>

如果您包含了某些可选元素，例如指定要购买的商品数量，您可能还会看到类似以下内容的附加 HTML

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="[unique identifier]">
<table>
<tr><td><input type="hidden" name="on0" 
value="Quantity">Quantity</td></tr><tr><td>\<select name="os0">
 <option value="1">1 £15.99 GBP</option>
 <option value="2">2 £29.98 GBP</option>
 <option value="3">3 £42.97 GBP</option>
</select> </td></tr>
</table>
<input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_buynowCC_LG.gif" 
border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>

因此，您可以在上面看到我有 2 个按钮的 HTML，其中一个按钮包含指定数量的选项。每个按钮都有自己的表单，一个名为 cmd 的隐藏 input ，其值为“_s-xclick”，一个名为 hosted_button_id 的隐藏 input，其中包含该按钮的唯一标识符，一个提交页面的 image input 和一个 1x1 像素的 img。

修改后的清理后的代码

暂时忽略 HTML 有效性的一些更琐碎和令人恼火的问题（input 标签应该在 HTML5 中自我封闭，空的 alt 标签等），首先需要做的是完全删除嵌套的 forms ，因此您需要将 action、method 和 target 属性移动到页面上的 form 标签内，或者，如果您使用的是母版页，则只需在相关页面上设置这些属性，因此我建议在 Page_Load 事件中以编程方式执行此操作，如下所示

 protected void Page_Load(object sender, EventArgs e)
        {
            Page.Form.Action = "https://www.paypal.com/cgi-bin/webscr";
            Page.Form.Method = "post";
            Page.Form.Target = "_top";
        }

现在，更仔细地查看隐藏的 input 元素，您可以看到重复的内容，PayPal 目标 URL 将只查找具有正确名称的输入并获取其值，因此，如果您的页面上有两个或更多按钮，您会发现它们都指向同一商品而不是它们自己的特定唯一标识符。因此，您需要将这些隐藏字段中的每一个合理化为一个实例（您可能希望将它们全部放在代码的顶部），并为每个字段分配一个 id。此 id 将允许通过 DOM 找到隐藏的输入元素。您还应该借此机会整理 HTML 以适应您自己的个人开发标准（例如，您可以从 Quantity 下拉列表中删除 table ，只需使用 label 和您自己的 CSS 进行布局），使代码看起来像这样

<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" id="hidButtonId" name="hosted_button_id" value="[unique identifier]"/>
<input type="hidden" id="hidQuantity" 
name="on0" value="Quantity"/>
<input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_buynowCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online."/>
<img alt="*"  src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" 
width="1" height="1"/>
<label for="ddlQuantity">Quantity:</label>
<select id="ddlQuantity" name="os0"> 
 <option value="1">1 - £15.99</option> 
 <option value="2">2 - £29.98</option> 
 <option value="3">3 - £42.97</option>
</select> 
<input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_buynowCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online."/> 
<img alt="*" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1"/>

因此，您可以看到对于每个额外的按钮，您现在只需要包含“立即购买”按钮和 1x1 像素的 img （以及任何其他选项，例如用于数量的下拉列表）。现在我们需要添加 JavaScript 函数并将其附加到每个按钮上的 onclick 事件。JavaScript 很简单，我们所需要做的就是将 hosted_button_id 隐藏 input 字段的值设置为该商品的正确值，然后相应地设置任何其他隐藏 input 字段。重要的是要注意，对于那些不使用额外选项（如数量）的按钮，您需要阻止 PayPal 目标页面错误地嗅探它们的值，我选择通过清除相关隐藏字段的值来做到这一点。

在您的页面（或您的 JavaScript 文件）中添加一个 JavaScript 函数，如下所示

<script type="text/javascript">
    function setPPHiddenProperties(itemId, isQuantity) {
            document.getElementById('itemValue').value = itemId;
            if (isQuantity == 1) {
                document.getElementById('hidQuantity').value = "Quantity";
            }
            else {
                document.getElementById('hidQuantity').value = "";
            }
        }
</script>

然后为您的每个“立即购买”按钮添加一个 onclick 属性，调用该函数并传递该按钮的相关值，如下所示

<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" id="hidButtonId" name="hosted_button_id" value="[unique identifier]"/>
<input type="hidden" id="hidQuantity" name="on0" value="Quantity"/>
<input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_buynowCC_LG.gif" name="submit" onclick="setPPHiddenProperties('uId1',0);" alt="PayPal - The safer, easier way to pay online."/>
<img alt="*"  src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1"/>
<label for="ddlQuantity">Quantity:</label>
<select id="ddlQuantity" name="os0"> 
 <option value="1">1 £14.99 GBP</option> 
 <option value="2">2 £29.98 GBP</option> 
 <option value="3">3 £44.97 GBP</option>
</select> 
<input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_buynowCC_LG.gif" name="submit" onclick="setPPHiddenProperties('uId2',1);" alt="PayPal - The safer, easier way to pay online."/> 
<img alt="*" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1"/>

使用此方法并将其扩展以涵盖您可能实现的任何其他按钮选项，应该允许您在页面上拥有任意数量的“立即购买”按钮。

摘要

总而言之，其想法是

  1. 删除 form 标签并将属性移动到相关页面的 ASP.NET 表单中。
  2. 合理化隐藏字段并为它们分配一个 id。
  3. 编写一个 JavaScript 函数，用于根据传入的参数设置隐藏字段的值。
  4. 整理 HTML，并在您的每个“立即购买”按钮中添加一个 onclick 事件，以使用该按钮的唯一值调用 JavaScript 函数。
  5. 测试结果代码。
我希望这有帮助，我认为这是一个优雅而简单的解决方案，如果其他人以前发布过它，它会为我节省一些麻烦。PayPal 本身需要启用 JavaScript 才能完成结帐这一事实减轻了它是一个 JavaScript 解决方案的事实。
© . All rights reserved.