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'
Share
Improve this question
asked May 21, 2020 at 11:47
AliiiiiiiiAliiiiiiii
1631 silver badge13 bronze badges
1
- 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
Reset to default 0Existing 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/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.