Question

I would like to pursue making a website widget that can allow visitors to donate to the developer’s Starbucks card (similar to a PayPal donation widget). My initial naive implementation was to bring the user to the Starbuck’s eGift page and then use JavaScript to autopopulate most of the form. However, this would be considered cross-site scripting.

Is there an acceptable way for me to send data to the Starbucks eGift form and accomplish what I want? Or is there a different approach that would work? A coworker mentioned the PayPal API but I’m not sure that would work to hook into reloading the Starbucks card.

Requirements:

• The donator should be able to click the widget, enter in their name/email address (optional?), PayPal or account information, and the amount they want to donate, and the card would be reloaded.

Answer 1

You can do it with this code:

<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>

just replace the card number with your own.

Also, I made a WordPress widget for this: http://wordpress.org/extend/plugins/starbucks-reload/

Edit- the url changed from https://www.starbucks.com/card/manage/guest-reload to https://www.starbucks.com/card/reload/one-time