Refresh the StripeCardComponent upon successful addition of a new card

Using StripeCardComponent in conjunction with ngx-stripe, I'm encountering the issue of resetting the form after adding the Stripe card. Do you have any insights on how to achieve this?

<ngx-stripe-card [options]="cardOptions" [elementsOptions]="elementsOptions" (change)="cardUpdated($event)" (error)="error = $event"></ngx-stripe-card>
<div class="error">
  {{error?.message}}
</div>
<button (click)="getCardToken()" [disabled]="!complete">Get Card Token</button>

I attempted the following approach but faced issues with it not functioning as intended:

addcard(){
 (document.querySelector('.ElementsApp') as HTMLFormElement).reset();
}

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'reset' of null TypeError: Cannot read property 'reset' of null

Displayed Runtime Html

https://i.sstatic.net/sjdjV.png

Answer №1

I have discovered a solution that is functioning smoothly.

addCard(){
    this.element.clear();
}

Answer №2

A more advanced approach:

Pass the html element of ngx-stripe to your method and reset it

Example HTML code:

<ngx-stripe-card [options]="cardOptions" [elementsOptions]="elementsOptions" (change)="cardUpdated($event)"
#myStripeElement
 ></ngx-stripe-card>

<button (click)="clearForm(myStripeElement)">Clear form</button>

Component method:

clearForm(myStripeElement:any) {
    myStripeElement.element.clear()
}

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

Tips for customizing the appearance of specific rows in Angular Material Data Table

Is there a way to apply specific styles to individual rows in a data table based on certain JSON values? For instance, I want to color a row red if the temperature value is greater than 30, green if it's between 30 and 50, and else green. Currently, ...

How to retrieve information from JSON files utilizing arrays

I have a JSON object that contains connection points data in an array. Here is an example of the structure: assetType : "this" connectionPoints:Array(1) type:{name: "Structure", In my TypeScript file, I am handling this data like so (entity represents ...

Customizing WooCommerce: Renaming Dimensions Label

Within the WooCommerce products data table, there is a default attribute labeled dimensions that accepts values in the format LxBxH. I am interested in customizing this label from dimensions to packaging dimensions, both in the front-end and ideally in the ...

The value of a variable remains constant in an Angular controller

I am facing an issue with my HTML page that includes: <div ng-controller="MyCtrl"> <div ng-view>Some content</div> myVar: {{myVar}} </div> Along with an Angular controller: myModule.controller('MyCtrl', function($s ...

Steps to Deploying a Typescript Express Application on Azure App Services

As I work on deploying a Typescript express app in Azure app services, I encountered an error message when trying to access my app's URL: You do not have permission to view this directory or page. I followed the same deployment process that I typica ...

In Next.js, the elements inside the div created by glider-js are not properly loaded

I'm currently working on setting up a carousel in nextjs using the data retrieved from an API and utilizing glider-js for this purpose. However, I'm facing an issue where the div created by glinder-js does not include the elements that are render ...

Struggling to display text content from an array onto the HTML webpage

One issue I am encountering is my inability to use Javascript to change the text within an HTML p tag. I have an HTML button with the id="knap" and a p tag with the id="answer". My goal is to change the text in the "answer" tag when the user clicks on the ...

Having trouble with my delete button functionality in REACT

Whenever I attempt to delete using the button, nothing happens. Does anyone have any idea what might be causing this issue? My database is functioning correctly! Each time I click, I get a 404 error! I'm also seeing this warning: index.js:1 Warning: ...

Script update addressing CSS application to title attributes to resolve bugs

The following script adds a CSS class to the HTML title attribute. You can find the original page where the script is located here: How to change the style of Title attribute inside the anchor tag? Although it works well, there is a small issue. If the ti ...

Difficulty arises when attempting to create JSON using the Array.push() function from the data received via Ajax. The generated JSON is not successfully populating the tbody element

I am facing an issue while populating my tbody with data using the code below: function adaptSelectedBanks(banks) { console.log(banks.length); $(function() { banks.forEach(function (ba) { var c ...

Experience the ease of using drag and drop functionality with Angular's ng2-dragula feature

I'm currently implementing drag and drop functionality with ng2-dragula. While I've been able to successfully drag and drop, things have become a bit complicated due to the project requirements. My goal is to dynamically add disciplines to a mou ...

Formatting dates in Angular 2 and handling them in MongoDB with Express

I am currently working with Angular 2 and ExpressJS along with MongoDB. I have a date format that is being retrieved as 2016-06-02T14:20:27.062Z, but I need to display it in the format 06/02/2016 14:20:27 Express: In models/user.js: var userSchema = Sch ...

Troubleshooting issue: AJAX causing JavaScript form validation to fail

I'm having trouble with form validation using JavaScript + AJAX. It doesn't seem to be working properly. Could someone please help me figure out what I'm doing wrong? function validateform() { $.ajax({ url: '../api?type=vali ...

Function that is triggered repeatedly when modifying the state within it

Within my render method, I am calling a handlePageClick function like this: onPageChange={this.handlePageClick} The function itself looks like this: handlePageClick = data => { this.setState({ circleloading: true }); let names = ...

Why is it that when I refresh a page on localhost, the file download gets stuck until I close the page?

As I work on my HTML/JS files hosted on localhost with Node, I've noticed that when I make changes to the code, Webpack automatically rebuilds the JS files. However, there are times when, after making updates and trying to refresh the page, the downl ...

Encountering a "400 Bad Request" error when using Ajax within WordPress

I've been trying to submit a form using Ajax within a plugin. I had two plugins, the first one was initially working but has stopped now and I can't seem to find any errors. I don't think the issue lies in the code itself, but I'm feeli ...

combine 2 documents

Two HTML files are on my hands. Both of these HTML files need to be combined. Is there a method in JavaScript or Jquery that can merge two files into one? I have looked at the append and other functions in Jquery, but I am dealing with two large files. ...

Leveraging reframe.js to enhance the functionality of HTML5 video playback

I'm struggling with using the reframe.js plugin on a page that includes HTML5 embedded video. When I try to use my own video file from the same folder, it doesn't work as expected. While everything seems to be working in terms of the page loadin ...

Next.js allows you to create a single page that corresponds to the root path '/' as well as a dynamic route '/param'

I have a single-page website built with Next.js. The home page, which displays a list of products, is located at route / and the corresponding code can be found in pages/index.js. Each product has an id, allowing users to jump directly to it using /#produc ...

Creating a table with a static first column and vertical text positioned to the left of the fixed column

To create a table with the first column fixed, refer to this fiddle link: http://jsfiddle.net/Yw679/6/. You also need a vertical text to be positioned to the left of the fixed column in a way that it remains fixed like the first column. The disparities be ...