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