Tips for sending CSS and HTML elements back to the client's browser after a Form-POST action and JavaScript

I am currently working on a project to create a platform where users can easily make payments to each other. I aim to simplify the process using JavaScript and HTML Forms, similar to how Stripe offers Checkout buttons (as seen in the sample code below).

<form action="" method="POST>
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_czwzkTp2tactuLOEOqbMTRzG"
    data-amount="2000"
    data-name="Demo Site"
    data-description="2 widgets ($20.00)"
    data-image="/128x128.png">
  </script>
</form>

My inquiry revolves around the following aspects:

  1. What is the underlying logic behind creating an attractive button that integrates CSS and HTML elements to display on the client's browser?
  2. Once a user clicks on the button, how do we pass custom elements like Price Service and Service Description to the same JavaScript responsible for rendering CSS and HTML? Is it all managed within one Javascript file, or is there more complexity involved?

I appreciate any professional insights you may have on this matter as I strive to replicate this functionality effectively.

javascriptjqueryhtmlcssforms

Answer №1

My theory is that Stripe's script, when activated, searches the DOM for a specific script element labeled with the stripe-button class.

Once located, they likely insert their button component next to that script element and then include all necessary event handlers.

Consider this hypothetical scenario:

purchase.js

jQuery(function ($) {
    var $customScript = $('script.stripe-button'), //locate script element
        //generate button
        $newButton = $('<button type="submit">').addClass('stripe-button').text($customScript.data('text'));


    $customScript
      //place button after the script element
      .after($newButton)
      //monitor form submission event
      .closest('form').submit(function (e) {
          console.log('initiating purchase process');
      });
});

Markup

<form>
    <script src="purchase.js" class="stripe-button" data-text="Purchase Now"></script>
</form>

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

What is the best way to verify that a check should have various attributes using chai-things?

Searching for a way to verify if an array in my mocha tests consists of an Object in my Node.js application, I discovered that with Chai-Things, I can use: [{ pet: 'cat' }, { pet: 'dog' }].should.include({ pet: 'cat' }) or ...

javascriptnode.jsmocha.jschai

Change the width of the webpage inside the iframe

I am working with an iframe that has a fixed width and height of 400px. I want to load a web page in the iframe, but I need to adjust the width of the source to fit my iframe perfectly. The height is not an issue as I can add a scrollbar if needed. Here ...

javascriptjqueryhtmlcssiframe

Sending data to and retrieving data from a server

Just a quick query. I've been using ajax POST and GET methods to send JSON data to a server and then fetch it back. However, I'm facing some confusion while trying to extract JSON information from the GET call. getMessage = function(){ $.ajax ...

javascriptjqueryjsonajax

Unable to create transparent div

I am currently working on a test page located at this link. As you scroll down the page, you will notice that the logo remains fixed in the background while an area I have painted purple scrolls over it. I chose to make this area purple temporarily for vi ...

htmlcss

Aligning hyperlink with full-height image within a table cell (navigation buttons)

I am currently working on creating a traditional navigation bar that occupies 20% of the screen width and consists of 3 buttons. Each button is supposed to have an icon that is centered both vertically and horizontally. Additionally, I want the buttons to ...

javascripthtmlcss

When sending an Axios POST request, a "Network Error" message may be received even when the status code is 200 and there is a valid response

Currently, I am utilizing Vue JS version 2.5 along with Axios: "vue": "^2.5.17", "vue-axios": "^2.1.4", "axios": "^0.18.0", The main issue I am facing involves making a POST call like so: const data = querystring.stringify({ 'email& ...

javascriptvue.jsnpmvuejs2axios

I am looking for the best way to sort my JSON data based on user roles before it is transmitted to the front end using Express and MongoDB. Any

I scoured the internet high and low, but to no avail - I couldn't find any framework or code snippet that could assist me in my predicament. Here's what I'm trying to achieve: whenever a response is sent to my front-end, I want to filter th ...

javascriptnode.jsmongodbexpressbackend

Tips for organizing JSON data in AngularJS are as follows:

Can someone assist me in looping this array value into 3 columns using angularjs? Currently, my view appears as an HTML table with 3 columns, but the values are displayed vertically instead of horizontally. You can see an example of how it looks here. Bel ...

htmlangularjsjsonangularjs-ng-repeat

External JS file not executing function in AJAX response (only runs when function is directly included in AJAX response)

My issue involves an AJAX response not executing a simple jQuery function that is located in an external JS file. The function only runs when its code is directly placed within the AJAX response view. The page containing a link for dynamically loading AJA ...

javascriptjqueryajax

Error in zone: 140 - Property 'remove' is not readable

I'm brand new to kendo ui. I successfully set up a prototype in my fiddle with a working delete confirmation window. However, when I try to integrate it into my existing codebase, I encounter an error: Cannot read property 'remove' at the li ...

javascriptjqueryhtmlangularkendo-ui

using knockoutjs to connect viewmodel with ajax requests and computed functions

Just diving into knockoutjs and I'm curious about how to achieve this. I want to include a src attribute that will have both static and dynamic content. Please see below var viewModel = { title : ko.observable("title"), description : ko.obser ...

jqueryajaxknockout.js

Tips for adjusting the vertical position of an image within a bootstrap column by a small amount

Apologies in advance if this question has already been addressed, and I am struggling to adapt it to my specific scenario. My objective is to adjust the positioning of the two images shown in the screenshot example below so that they align with the grey b ...

javascripthtmljquerycsstwitter-bootstrap

Is it possible to streamline this HTML using jQuery to generate it?

I've been working on creating little speech bubbles for an upcoming website. While the code to make these divs is functional, I find it repetitive and time-consuming to write out every time I want to add a bubble. My solution is to utilize jQuery and ...

jqueryhtml

Creating a sleek dark-themed table using Bootstrap's HTML

While browsing through https://getbootstrap.com/docs/4.0/content/tables/, I came across a table with a really dark background towards the bottom of the page. I tried copying the code into an HTML document, but it didn't seem to work. After tinkering w ...

htmlcssbootstrap-4

The information retrieved from the API is not appearing as expected within the Angular 9 ABP framework

I am facing an issue with populating data in my select control, which is located in the header child component. The data comes from an API, but for some reason, it is not displaying correctly. https://i.stack.imgur.com/6JMzn.png. ngOnInit() { thi ...

javascriptangulartypescriptasp.net-coreabp

Employing parseFloat() and parseInt() functions together with regular expressions in JavaScript for converting a Comma Separated Values (CSV

I've been working on converting a CSV file to a local 2D array and I'm curious if there's a more efficient method of changing strings to floats/int rather than relying on regex paired with parseFloat() / parseInt. Any bright ideas or sugges ...

javascriptregexstringfloating-pointinteger

Modify the placeholder HTML once a username has been submitted

In order to maximize efficiency, I have included an input box with a placeholder that reads: <input id="username-search" placeholder="explore another user's work"> Once the username is entered, I want to modify the placeholder text to somethin ...

javascript

Challenges encountered while using JQuery Validation for a form submission for the second time (JQuery Steps)

Currently, I am implementing JQuery Steps for the registration form on my website. The registration process involves three steps: Personal > Company > Confirm. I have configured the form to display error messages in the "placeholder" if a textbox is ...

jqueryajaxasp.net-mvcjquery-plugins

Ways to exclusively allow cookies from my API server

I am running an Expressjs API server on localhost:4000, and my client on localhost:8008. Is there a way to ensure that my client only accepts cookies originating from my API server? At the moment, I am using fetch with credentials: 'include' to ...

javascriptnode.jsexpressfetchsession-cookies

How come the parameters in my function are being displayed as boolean values in JSDocs when that is not the intended behavior?

I am documenting my journey of following the React tutorial for tic-tac-toe, and I'm puzzled as to why the parameters of my function are showing up as boolean values in JSDocs when they are not supposed to. When I hover over the function with my curs ...

javascriptreactjsjsdoc