Question

我想创建一个网站小部件，允许访问者捐赠给开发者的星巴克卡（类似于PayPal捐赠小部件）。我最初的天真实现是将用户带到星巴克的eGift页面，然后使用JavaScript自动填充大部分表单。但是，这将被视为跨站点脚本。

我是否有可接受的方式将数据发送到星巴克eGift表格并完成我想要的工作？或者有不同的方法可行吗？一位同事提到了PayPal API，但我不确定是否能够重新加载星巴克卡。

要求：

捐赠者应该能够点击小部件，输入他们的姓名/电子邮件地址（可选？），PayPal或帐户信息，以及他们想要捐赠的金额，并重新加载该卡。

Answer 1

您可以使用以下代码执行此操作：

<div id="starbucks_container">
    <form action="https://www.starbucks.com/card/reload/one-time" class="AjaxForm required_form payment-method region size2of3" id="OneTimeReload" method="post" novalidate="novalidate">
        <input class="field_large numbers card-number required numeric" id="Card_Number" maxlength="16" name="Card.Number" title="Card Number | This 15- or 16-digit number is on the front of your card. Please enter it without spaces." type="hidden" value="6069262396927591">
        <label for="Reload_Amount">Reload Amount</label>
        <br/>
        <span class="numbers">$</span>
        <input class="field_xxsmall align_right numbers" data-validation-max="100" data-validation-min="10" id="Reload_Amount" maxlength="3" name="Reload.Amount" title="Please enter an amount." type="text" value="10">
        <input id="paymentOptionHidden" name="paymentOptionHidden" type="hidden" value="CreditCard">
        <br/>
        <label for="card-type-paypal">
            <input class="credit-card radio" id="card-type-paypal" name="paymentOption" type="radio" value="PayPal">
            PayPal
        </label>
        <br/>
        <label for="card-type-options">
            <input checked="checked" class="credit-card radio" id="card-type-options" name="paymentOption" type="radio" value="CreditCard">
            Credit/Debit Card
        </label>
        <input type="hidden" name="step" value="1">
        <br/>
        <button type="submit">Reload Card</button>
    </form>
</div>

只需用自己的卡号替换卡号。

另外，我为此制作了一个Wordpress小部件：http://wordpress.org/extend/plugins/starbucks-reload/

编辑 - 网址从https://www.starbucks.com/card/manage/guest-reload更改为https://www.starbucks.com/card/reload/one-time

如何制作类似Paypal的星巴克小部件？

1 个答案: