Adjusting the Stripe Button to Utilize a Unique Button Class

I have a stripe button on my website and I want to add my custom class to it. I discovered that manually creating the CSS for it can work, but I prefer to maintain consistency across all buttons on my site by using my custom class.

No matter what I attempt, I am unable to remove the default button styling.

<form action="/update-the-card" method="POST">
    {{ csrf_field() }}
    <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="{{ env('STRIPE_KEY') }}"
    data-name="My site"
    data-panel-label="Update Card"
    data-label="Update Card"
    data-allow-remember-me=false
    data-locale="auto">
    </script>
</form>

The class I want to apply is 'button fstyle1 thin'.

I've attempted the following code, but it does not achieve the desired outcome.

 $('button.stripe-button-el').removeAttr('style').addClass('button fstyle1 thin')
javascriptjquerycssstripe-payments

Answer №1

Figured out the solution. Simply include your own custom submit button and hide the default one provided by Stripe. It's a straightforward process.

<form action="/update-the-card" method="POST">
    {{ csrf_field() }}
    <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
        data-key="{{ env('STRIPE_KEY') }}"
        data-amount="44040"
        data-name="nameeee"
        data-description="descriptionnn"
        data-locale="auto">
    </script>
    <script>
        // Hide default stripe button, make sure to adjust if you
        // have multiple buttons with that class
        document.getElementsByClassName("stripe-button-el")[0].style.display = 'none';
    </script>
    <button type="submit" class="button green fsize-16 f-weight-400">Purchase Here!</button>
</form>

Answer №2

Could it be possible that your CSS class (button fstyle1 thin) has a lower specificity than .stripe-button-el?

Consider using !important in your CSS.

You could also try adding more CSS combinators such as: .a .b .c form .fstyle1

I hope this information helps!

Answer №3

It is possible that your element with the class .button.stripe-button-el does not exist in the DOM at the time of binding (meaning it is created dynamically).

In such cases, you can bind your event handler to a higher element like $(document).

Try using $(document) instead...

$(document).find("button.stripe-button-el").removeAttr("style").addClass("button fstyle1 thin");

Answer №4

Following @victory's suggestion, a simple way to address the issue is to conceal the button provided by Stripe using the following code:

document.getElementsByClassName("stripe-button-el")[0].style.display = 'none';

In case there are multiple Stripe buttons on a single page, you can apply this solution:

<script>
  var all_buttons = document.getElementsByClassName("stripe-button-el");
  for (var i = 0; i < all_buttons.length; i++) {
    all_buttons[i].style.display = "none";
  }
</script>

Enjoy coding!

Answer №5

Give this a shot:

$(document).find("button.stripe-button-el").removeAttr("style").addClass("'btn custom-style1'");
$(".stripe-button-el").find("span").remove();
$(".stripe-button-el").html("Click here to proceed with payment");

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Best placement for transition effects in a dropdown menu animation

<div class="dropdown"> <button class="dropbtn">ALAT</button> <div class="dropdown-content"> <a href="index2.php"><img src="home.jpg" class="home" width="7 ...

htmlcssdrop-down-menucss-animationscss-transitions

Updating or deleting text from href with jquery / javascript

I am currently attempting to utilize the replace() method in order to eliminate specific strings from hyperlinks on my HTML pages. I have found several tutorials that demonstrate how to accomplish this using replace(), which seems to work well in IE. Howev ...

jqueryreplacehref

Can multiple print buttons in different modals be connected to individual divs within their respective modals?

I am currently developing a webpage using the Foundation 5 framework that features a table of information. Each row in the table contains a link that, when clicked, opens a specific modal displaying detailed information related to that row. I want to add a ...

javascriptjqueryhtmlcsszurb-foundation

What is the best way to place a semi-transparent black overlay on an image?

<html> <head> <style> #contain_main {background-color:black; width:100%; height:auto;} #main {width:100%; height:700px; background-image:url("https://www.sappun.co.kr/shopimages ...

htmlcss

Having trouble making md-data-table directives function properly

I'm struggling to incorporate the md-data-table library from https://github.com/daniel-nagy/md-data-table into my webpage. Despite loading the library in Chrome, none of the directives seem to be working. Here's a snippet of my code - can anyone ...

javascriptangularjs

Express API encounters an issue with multer and body-parser as req.file is undefined

I am in the process of developing an API that will need to handle file uploads along with other GET and POST requests. To manage file uploads, I am using 'multer' while utilizing 'body-parser' for all other HTTP requests. My goal is to ...

javascriptnode.jsexpressmulterbody-parser

What's the best way to transfer a variable from a PHP file to a jQuery AJAX file so that it can be used as the URL parameter when sending

I am just starting out with javascript, jquery, and ajax. Unfortunately, I've encountered an issue where my code is not working as expected. Below, you can find a detailed description of my code and the problem at hand. If someone could offer some ass ...

phpjavascriptjqueryajax

Cannon-js: Experience dynamic body bouncing on the y axis as it reacts to force applied on the x and z axes

Currently, I am working on an FPS game where the player controller applies force based on keyboard inputs to a dynamic cannon body. The angular dampening is set to 1 on the player body. The PlayerController class takes both the player class (which extends ...

javascripttypescriptthree.jscannon.js

Styling your printed documents in Next.js 10

Within my Next 10 application, I am able to bring in global styles by importing them in _app.js in the following manner: import 'assets/css/app.css' I want to incorporate a print stylesheet as well. Instead of using a @media print { } query with ...

cssnext.jsprint-style

implementing AJAX functionality in Laravel when a drop-down item is selected

Hello there, I am a newcomer to the world of coding and I'm currently learning Laravel for a personal project. My goal is to retrieve data from a database based on the selection made in a dropdown menu. Here's the code for the dropdown menu: < ...

javascriptphpajaxlaravel

Sending Form Data to Server using AJAX

Hello everyone, I have encountered an issue with my code. I am unable to process the data to the back-end. When I enter data into the Register form and submit it, the data is not being passed. Instead, the page simply reloads. Could someone please help ...

jqueryajaxjson

a solution to the focus/blur issue in Firefox's browser bug

I have created the following script to validate if a value entered in an input field already exists in the database. $('#nome_field').blur(function(){ var field_name=$('#nome_field').val(); $.ajax({ url: " ...

javascriptjqueryfirefoxonbluronfocus

Combining button id with bound values in jQuery

This is a custom div tag. <div id="generate"> </div> The dynamic HTML I created includes an input type button control that is bound with a unique message ID for easy differentiation while clicking. <input type="button" onclick="return ...

jqueryajax

`Launch link in new browser window`

Seeking assistance with a coding issue. I'm attempting to have links open in a new tab, but I haven't been successful using the href attribute. Below is the code snippet from src/utils/menu.js: const menu = [ { name: 'App& ...

javascriptreactjsmenuexternal-links

A guide on updating data with Vue-SweetAlert2 by passing user input

I'm currently working on creating a "create" button that will prompt a popup with a text input field for the user, similar to the image below. The expected behavior is that when the OK button is clicked, the name entered in the text field should be s ...

javascriptvue.jsvue-sweetalert2

Angular2 allows you to create pipes that can filter multiple values from JSON data

My program deals with an array of nested json objects that are structured as follows: [{name: {en:'apple',it:'mela'}},{name:{en:'coffee',it:'caffè'}}] I am looking to implement a pipe that can filter out objects b ...

javascriptjsonangulartypescript

The hover effect generates a flickering sensation

I am having trouble displaying options on an image when hovering over it, as the displayed options keep flickering. $('a').hover(function(event) { var href = $(this).attr('href'); var top = $(this).next().css("bot ...

javascriptjqueryhtmlasp.netcss

What is the process for storing form data into a text file?

Despite seeing similar questions in the past, I am determined to get to the bottom of why this code isn't functioning as expected. My goal is to input form data into a .txt file using a post request. While I lack extensive knowledge of PHP, I am pieci ...

javascriptphphtmlforms

Guidelines for queuing method calls using Vue.js

Is there a way to invoke a method using a queue system? Imagine having a method that makes API calls and can only handle 3 calls at once. If more than 3 calls are made from a component, the remaining ones should wait until one call finishes before proceedi ...

javascriptvue.js

Manipulating the location where a dropdown menu intersects with a button

Is there a way to adjust the drop-down menu positioning so that it aligns with the button on the top right side of the menu pop-up, rather than the top left as it currently does? Below is the code I have borrowed from an example on W3Schools. .dropbtn ...

htmlcss