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

Currency unique to a specific culture

Recently, I encountered an issue while working on a website that involved using JavaScript code to format currency values. Here is the snippet of code that was causing the problem: UsdAmount.toLocaleString(siteCulture, {style: 'currency', ...

javascriptc#currencycultureinfo

Can you explain the distinction between JSON syntax and object assignment in programming?

While exploring the Twitter Client example on Knockoutjs, one may notice that some properties are included in the JSON object while others are assigned outside of it. What distinguishes these two approaches? And why can't methods such as findSavedList ...

javascriptjsonknockout.js

How to utilize dot notation in HTML to iterate through nested JSON in AngularJS?

I'm struggling with displaying nested objects loaded from a JSON file in Angular. I've seen examples of using dot notations in HTML to access nested data, but I'm new to Angular and can't seem to get it right. The JSON is valid, but I j ...

javascriptjsonangularjsangularjs-ng-repeat

When sending an AJAX request to a URL, can I verify in the PHP page whether it is a request or if the page has been accessed?

In order to enhance security measures, I need to prevent users from accessing or interacting with the php pages that will be utilized for ajax functionality. Is there a method available to determine if a page has been accessed through an ajax request or b ...

phpjavascriptjqueryajax

Tips on handling a Vue computed property

I am struggling to dispatch an object that is created within a computed property in vue.js. Being fairly new to this framework, I can't seem to make it work. My goal is to dispatch the object named "updateObject" to the vuex-store. I have tried using ...

javascriptvue.js

The addition of the URL # fragment feature to Safari's browser caching system

Currently, I am focused on improving the speed of our website. To achieve this, the client is utilizing ajax to preload the expected next page of the application: $.ajax({url: '/some/real/path', ...}); Upon receiving a response from the server ...

javascriptajaxcachingsafarifragment

Interested in integrating server side JavaScript with your Android application?

Running a simple web page on a Raspberry Pi to toggle the board's LED with the click of a button. The button triggers a JavaScript function that controls the LED. Now, I want to be able to call this script from a button in an Android application... B ...

javascriptandroidjquery

Removing a row from a table in AngularJS connected to FireBase

I am currently facing an issue where the function fails to work when attempting to delete a row. My goal is to be able to remove a specific row from the table by clicking on the red button. Here is the link to my plunker code In index.html, I have includ ...

javascriptangularjsfirebase

How to vertically align text within a container in Bootstrap?

Lately, I've been facing a challenge in my attempts to vertically center text while also incorporating a full-width background image. The goal is for the centered text to maintain its position regardless of the height of the enclosing container. This ...

htmltwitter-bootstrapcss

The add-on for imageminJpegTran is designed to rotate images with ease

When I compress a buffer obtained from a file and rewrite it as a compressed version in memory, I am facing an issue where vertical images are being rotated while square and rectangle images are compressed correctly. Is there a way to pass options to the ...

javascriptnode.jsnpmimagemin

Learn how to effortlessly move a file into a drag-and-drop area on a web page with Playwright

I am currently working with a drag-zone input element to upload files, and I am seeking a way to replicate this action using Playwright and TypeScript. I have the requirement to upload a variety of file types including txt, json, png. https://i.stack.img ...

javascripttypescriptfile-uploaddrag-and-dropplaywright

Authorization setup encountered an issue: an unexpected character was found at the beginning of the JSON data on line 1, column

I'm currently in the process of setting up a login page for users on my website, using mongoose, express, bcrypt, and nodejs. However, I am encountering an issue when trying to input the username and password. The error message that I receive is as fo ...

javascriptnode.jsjsonmongoose

Utilizing Phonegap to implement a QR scanner specifically designed for iPhones

Currently, I am in the process of developing an iPhone application through Phonegap. My goal is to incorporate a basic QR scanner into the app, and I'm searching for the most effective solution. Despite attempting XZing, I encountered numerous bugs al ...

jqueryiphonecordova

Is it possible for CSS in React to cause the vanishing of all buttons

I'm encountering an issue where the CSS styling applied to every button in my NavBar is causing a specific button labeled 'Search' to disappear when it shouldn't. The problem stems from NavBar.css, which contains a media query that unin ...

htmlcssreactjs

Shifting the data label on a pie chart in ApexCharts - what's the trick?

I need help adjusting my data labels to make them more readable by moving them inward. It would be perfect if there is a way to dynamically center them within the slice. https://i.stack.imgur.com/bCelP.png Despite reading the documentation and trying dif ...

javascriptjqueryapexcharts

Encounter issue with async function in produce using Immer

Having an issue while attempting to create an asynchronous produce with immer. When calling the async function, this error is encountered: Below is my code snippet: import { combineReducers, createStore } from 'redux'; import produce from ' ...

javascripttypescriptreduxreact-reduximmer.js

Rect cannot be resized using mouse events

I am currently working on resizing the rectangle inside the SVG using mouse events. To achieve this, I have created another circle shape at the right bottom edge of the rectangle and implemented resize events on that shape. However, I'm facing an issu ...

javascriptreactjstypescriptsvgevent-handling

Showing the date in AngularJSAngularJS can be used to

I have a view set up in AngularJS and I'm attempting to show the current date in a formatted way. My initial thought was to use <span>{{Date.now() | date:'yyyy-MM-dd'}}</span> to display the current date. ...

javascriptangularjs

Mastering the Art of Defining JavaScript Classes in React-Native

In my React Native project, I am faced with a situation where I need to create a new class: class customClass { email: string; name: string; constructor() { setUser(fbid: string, token: string): boolean { To keep things organized, I decide ...

javascriptreactjsreact-native

Angular 6 - Share content easily on mobile devices (IOS, Android)

After reviewing this example detailing the use of Angular 5 for copying to clipboard, I encountered issues when trying to run it on the iPhone 6s. Is there a more comprehensive solution available? ...

javascriptangular