I'm having an issue to use the Paypal "buy now" button on AMP pages (it's working on non AMP pages)

I'm using this button (code from Paypal website) :

<form action="" method="post">
<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">
<button type="submit" name="submit" class="no-padding">
<img src=".gif">
</button>
<img src=".gif" alt="text" width="1" height="1">
</form>

And the error is :

Access to fetch at ';__amp_source_origin=https%3A%2F%2Fwebsiteurl' from origin 'https://websiteurl' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
www.paypal/cgi-bin/webscr?_wp_amp_action_xhr_converted=1&__amp_source_origin=https%3A%2F%2Fwebsiteurl:1 Failed to load resource: net::ERR_FAILED
log.js:258 [amp-form] Form submission failed: Error: XHR Failed fetching (/...): Failed to fetch​​​
    at bb (.js:29:169)
    at Ya.f.createExpectedError (.js:24:235)
    at .js:142:154

I've checked on the amp documentation regarding core issue here I've understand the main issue but I'm unable to solve it, I've tried to add this to my .htaccess but same issue :

Header set Access-Control-Allow-Origin '​'
Header set AMP-Access-Control-Allow-Source-Origin ''

I'm having an issue to use the Paypal "buy now" button on AMP pages (it's working on non AMP pages)

I'm using this button (code from Paypal website) :

<form action="https://www.paypal/cgi-bin/webscr" method="post">
<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">
<button type="submit" name="submit" class="no-padding">
<img src="https://www.paypal/fr_FR/i/btn/btn_buynow_LG.gif">
</button>
<img src="https://www.paypal/fr_FR/i/scr/pixel.gif" alt="text" width="1" height="1">
</form>

And the error is :

Access to fetch at 'https://www.paypal/cgi-bin/webscr?_wp_amp_action_xhr_converted=1&__amp_source_origin=https%3A%2F%2Fwebsiteurl' from origin 'https://websiteurl' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
www.paypal/cgi-bin/webscr?_wp_amp_action_xhr_converted=1&__amp_source_origin=https%3A%2F%2Fwebsiteurl:1 Failed to load resource: net::ERR_FAILED
log.js:258 [amp-form] Form submission failed: Error: XHR Failed fetching (https://www.paypal/...): Failed to fetch​​​
    at bb (https://cdn.ampproject/v0.js:29:169)
    at Ya.f.createExpectedError (https://cdn.ampproject/v0.js:24:235)
    at https://cdn.ampproject/v0.js:142:154

I've checked on the amp documentation regarding core issue here I've understand the main issue but I'm unable to solve it, I've tried to add this to my .htaccess but same issue :

Header set Access-Control-Allow-Origin 'https://cdn.ampproject​'
Header set AMP-Access-Control-Allow-Source-Origin 'https://your-domain'

• forms
• mobile

• Just coming across this now. I work on the official AMP plugin for WordPress. We've been tracking similar issues to this like github/ampproject/amp-wp/issues/4191 and we've got a solution that may be able to solve this. We'll include this in the test cases. – Weston Ruter Commented Sep 26, 2020 at 18:08

1 Answer 1

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/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/fr_FR/i/btn/btn_buynow_LG.gif" width="93" height="26" alt="Acheter"></amp-img>
    </button>
    <amp-pixel src="https://www.paypal/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/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/fr_FR/i/btn/btn_buynow_LG.gif">
        <img src="https://www.paypal/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.