Customize Stripe Checkout Form

Question

I'm currently working on a stripe payment method inside my Angular application. By default, the stripe form has an 'email' input field of type 'email'. I wanted to change that input filed to 'Name' with the type 'text'. I've tried different methods but none really work Can somebody help me in this regard. Any help would very much appreciated. Thanks.

I'm Attaching a stripe form picture for further assistance.

MY Stripe method Implementation

loadStripe() {
console.log('loadStripe');
if (!window.document.getElementById('stripe-script')) {
  let s = window.document.createElement('script');
  s.id = 'stripe-script';
  s.type = 'text/javascript';
  s.src = 'https://checkout.stripe.com/checkout.js';
  s.onload = () => {
    console.log('token');
    this.handler = (window as any).StripeCheckout.configure({
      key: this.stripKey,
      locale: 'auto',
      token(token: any) {
        // You can access the token ID with `token.id`.
        // Get the token ID to your server-side code for use.
        console.log('token', token);
        alert('Payment Success!!');
      }
    });
  };

  window.document.body.appendChild(s);
}

}

Jesper Jesper · Accepted Answer · 2020-09-22T11:57:29

Don't do this! Stripe Checkout is not supposed to be customized in this way and does not directly post data to your server but to Stripe's server. Whatever happens from when you bring up the Checkout panel to when they call you with a token is Stripe's web application, not yours, and may change at any time. If you try to change them, not only is your code prone to break from one day to another without warning, Stripe may detect it and think that the user's browser is running malware because you're not supposed to do that, and chances are attempting to change their UI is also a breach of contract.

If all you want to do is to pre-populate the email address with the one they've already written, you can pass it as the key email in the object passed to StripeCheckout.configure. But you're meant to collect all other information using your own form.

If you don't want to collect their email address and don't want Stripe Checkout to do so either, stop using Stripe Checkout and build your own form including credit card entry fields with Stripe Elements.

Customize Stripe Checkout Form

1 Answers