Stripe custom button - stripe-payments

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;
}

Related

Stripe Checkout Shipping Address

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'].

button does not function like a button, what errors exist in this Stripe-generated code?

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>

Unable to get Stripe elements to work with Vue.js

I am trying to get it so that a Vue component (currently have as just a route/view), will be able to display a styled version of Stripe Elements form for entering credit cards.
One other issue I am having is that I don't want to have the stripe js file loaded with every page like it does when in index.html. I am instead looking for it to just load on a single component/view.
My end idea is that I will have a button that when clicked will display a bootstrap modal and will show the Stripe Elements form which they then will enter their credit card info into which will, in turn, give me a token which I can then send to my backend along with an auth (JWT) header to do processing on my API.
So far I have tried mounting, creating, vue-strip-elements-plus examples and many more things.
I've included the entire Billing.vue file minus my stripe API key
I am not picky on how I do it whether it be with the way from the stripe docs or the package mentioned above.
<div class="container">
<form action="/charge" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button v-on:click="update">Submit Payment</button>
</form>
</div>
</template>
<script>
// Create a Stripe client.
var stripe = Stripe('pk_test_<key>');
// Create an instance of Elements.
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element.
var card = elements.create('card', {
hidePostalCode: true,
style: style
})
export default {
name: 'Billing',
data() {
},
mounted() {
card.mount('#card-element');
},
update: function() {
stripe.createToken(card).then(function(result) {
// Access the token with result.token
console.log(result.token) // I'd then send the token using axios to my backend
});
}
}
</script>```
I am expecting the token to currently be console.log which I can check in my browser

Polymer 2.0 Stripe Payment Request Button Integration

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

jQuery Mobile Alert/Confirmation dialogs

Is there a nice Sencha-like jQuery Mobile solution for Alerts and Confirmation dialogs?
Yes, the plugin is nice. However, if you don't need the full functionality, it's still much lighter in weight to roll your own simple dialogs. I use this:
<div data-role="dialog" id="sure" data-title="Are you sure?">
<div data-role="content">
<h3 class="sure-1">???</h3>
<p class="sure-2">???</p>
Yes
No
</div>
</div>
And this:
function areYouSure(text1, text2, button, callback) {
$("#sure .sure-1").text(text1);
$("#sure .sure-2").text(text2);
$("#sure .sure-do").text(button).on("click.sure", function() {
callback();
$(this).off("click.sure");
});
$.mobile.changePage("#sure");
}
You can use these wherever you need the confirmation dialog:
areYouSure("Are you sure?", "---description---", "Exit", function() {
// user has confirmed, do stuff
});
This plugin for jQM will style the confirmation box with jQM styling
http://dev.jtsage.com/jQM-SimpleDialog/
EDIT : This plugin has now been supserseeded by SimpleDialog2 which can be found here:
http://dev.jtsage.com/jQM-SimpleDialog/demos2/
Excellent code # Peter, but not to be generating consecutive events, it might be better to use unbind (), like this:
function areYouSure(text1, text2, button, callback) {
$("#sure .sure-1").text(text1);
$("#sure .sure-2").text(text2);
$("#sure .sure-do").text(button).unbind("click.sure").on("click.sure", function() {
callback(false);
$(this).off("click.sure");
});
$.mobile.changePage("#sure");
}
Thanks!
I had similar problem. I wanted to have easy to use function like standard confirm().
Since dialogs are deprecated in jquery mobile 1.4 (documentation), I decided to create my own fiddle:
function confirmDialog(text, callback) {
var popupDialogId = 'popupDialog';
$('<div data-role="popup" id="' + popupDialogId + '" data-confirmed="no" data-transition="pop" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:500px;"> \
<div data-role="header" data-theme="a">\
<h1>Question</h1>\
</div>\
<div role="main" class="ui-content">\
<h3 class="ui-title">' + text + '</h3>\
Yes\
No\
</div>\
</div>')
.appendTo($.mobile.pageContainer);
var popupDialogObj = $('#' + popupDialogId);
popupDialogObj.trigger('create');
popupDialogObj.popup({
afterclose: function (event, ui) {
popupDialogObj.find(".optionConfirm").first().off('click');
var isConfirmed = popupDialogObj.attr('data-confirmed') === 'yes' ? true : false;
$(event.target).remove();
if (isConfirmed && callback) {
callback();
}
}
});
popupDialogObj.popup('open');
popupDialogObj.find(".optionConfirm").first().on('click', function () {
popupDialogObj.attr('data-confirmed', 'yes');
});
}
I noticed strange behavior, when redirecting/clearing window was done on "Yes" button click. It started working in afterClose event, so that's why it's a bit complicated.
Here is a jsfiddle demo
This plugin
craftpip/jquery-confirm
was designed for mobile initially, is based on the bootstrap3 framework.
Supports alerts, confirms, modals, dialogs, and many options.
Simple to use.
$.alert({
title: 'title here',
content: 'content here',
confirm: function(){
//on confirm
},
cancel: function(){
// on cancel
}
})
Supports ajax loading, CSS3 animations, Responsive, etc.
[EDIT]
Detailed documentation can be found here
Features list:
Themes (android themes included)
Ajax loading content.
CSS3 animations (2D & 3D animations)
Animation Bounce options
Auto close (triggers a action after timeout)
Icons
background dismiss (closes the modal on clicking outside the modal)
Keyboard actions (ENTER/SPACE triggers confirm, ESC triggers cancel)
Detailed API for programmically changing content in modal.
I'm actively developing the plugin, please do suggest improvements and features.
I haven't seen anything with alerts as I think it uses the native look and feel for them. You should be able to customize them through another jQuery plugin and/or CSS.
Here is a jQuery Example
UPDATE:
Well the link is a 404 now and jQM 1.2 is out and offers popups:
http://jquerymobile.com/demos/1.2.0/docs/pages/popup/index.html
Try,
if (confirm("Are you sure?"))
{
/*code to execute when 'Ok' bttn selected*/
}

Resources