Stripe checkout disabled by specific JavaScript statement on page - javascript

I have implemented Stripe's Client-Only Dashboard Checkout (https://stripe.com/docs/payments/checkout/client) on an html page. I changed the quantity value in the Stripe JS code from the integer, 1, to a variable of my choosing called numb. I made no other changes to Stripe's JS code.
If I use my own JS code to change the value of numb to an integer of my choice then when I click the Checkout button the Stripe Checkout Page has updated the quantity and total price to reflect the value of numb. This is what I want.
The problem comes when, instead of numb = 2;, I use a JS statement which allows the user of the html page to change the value of numb. Here is the section of code:
<P>How many tickets do you want to buy?</p>
<input type="number" id="steve-number-tickets">
<button id="steve-testing">How many?</button>
<p id="test-for-numb"></p>
<script>
// ***MY CODE***
numb = 7;
// User Chooses
var howManyButton = document.getElementById('steve-testing');
howManyButton.addEventListener('click', function () {
numb = 2;
// numb = document.getElementById('steve-number-tickets').value;
// document.getElementById('test-for-numb').innerHTML = numb;
});
// ***END OF MY CODE***
</script>
With the code above as it is, I get the following behaviour. If the user refreshes the page and just clicks on the Checkout button, Stripe checkout bills them for 7 items. If they refresh the page and click my How Many? button and then the Checkout button, Stripe checkout bills them for 2 items.
If I change the code so numb = 2 is commented out and comments are removed from numb = document.getElementById('steve-number-tickets').value;, then if the user refreshes the page and clicks on the Checkout button, Stripe chekout bills them for 7 items. If they refresh the page and click my How Many? button (whether or not they first enter an integer into the input element) and then click on the Stripe Checkout button, Stripe checkout fails to load.
I thought it must be a problem with the statement: numb = document.getElementById('steve-number-tickets').value;. So, I tested that by uncommenting the statement document.getElementById('test-for-numb').innerHTML = numb;. When I do that, the value the user entered in the input element is displayed in the p element with id="test-for-numb" when they click on the How Many? button. So, that statement does work as expected.
I am unable to understand why Stripe checkout fails to load when I use the statement numb = document.getElementById('steve-number-tickets').value; but does load when I use numb = 2;.
I would really like to know what is going on.

This is because the value of an input is always a string -- the type=number only affects the UI, not the value type. You just need to wrap that in parseInt() to get an actual number, which is what the Checkout API expects.

Related

Need to click on input twice to see result

I have written a function to fetch the number of tags of a specific id on a page but need to click twice on the input in order to get the results to display. The actual filtering works on the first click but the number of results displaying only refreshes if I click the same input a second time once the page reloads. Below is the code I am using to designate the function and then call it. Any insight would be helpful.
function elementCount(){
var x = document.querySelectorAll('.box-shodow-container').length;
var y = x - 1;
document.getElementById('resource-count').innerHTML=y;
}
<input type="checkbox" onClick="elementCount()" value="Ask the Expert" name="apf" class="checkbox-primary" />

Retain the values after refeshing the page

How do I retain the value of like count even after refreshing the page in ruby on rails?
<p>
<input type="button" value="Like" id="countButton" />(<span id="displayCount">0</span>)
<script type="text/javascript">
var count = 0;
var button = document.getElementById("countButton");
var display = document.getElementById("displayCount");
button.onclick = function() {
count++;
display.innerHTML = count;
}
</script>
</p>
The above code increments the value of like each time we hit the like button. After refreshing the page the value of count be comes 0. What to do to retain the values of like after refreshing the page?
Web pages are stateless so every time you refresh the page, any values will be lost unless you specifically save them. If you want to save them forever, you will need to create a database table that saves the number of likes. Each time the like button is clicked you will need to save the new value to the d/b.
You will need a database backed model for whatever it is that is being liked. You may want to look at the rails guides, active record and learn about REST and RESTful routing
It all depends on what you want to do with the counter.
If it is user related, you can store the value in the user's session
like this : session[:counter] = 2.
If the counter should be shared between all users, you will have to create a new field in your database to store it.

Overriding difficult view model

I am trying to replace some text in an input field using JS but the view model overrides my commands each time. This is the HTML I start with:
<td class="new-variants-table__cell" define="{ editVariantPrice: new Shopify.EditVariantPrice(this) }" context="editVariantPrice" style="height: auto;">
<input type="hidden" name="product[variants][][price]" id="product_variants__price" value="25.00" bind="price" data-dirty-trigger="true">
<input class="mock-edit-on-hover tr js-no-dirty js-variant-price variant-table-input--numeric" bind-event-focus="onFocus(this)" bind-event-blur="onBlur(this)" bind-event-input="onInput(this)">
</td>
I run this JS:
jQuery('#product_variants__price').siblings().removeAttr('bind-event-focus');
jQuery('#product_variants__price').siblings().removeAttr('bind-event-input');
jQuery('#product_variants__price').siblings().removeAttr('bind-event-blur');
jQuery('#product_variants__price').siblings().focus()
jQuery('#product_variants__price').siblings().val("34.00");
jQuery('#product_variants__price').val("34.00");
And I'm left with the following HTML:
<td class="new-variants-table__cell" define="{ editVariantPrice: new Shopify.EditVariantPrice(this) }" context="editVariantPrice" style="height: auto;">
<input type="hidden" name="product[variants][][price]" id="product_variants__price" value="34.00" bind="price" data-dirty-trigger="true">
<input class="mock-edit-on-hover tr js-no-dirty js-variant-price variant-table-input--numeric">
</td>
The problem is that each time I click the input field the value is reverted to what it was when the page loaded.
I've also tried running the command in the parent td along with my value change, to simulate the editing of a variant and preventing default with no success:
jQuery('#product_variants__price').siblings().bind('input', function (e) {
e.preventDefault();
return false;
});
jQuery('#product_variants__price').siblings().bind('focus', function (e) {
e.preventDefault();
return false;
});
jQuery('#product_variants__price').siblings().focus()
jQuery('#product_variants__price').siblings().val("£34.00");
jQuery('#product_variants__price').val("£34.00");
jQuery('#product_variants__price').siblings().keydown()
Parent td function:
new Shopify.EditVariantPrice(jQuery('#product_variants__price').parent())
So how can I successfully edit this value in the inputs and also update the Shopify view model?
You can try this for yourself by going here:
https://jebus333.myshopify.com/admin/products/2521183043
login jebus333#mailinator.com
password shop1
EDIT: I've tried to find the view model on the page but with no success. Plus, there are no network calls when editing the values in the input fields, leading me to believe the values are being pulled back from somewhere on page.
Try this:
var old = Shopify.EditVariantPrice.prototype.onFocus;
Shopify.EditVariantPrice.prototype.onFocus = function(t) {
this.price = '50.00'; // Use the price you want here
old.call(this, t);
};
jQuery('#product_variants__price').siblings().triggerHandler("focus");
jQuery('#product_variants__price').siblings().triggerHandler("blur");
If it works for you, it's possible that the following will be sufficient:
Shopify.EditVariantPrice.prototype.onFocus = function(t) {
this.price = '50.00'; // Use the price you want here
};
Well, there is a kind of a dirty solution...
First of all you'll need a sendkeys plugin. In fact that means you'll need to include this and this JS libraries (you can just copy-paste them in the console to test). If you don't want to use the first library (I personally find it quite big for such a small thing) you can extract only the key things out of it and use only them.
The next step is creating the function which is going to act like a real user:
function input(field, desiredValue) {
// get the currency symbol while value is still pristine
var currency = field.val()[0];
// move focus to the input
field.click().focus();
// remove all symbols from the input. I took 10, but of course you can use value.length instead
for (var i = 0; i < 10; i++) field.sendkeys("{backspace}");
// send the currency key
field.sendkeys(currency);
// send the desired value symbol-by-symbol
for (var i = 0; i < desiredValue.length; i++) field.sendkeys(desiredValue[i]);
}
Then you can simply call it with the value you wish to assign:
input($("#product_variants__price").next(), "123.00");
I did not really manage to fake the blur event because of lack of the time; that is why I was forced to read the currency and pass .00 as a string. Anyway you already have a way to go and a quite working solution.
Looks like you're trying to automate editing of variant prices of products in Shopify's admin panel.
Instead of playing around with the DOM of Shopify's admin page, I'll suggest using Shopify's bulk product editor which lets you set prices of all variants in a single screen. I feel that you'll have better luck setting the variant prices using JavaScript on the bulk product editor page.
Clicking on the 'Edit Products' button as shown in the screenshot below will open the bulk product editor.
Also check if browser based macro recording plugins like iMacro can be of your help (you can also code macros with JS in iMacro).

Setting data attribute on stripe button

I can't figure this out. I checked other questions regarding setting data attributes, seems to be a tricky enough thing.
The stripe button amount is purely for aesthetics, I'm trying to set it ('data-amount') each time a user updates the quantity select box.
Every time I change the quantity select an alert gives the correct amount and if I inspect the dom the 'data-amount' attribute appears to be set correctly but when I click the stripe button the modal shows the default data-amount, i.e nothing.
Anyone know how to do this?
view (form, select input not shown)
<div class="stripe-controls" align="center">
<script src="https://button.stripe.com/v1/button.js" class="stripe-button"
data-key="ENV['STRIPE_PUBLIC_KEY'] %>" data-amount="">
</script>
</div>
coffeescript
$ ->
$('#order_quantity').click(orderTotal)
orderTotal()
orderTotal = ->
quantity = $('#order_quantity').val()
price = $('#ticket-price').data('url')
total = quantity * price
$('.stripe-button').attr('data-amount', total)
alert total
Specify a custom amount using StripeCheckout.open().
Note: I work at Stripe.

How can I get certain HTML from one page into a form onto another?

I've got a work calculator on a website I'm developing. After a person gathers the works he needs, how can I make it so when they click a button they are redirected to the contact us page and the works they've calculated are inserted into a text box?
Some more information:
In the calculator, the initial works are displayed in a table through the use of a Javascript script, like so:
for(var i=0; i < cartArray.length; i++){
var cartRow = $("<tr>", {
html:'<td class="itemname">'+cartArray[i][1]+'</td><td><input class="quantity" name="'+cartArray[i][0]+'" type="text" size="2" value="'+cartArray[i][3]+'"/></td><td>Remove</td>'
});
cartTable.append(cartRow);
totalCost += (cartArray[i][2] * cartArray[i][3]);
}
I only need the item name, quantity and total to be inserted into the textbox. How would I do this?
I would suggest you to use window.opener to refer to another page if both pages are in same domain.
For example:
document.getElementById("textfield1").value = window.opener.document.getElementById("textfield2").value;
Learn more about window.opener in https://developer.mozilla.org/en/DOM/window.opener

Categories