Custom theme for Payment Request Button [Stripe] - javascript

Usually, we use a theme which was provided stripe like the following.
style: {
paymentRequestButton: {
theme: "light-outline"
}
}
They have also provided some theme's like 'dark' | 'light' | 'light-outline'
My question is can we create a custom theme for this button.? eg: a blue colour theme
Or is there any workaround or script hack for changing the color of the button.?

It is not possible to custom style the payment request button. However, you can use Stripe's payment request API with a custom button. The documentation only hints at this. Also, this should still be 100% PCI-compliant, as your application still never sees or touches any credit card information. I have a CodePen you can refer to as an example.
Essentially, just create whatever kind of button you want on your page. Then, bind the click event to paymentRequest.show, where paymentRequest is an instance of Stripe's PaymentRequest. For example:
let stripe = Stripe('pk_test_abc123');
let paymentRequest = stripe.paymentRequest({
...
});
let button = document.getElementById('awesome-custom-button');
button.addEventListener('click', paymentRequest.show);
Then, when you get the token, simply call ev.complete('success') before the end of the delegate function. For example:
paymentRequest.on('token', function (ev) {
// do whatever with the token
ev.complete('success');
});
The only slight hangup is that Apple dictates that the Apple Pay button must be styled a certain way, according to their HIG. The Stripe Elements payment request button handles this out of the box, but since you're no longer using the Elements button with this approach, you simply need to change your custom button manually. There's a number of ways you can do that. In my example code, I'm using Bootstrap and Fontawesome, so in the canMakePayment delegate function:
if (result.applePay) {
button.className = 'btn btn-dark';
button.style.backgroundColor = '#000';
button.querySelector('.default').style.display = 'none';
button.querySelector('.applepay').style.display = 'inline';
}
In my button HTML, I have a span with a "default" class that contains the normal button content and another span with an "applepay" class that is hidden initially and contains the following HTML:
<span class="fa-lg">
<i class="fab fa-apple-pay" data-fa-transform="grow-12"></i>
</span>
<span class="sr-only">Purchase with Apple Pay</span>

I've been trying to do this as well, but the reference docs here at the very bottom seem to indicate the answer is "no".
Looks like beyond a type, and theme the only thing you can set is a height: https://stripe.com/docs/stripe-js/reference#element-options
(Screenshot of relevant section below, in case it changes)

Reading Step 3 of Payment Request Button implementation steps, it is obvious the element has id: #payment-request-button.
Haven't worked with Stripe and I don't know if it's a <button> or a more complex HTML markup structure and I also read somewhere in their docs they do not guarantee maintaining the HTML structure of their elements.
Anyway, here are a few things to keep in mind when aiming this type of intervention: most importantly, develop in steps:
Find a solution that works for the time being. Ideally, it should be something that degrades/fails gracefully and silently (no public facing errors)
Maximize ability to withstand minor modifications in markup from Stripe
Also, keep your source files so you can easily adapt your solution to any markup breaking changes from Stripe so you can provide a fix when it stops working.
If you rely on CSS (recommended), you should inspect the currently rendered markup and find out what are the currently applying selectors. Simply writing stronger selectors should be enough. If styles are being applied via JavaScript by Stripe, chances are you will need to use !important in your CSS. Of course, you should avoid it as much as possible, or at least thoroughly test on as many devices as you can get your hands on.
As a rule of thumb, !important is quite bad in CSS. It's a very powerful hammer and most times it breaks delicate things (i.e.: responsiveness on touch devices).
Alternatively, if you rely on JavaScript to do the styling, you might want to play around with setTimeout() and determine the proper amount of miliseconds to wait before triggering your changes after the prButton.mount() method was called. Test on multiple devices. I advise against this method as it's more error prone and more difficult to control: you want to time your changes just after the element was built but (ideally) before it gets rendered. Of course, there are workarounds, such as hide or fade it until your changes are applied.
Note: This is not an easy task and nobody (except Stripe themselves, by providing a proper method) can guarantee you a bullet-proof solution so I thought laying out the principles on how to approach it might have more value on short and long term than trying to get Stripe working on a test/dev account and provide a particular solution which might stop working the next day, when Stripe change their markup.

Related

How to make stable bookmarklet for Gmail

I made a simple bookmarklet just add "is:unread" in Gmail search bar.
javascript:
(function () {
// add "is:unread" after the query
// e.g. "from:kim-kardashian" -> "from:kim-kardashian is:unread"
document.getElementsByClassName("gb_Df")[0].value =
document.getElementsByClassName("gb_Df")[0].value.concat("is:unread");
// click search button
document.getElementsByClassName("gb_Ef gb_Qf")[0].click();
}
)();
It worked well yesterday, but It doesn't work today because of the className has changed. I assume the className of search bar is changed for each session. If this is true, is there an alternative way that adds is:unread at the end of the search query?
3rd party resources outside of the your locus of control are generally never thought of as stable. This is why we have labeled versions (e.g., dev = always in flux) and contracts to try and approach stability.
For something like this HTML is generally more stable than class names, but would never say this plugin is stable while the use case is unsupported by Google.
So if indeed, what is stated is true, that the CSS class names change per session, could select from the DOM based on HTML structure or another attribute that is not hashed.
Just took a look at gmail and indeed gb_Df class name is the search bar. Guess is your account has been automagically opted into a an AB test of one gmail version to another which has generated different class name hashes.
In this scenario would choose placeholder. So something like:
document.querySelector('[placeholder="Search mail"]')
Based on experience (completely anecdotal), is very unlikely this value will change and there is currently one on the page. Could check other reasonably stable attributes to be sure you've the right one. Just keep in mind plugin hacks like this are unstable, can only incrementally increase stability by using more stable selectors, because the ground they rely on (Gmail DOM) is moving at the pace of Google. Good luck :)

TinyMCE - how do you use onClick instead of <a href=""> for links?

Is there a way to change the defalt behaviour of TimyMCE, so that when you insert a link, it renders something like this:
<span onclick="window.open('http://google.com', '_blank', 'location=yes');"></span>
instead of
Ideally, I would like this to be done by the Link button, but it could be done onSubmit.
ADDED:
The reason for doing this (as I know it seems like bad practice) is to be able to port to PhoneGap (using the InAppBrowser plugin), as is not intended for browser use.
Overlooking that this really isn't a good practice, I will assume you have a valid use case for wanting to do such black magic.
But before, a few things to consider:
I would advise you to keep links as links while working in TinyMCE. That way, your users will be able to insert and edit them as usual. Changing them to span elements inside the editor will practically eliminate the ability to edit them without editing the full source. You should probably convert them to span elements outside the editor.
If you're the stubborn type and don't care about #1 or your users, you should note that the default TinyMCE 4 configuration doesn't allow onclick attributes, so you'll need to update extended_valid_elements, otherwise they will be removed during the cleanup process.
There is probably a better way to do what you're trying to do. As #Vic suggested, an event listener would probably be a better option.
Nevertheless, I will humor you. Below is an overview of the process with a working example.
Overview
If you are developing with TinyMCE 3.x, you'll want to tap into the onSaveContent event. If you are using 4.x, use the saveContent event. In both cases, the concept is the same.
This event gets fired whenever the content of the editor is "saved". This happens automatically if TinyMCE is submitted as part of a form, but you can also use tinymce.triggerSave() to force it on all editors at once.
So, simply setup your callback function to replace all links with the evil span alternative. You can use pure JS or TinyMCE's built-in DOM utilities (probably only a good idea if you're already familiar with them), but for clarity (and sanity) it's much easier with jQuery.
Working Example
TinyMCE Fiddle: http://fiddle.tinymce.com/mAdaab/1
This example uses TinyMCE 4
Open your browser's console to see the output
After TinyMCE loads, press the Save button
The resulting HTML will appear in your console
Do with it what you wish, but remember that there probably is a better way.
What you are proposing is a really bad practice (as in not using anchor tags for links) wouldnt it be easier to actually give your link an id or class and attach event listener with javascript and on click prevent default behavour grab the href attribute and use your window.open?

css3 animation on click

The following zip contains the website html and required files: http://dl.getdropbox.com/u/4281191/login.zip
When you hover the html (html:hover) you see a animation that transforms the container into a loginbox, I want that to happen when I click on "Login" at the "Hello, Guest" menu instead.
Anyway to get this done? I'm new to js...
Additional info:
the css is inside the html,
and the css3 animation gets triggered by:
html:hover id/class {
property: value;
}
Thanks for any help!
And I can't vote at comments since I don't have enough reputation...but I could do some free design work for the person who helps me ^^
I still don't know much about animations, but for what matters here, you could use something like the .classname:active or .classname:focus selectors. But as soon as you click something inside it (e.g. a text box), the style will disappear.
So, for this, it really depends. Do you just want a menu that has links that take the user to another page (for this case, you'll be fine) or do you want a login form (for this case, forget it, use jquery)?
For today and future reference, save this link because it'll be your best friend:
http://www.w3.org/TR/selectors/#selectors
Update
Yes, I hovered but I didn't look at the code. I looked now and, unfortunately, the answer is no. You can't affect some upper level object like that using CSS.
For that use jQuery. The simpler way would be use jQuery to add a class to the element you want to change (like $("#the-object-id").addClass('class-name')). To keep the effect add the duration argument. Read this page about Adding a class using jQuery.

How to indicate links used as hooks for js? Or rel="js" semantic replacement

I'm looking for good/semantic/passing-validation way to indicate my links, that are used as hooks for javascript.
link
As I understand "rel" is more about relationships between documents. Also the "data-lang" (from here) doesn't feel to be a good enough solution.
Thanks a lot in advance!
You may use the class-attribute, or as of HTML5, the custom data-attributes.
If the link is an "enhanced" link, that will do pretty much the same that the usual link would do but in a more "user-friendly" way – such as a navigation link, that, when JavaScript is enabled on the page, will reload only the "content" part of the page and update the address of the page with HTML5 History API – then I would just use a semantic class, actually describing the links, such as "navigation".
In case they are JavaScript triggers and they wouldn't be functioning when JavaScript is off – I would suggest not using the a element at all. From the spec:
If the a element has an href attribute, then it represents a hyperlink
(a hypertext anchor). If the a element has no href attribute, then the
element represents a placeholder for where a link might otherwise have
been placed, if it had been relevant.
I believe that in most cases "action triggers" aren't really fitting the description of the use of an a element. Therefore, I would suggest using a span element, that would be styled in a way that would suggest that it's a trigger for interaction. Quoting the spec again:
The span element doesn't mean anything on its own, but can be useful
when used together with the global attributes, e.g. class, lang, or
dir. It represents its children.
Another suggestion regarding these triggers: use this line of code (the very first thing after the <title> in the head of your document) in order to give your html element a class js:
<script>document.documentElement.className = 'js';</script>
Then in your CSS do this:
/*
assuming that this is your mark-up for the pseudo-links:
<span class="action-trigger">Beautiful transition</span>
*/
.action-trigger {
display:none;
visibility:hidden;
}
.js .action-trigger {
display:inline;/* or whatever suits your styling of these elements */
visibility:visible;
}
This way, when JavaScript is disabled, users won't see "pseudo-links" that would be calling for action, but wouldn't actually work.
UPD. Semantically, in certain cases, you could also use form submit elements, such as <button>: as an example – you may trigger form submission – all the "voting"/"liking"/"deleting" functionality falls into this category. Which, when JS is disabled would really submit that form, but when JS is enabled that would trigger an action on the side of your back-end API.

What is the proper use of the anchor tag?

I've read how the anchor tag is holy, it should not be used with javascript:
Popup
that it should ONLY be used for a link to another page:
Take me over there
So what is the proper use of the anchor tag with javascript? Should I be using:
Energize!
or some other variant? I'm somewhat confused by different views on the subject. Also is it only SEO that I should be worried about if making the href a javascript piece? Or is it more of a proper web standards compliance deal?
Thoughts? Hopefully I'm not the only one confused.
You are not alone Jakub; even the biggest WWW companies use different approaches.
However based on experiences since Netscape days I wouldn't use :
Popup
which can make some troubles on some browsers, like opening an empty page or breaking the event order on the current page.
However;
Energize!
or;
Link
don't make a serious trouble and are ok to use. Note that the prior one may reset the scroll to the top.
You should use meaningful link targets and unobtrusive javascript wherever possible, but this is not always possible in real life examples. It's not a defined standard, but a method highly agreed by most of the web developers.
When it comes to standards, there is one related with this situation:
You should consider using a 'button' for inputs which doesn't really send the visitor to a page, but does an operation. This is also important for SEO.
As #Sime says (and it should be an answer really), it is considered "bad practise" to now directly reference javascript in any HTML object. So in these cases you attach the event using something like jQuery using the concepts laid out in "unobtrusive javascript".
As you mention another consideration is SEO and accessibility. If SEO is important to your site, make sure that the site is fully navigable using just standard links. Again you can manage this using "unobtrusive javascript", etc.
I've always gone with using an anchor as normal (i.e. specify either an alternate url that is another location where the user could perform what's being done through javascript, or use javascript:void() / #) then use the onclick event for anything you want executed.
You could also use a <span> if you're that worried about conformance, just would need to perhaps style it (change cursor, perhaps color as well) to make it visually obvious you're making it an action.
I think Facebook is the best-case example. Almost all of their links are javascript tied in, but they also have a "backup" page for those that either have disallowed javascript or don't have it (the later, in this day and age, being far less common). Take a look at a module that reacts like you'd like yours to and see how they've done it. They also invested a bunch of work in best-practices that you can benefit from.
If anything, you should bind your anchor links to javascript methods only by using unobtrusive javascript like Paul mentioned.
This means, using separation of concerns and leaving your markup being just that, html markup:
<a id="Jolter">Energize!</a>
and later
<script type="text/javascript">
$(document).ready(function(){
$("#Jolter").click(function(){
// doStuffHere ...
});
});
</script>

Categories