AMP and Paypal form CORS issue

by

Existing forms with the post method can be problematic to adapt to AMP especially when they are pointing to an external domain. There are two issues:

  • Forms in AMP with the post action are expected to be requesting JSON data to display in the form without causing a page navigation. When page navigation is desired, then the server is supposed to send an AMP-Redirect-To response header. Naturally this is not going to help for PayPal.
  • There isn’t an ability to set the response headers on a remote server (e.g. Access-Control-Allow-Origin).

I work on the official AMP plugin for WordPress and we have an issue open to try to automatically convert such forms, by introducing a local form proxy.

Nevertheless, there are two workarounds you can try.

Switch to get method on form

While this doesn’t work in all cases, sometimes form submission handlers accept GET requests just the same as POST. Here’s how that can look in AMP:

<form action="https://www.paypal.com/cgi-bin/webscr" method="get" target="_top">
    <input name="charset" type="hidden" value="UTF-8">
    <input name="cmd" type="hidden" value="_xclick">
    <input name="business" type="hidden" value="email">
    <input name="undefined_quantity" type="hidden" value="1">
    <input name="item_name" type="hidden" value="text">
    <input name="amount" type="hidden" value="30.00">
    <input name="shipping" type="hidden" value="0.00">
    <input name="shipping2" type="hidden" value="0.00">
    <input name="currency_code" type="hidden" value="EUR">
    <input name="lc" type="hidden" value="FR">
    <input type="hidden" name="submit">
    <button type="submit" class="no-padding">
        <amp-img src="https://www.paypal.com/fr_FR/i/btn/btn_buynow_LG.gif" width="93" height="26" alt="Acheter"></amp-img>
    </button>
    <amp-pixel src="https://www.paypal.com/fr_FR/i/scr/pixel.gif"></amp-pixel>
</form>

Use an amp-iframe

If using the get method doesn’t work, then another a workaround you can use is to wrap the the form in an amp-iframe:

<amp-iframe width="93" height="26" sandbox="allow-forms allow-top-navigation" srcdoc="
    <style>
        html,body { margin:0; padding: 0; }
    </style>
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
        <input name="charset" type="hidden" value="UTF-8">
        <input name="cmd" type="hidden" value="_xclick">
        <input name="business" type="hidden" value="email">
        <input name="undefined_quantity" type="hidden" value="1">
        <input name="item_name" type="hidden" value="text">
        <input name="amount" type="hidden" value="30.00">
        <input name="shipping" type="hidden" value="0.00">
        <input name="shipping2" type="hidden" value="0.00">
        <input name="currency_code" type="hidden" value="EUR">
        <input name="lc" type="hidden" value="FR">
        <input type="image" name="submit" src="https://www.paypal.com/fr_FR/i/btn/btn_buynow_LG.gif">
        <img src="https://www.paypal.com/fr_FR/i/scr/pixel.gif" alt="text" width="1" height="1">
    </form>
">
    <span placeholder>Loading…</span>
</amp-iframe>

Please let me know if either of these work for you.