I want to use the checkout button provided by Stripe (been trying to do so for three days, watched a lot of tutorials on YouTube…etc:
The problem is that it doesn’t show properly, I have followed a tutorial for Wordpress and you only needed to copy paste the code and when you click on Pay by card button the payment form opens in full screen and shows properly. But when I do the same in Wix the size of the payment form depends on the size of the HTML item (which is a relatively small square) but when I make it bigger I don’t have the possibility of placing the button where I want (it shows in upper right side of the form).
Here’s the code:
<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="customButton">Purchase</button>
<script>
var handler = StripeCheckout.configure({
key: 'pk_test_xxxxxxxxxxxxxxxxxxxxxxx',
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
locale: 'auto',
token: function(token) {
// You can access the token ID with `token.id`.
// Get the token ID to your server-side code for use.
}
});
document.getElementById('customButton').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
name: 'Website',
description: 'Service',
amount: 2000
});
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>
Can anyone help me with this? A solution would be to place the (Pay by card) button in the bottom center of the payment form (or HTML item) (I figured this can be done by CSS but I don’t have any coding skills, also I have contacted Wix support who told me to contact Stripe who again told me to contact Wix, I wonder if Wix was the right choice after all.)
Thanks.