I'm using Stripe Checkout API to direct user to make a payment. I want to get the shipping address to ship them as well.
Here's the code that I'm using in my WordPress widget:
<!-- Load Stripe.js on your website. -->
<script src="https://js.stripe.com/v3"></script>
<!-- Create a button that your customers click to complete their purchase. Customize the styling to suit your branding. -->
<button
style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em"
id="checkout-button-price_1HhPY2IT1E1kKJAOCUoQDPxI"
role="link"
type="button"
>
Checkout
</button>
<div id="error-message"></div>
<script>
(function() {
var stripe =Stripe('pk_live_51H7oCMIT1E1kKJAOeiJKZvF4R2uIJfFCIrOJ1hW8Krned1tfG0abtsQdMD6pRmRyqh5gNNnfxVCzltFc29K7C5Iq00YJyFHBZZ');
var checkoutButton = document.getElementById('checkout-button-price_1HhPY2IT1E1kKJAOCUoQDPxI');
checkoutButton.addEventListener('click', function () {
/*
* When the customer clicks on the button, redirect
* them to Checkout.
*/
stripe.redirectToCheckout({
lineItems: [{price: 'price_1HhPY2IT1E1kKJAOCUoQDPxI', quantity: 1}],
mode: 'payment',
/*
* Do not rely on the redirect to the successUrl for fulfilling
* purchases, customers may not always reach the success_url after
* a successful payment.
* Instead use one of the strategies described in
* https://stripe.com/docs/payments/checkout/fulfill-orders
*/
successUrl: window.location.protocol + '//GLOBESITY.FOUNDATION/success',
cancelUrl: window.location.protocol + '//GLOBESITY.FOUNDATION/canceled',
})
.then(function (result) {
if (result.error) {
/*
* If `redirectToCheckout` fails due to a browser or network
* error, display the localized error message to your customer.
*/
var displayError = document.getElementById('error-message');
displayError.textContent = result.error.message;
}
});
});
})();
</script>
This code is working fine in getting the payments but it doesn't get the shipping address. Also I want the shipping address default country to be United States. Thank you!
You'll need to use the server+client version of Checkout (the client-only version doesn't support this), and create the CheckoutSession following this example. Specifically, you'll want to pass shipping_address_collection with allowed_countries: ['US'].
Related
I simply don't know JS well enough to determine the issue. I'm sure it's glaring at me, in plain sight. I just need the button to function like a button. When I move the cursor over the button and click, neither do anything.
I've tried adding the type, as you can see.
<!-- Load Stripe.js on your website. -->
<script src="https://js.stripe.com/v3"></script>
<!-- Create a button that your customers click to complete their purchase. Customize the styling to suit your branding. -->
<button
style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em"
id="checkout-button-plan_555xxx555"
role="link"
type="button"
>
Checkout
</button>
<div id="error-message"></div>
<script>
(function() {
var stripe = Stripe('pk_test_555xxx555');
var checkoutButton = document.getElementById('checkout-button-plan_G2Z8GjQU8ZihZw');
checkoutButton.addEventListener('click', function () {
// When the customer clicks on the button, redirect
// them to Checkout.
stripe.redirectToCheckout({
items: [{plan: '555xxx555', quantity: 1}],
// Do not rely on the redirect to the successUrl for fulfilling
// purchases, customers may not always reach the success_url after
// a successful payment.
// Instead use one of the strategies described in
// https://stripe.com/docs/payments/checkout/fulfillment
successUrl: window.location.protocol + '//cozelosdata.com/success',
cancelUrl: window.location.protocol + '//cozelosdata.com/canceled',
})
.then(function (result) {
if (result.error) {
// If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer.
var displayError = document.getElementById('error-message');
displayError.textContent = result.error.message;
}
});
});
})();
</script>
Your id for the button is wrong.
<button id="checkout-button-plan_G2Z8GjQU8ZihZw" role="link" type="button">Checkout</button>
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>
Faced same issue and finally solved it. Looks like it depends on country in you google payment profile.
So my solution is:
Open https://pay.google.com/gp/w/u/0/home/settings
Tap on edit icon on Country/Region row.
Add fake profile with US as country, it OK to use any random address and phone
It's impossible to add test stripe card from here, so
Open chrome://settings/payments and add card like 4242 4242 4242 4242 from here.
Now open https://stripe-payments-demo.appspot.com/ again and check if you can see Pay Now button.
Your code works for me as well: https://jsfiddle.net/ufn9w5La/
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';
}
});
A couple of things to clarify:
The Stripe Payment Request Button will not render a Google Pay button, it has it's own Stripe "Pay now" button
The payment sheet does include Google Pay as a payment method (see image)
Browser needs to support the Payment Request API (see caniuse) - which browser are you testing on?
It may help somebody having the same problem.
In my case I had to disable 3rd party cookie blocking (which was enabled by default) and had to check the option "Allow sites to check if you have payment methods saved" on the Payment Methods settings page in Chrome.
This might also be applicable account wide, since it started working on the Desktop and Smartphone.
so I am trying to integrate stripe checkout button (beta version that get's you to a Stripe checkout page) the problem is that the button is gray and plain and wasn't able to change size or color or format it in general.
I don't have any coding skills, I have tried to use a CSS custom button but not sure how can I link this to the original code.
So I appreciate if anyone could help me to either:
Have the ability to link the outcome of clicking on the stripe original button to one of my buttons OR
Help me format the button, by increasing it's size, using a specific font and choosing a color so that I can modify them myself.
Thanks a lot in advance
This is the code I am using:
<!-- Load Stripe.js on your website. -->
<script src="https://js.stripe.com/v3"></script>
<!-- Create a button that your customers click to complete their purchase. -->
<button id="checkout-button">StandardBlue</button>
<div id="error-message"></div>
<script>
var stripe = Stripe('KEYYYYYYYYYYYYYYYYYYYYYYYYYYYY', {
betas: ['checkout_beta_3']
});
var checkoutButton = document.getElementById('checkout-button');
checkoutButton.addEventListener('click', function () {
// When the customer clicks on the button, redirect
// them to Checkout.
stripe.redirectToCheckout({
items: [{sku: 'SKU', quantity: 1}],
successUrl: 'https://WEBSITE.COM/success',
cancelUrl: 'https://WEBSITE.COM/canceled',
})
.then(function (result) {
if (result.error) {
// If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer.
var displayError = document.getElementById('error-message');
displayError.textContent = result.error.message;
}
});
});
</script>
Pretty simple here. Just add css with the selector #checkout-button.
Here is an example: https://jsfiddle.net/tonyprovenzola/sb7dtakz/3/
button#checkout-button {
font-family:'Arial', sans-serif;
padding:10px 14px;
background-color:#255eba;
border-radius:10px;
color:#fff;
cursor:pointer;
border:none;
outline:none;
}
button#checkout-button:hover {
background-color:#112a51;
}
I am facing a challenge in integrating STRIPE Payment Request Button in my PWA using Polymer 2.0. I am not able to add the stripe payment button to the div inside template tag of the element.
I have a stripe-payment element created. It's basically a simple polymer element with template dom-bind and basic div tag inside a card.
What I wish to do is add the stripe payment request button to the div id = hostcard. At present the stripe payment request button is displayed on the top of the page in full width 100%.
Inserted code in comments in the element code below on what I tried to date.
Got 2 questions:
1. how can I add the button to the div hostcard so that it will be displayed inside the card?
2. is there a better way to show the payment request button from polymer element?
stripe-payment.html
<script src="https://js.stripe.com/v3/"></script>
<dom-module id="stripe-payment">
<template is="dom-bind">
<style include="shared-styles">
</style>
<template is="dom-if" if="[[signedin]]">
<div id="hostcard" class="card">
<div class="circle">3</div>
<h1>Stripe Payment</h1>
</div>
</template>
</template>
<script>
class StripePayment extends Polymer.Element {
static get is() { return 'stripe-payment'; }
static get properties() {
return {
user: { type: Object, notify: true, readOnly: false, observer: '_userChanged' },
};
}
ready() {
super.ready();
}
}
//STRIPE CODE
const DIVx = document.createElement('div');
const buttonSlot = DIVx.cloneNode();
buttonSlot.setAttribute('slot', 'button');
// Create stripe card wrapper
let button = DIVx.cloneNode();
button.id = 'payment-request-button';
// Add wrapper to slot
buttonSlot.appendChild(button);
//None worked -- either give null or undefined or function not defined
//this.$.hostcard.appendChild(buttonSlot);
//this.$$('#hostcard').appendChild(buttonSlot);
//var myElement = document.getElementById('stripe-payment'); - not working
//myElement.$.hostcard.appendChild(buttonSlot);
var element = this.shadowRoot;
console.log('Element is ->'+element);
document.body.appendChild(buttonSlot);
// Create a Stripe client
var stripe = Stripe('pk_test_**************');
// Create an instance of Elements
var elements = stripe.elements();
// Create a payment charges
var paymentRequest = stripe.paymentRequest({
country: 'AU',
currency: 'aud',
total: {
label: 'BizRec - Subscription',
amount: 100, //in cents
},
});
// Create an instance of Payment Request Button
var prButton = elements.create('paymentRequestButton', {
paymentRequest: paymentRequest,
style: {
paymentRequestButton: {
type: 'default' , // | 'donate' | 'buy' | default: 'default'
theme: 'dark', // | 'light' | 'light-outline' | default: 'dark'
height: '40px', // default: '40px', the width is always '100%'
},
},
});
// 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';
// Add an instance of the card Element into the `card-element` <div>
//cardElement.mount('#card-element');
}
});
paymentRequest.on('token', function(ev) {
// Send the token to your server to charge it!
fetch('/charges', {
method: 'POST',
body: JSON.stringify({token: ev.token.id}),
})
.then(function(response) {
if (response.ok) {
// Report to the browser that the payment was successful, prompting
// it to close the browser payment interface.
ev.complete('success');
} else {
// Report to the browser that the payment failed, prompting it to
// re-show the payment interface, or show an error message and close
// the payment interface.
ev.complete('fail');
}
});
});
window.customElements.define(StripePayment.is, StripePayment);
</script>
</dom-module>
At the moment, Elements does not support the Shadow DOM as you mentioned. If you use Polymer then you likely need to do some custom work on your end. You can see this project by a third-party developer which should help unblock things: https://github.com/bennypowers/stripe-elements
I can't figure out, just want to pass to checkout page a value as GET parameter
so that https://xxxxxx/?setAmount=200000 did go to a page with this script
<form action="custom action" method="POST">
<script
let params = new URLSearchParams(document.location.search.substring(1));
let amount=params.get(setAmount);
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_UUbDY16wDCECOujIs0vQ2vTi"
data-amount=amount;
data-name="Company"
data-description="Widget"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-zip-code="true"
data-currency="eur">
</script>
</form>
The checkout button show out but didn't get the amount parameter, so that no amount is defined.
I didn't have access to server side on the server hosting the website with the button so I need to go forth and back to another site using Podio Globiflow.
Stripe Checkout supports two modes -- Simple and Custom. Custom lets you control what pops up using javascript instead of data properties set on the server. To get the behavior you seek, you could do something like this:
$('#customButton').on('click', function(e) {
const params = new URLSearchParams(document.location.search)
const amountInCents = params.get("amount")
const displayAmount = parseFloat(amountInCents / 100).toFixed(2);
// Open Checkout with further options
handler.open({
name: 'Demo Site',
description: 'Custom amount ($' + displayAmount + ')',
amount: amountInCents,
});
e.preventDefault();
});
// Close Checkout on page navigation
$(window).on('popstate', function() {
handler.close();
});
It is worth noting, that this amount has no impact on how much you actually Charge your Customer and is only for display purposes. Checkout tokenizes the Card details; the amount Charged is entirely controlled by server side logic as outlined in the official Stripe docs.