Menu
I've used the Stripe Payment Request Button HTML code from the stripe docs on https://stripe.com/docs/stripe-js/elements/payment-request-button to incorporate the Google Pay button on my UI but the stripe component is not being rendered on the UI.
I'm using a Windows 10 machine and have served my application over a https server, the HTML code that I took from Stripe Docs does not show any errors or exceptions on the developer console, the iframe component can be seen on the Elements tab but the button is not being rendered on the UI.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Google Pay Payment</title>
</head>
<body>
<h1>This is a sample payment page using Stripe</h1>
<label for="card-element">
Credit or debit card
</label>
<form action="{{ url_for('pay')}}" method="post" id="payment-form">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<div id="payment-request-button">
<!-- A Stripe Element will be inserted here. -->
</div>
</form>
<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript">
var stripe = Stripe('pk_test_IVLw1g5rpDe7MwEu6PpxKxFL00SQlZd4eB');
var paymentRequest = stripe.paymentRequest({
country: 'US',
currency: 'usd',
total: {
label: 'Demo total',
amount: 1000,
},
requestPayerName: true,
requestPayerEmail: true,
});
var elements = stripe.elements();
var prButton = elements.create('paymentRequestButton', {
paymentRequest: paymentRequest,
});
// Check the availability of the Payment Request API first.
paymentRequest.canMakePayment().then(function(result) {
if (result) {
prButton.mount('#payment-request-button');
} else {
document.getElementById('payment-request-button').style.display = 'none';
}
});
// Check the availability of the Payment Request API first.
paymentRequest.canMakePayment().then(function(result) {
if (result) {
prButton.mount('#payment-request-button');
} else {
document.getElementById('payment-request-button').style.display = 'none';
}
});
</script>
</body>
</html>
218
Google Pay is fully compatible with Stripe’s products and features (e.g., subscriptions ), allowing you to use it in place of a traditional payment form whenever possible. Use it to accept payments for physical goods, donations, subscriptions, and more. Use the Stripe Android SDK to start accepting Google Pay in your Android apps.
Your Stripe publishable API key is also required as it identifies your website to Stripe: Create an instance of stripe.paymentRequest with all required options. Use the requestPayerName parameter to collect the payer’s billing address for Apple Pay. You can use the billing address to perform address verification and block fraudulent payments.
Apple Pay with the Payment Request Button requires macOS 10.12.1+ or iOS 10.1+. If you intend to use Stripe Elements with React, use react-stripe-elements , our open source library that wraps Stripe Elements in a set of convenient React components.
The Payment Request Button Element gives you a single integration for Apple Pay, Google Pay. The relevant button will be displayed automatically. Customers see an Apple Pay button or a Google Pay button, depending on what their device and browser combination supports. If no option is available, they don’t see the button.
Faced same issue and finally solved it. Looks like it depends on country in you google payment profile. So my solution is:
81
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
