CODEWITHSUNDEEP
angularstripe-payments
Navaneetha Krishnan
Navaneetha Krishnan

Reputation: 21

Customize stripe payment forms height and width using checkout.js

I'm using stripe(checkout.js) as payment gateway to make the payments in Angular

I have added the script at the run time, I need to resize the height and width of checkout form.

can anyone let me know anyway we can configure the customized height and width of the form provided by stripe ? or whats the possible other way to customize this particular form ?

attached form image for the reference

Code where dynamic data is provided for the stripe

**paymentHandler.open({
      name: 'Smilo',
      description: 'OHR Detailed Report',
      amount: this.payment_amount * 100,
      currency: 'aud',
      image:'assets/images/favicon.png',
      email: this.user_email,
      height: '500px', // some option to configure height
      width: '500px', //  some option to configure width  
      closed: ()=>{  this.handleCloseBtnFunction();      } 
    });
    }**

Complete piece of code

async ngOnInit() 
{
  await this.invokeStripe(this.payment_amount,this.api_key);
  setTimeout(() => {
    // this.paymentBtn.nativeElement.click();
    this.initializePayment();
    }, 1000); 
}


initializePayment() {
// console.log("initializePayment :  ");
const paymentHandler = (<any>window).StripeCheckout.configure({
  key: this.api_key,
  locale: 'auto',
  token: function (stripeToken: any) {
   // console.log( " stripeToken.id : " + stripeToken.id)        
    if(stripeToken.id!='')
    {
      processPayment(stripeToken);
    }
    // alert('Stripe token generated!');
  }
});

const processPayment = (stripeToken:any) =>
{
this.apirequest = [];
this.apirequest["widget_token"] = this.widget_token;
this.apirequest["stripe_token"] = stripeToken;
this.apirequest["payment_amount"] = this.payment_amount;
this.apirequest["selected_branch_id"] = this.selected_branch_id;
this.apirequest["report_id"] = this.report_id;
this.apirequest["report_type"] = "ohr";
let input = this.appservices.generteJSONFromArray(this.apirequest);
this.submittedForm = true;
// console.log(input);
this.appservices.callJSONAPI(this.appservices.MAKE_STRIPE_PAYMENT, input, 'post', this, '').subscribe(
  (data: any) => 
  {
    console.log(data);
    if (data.status && data.status_code=='1') {          
      this.appservices.setSession("payment_successful", 'true', false);
      this.router.navigate(['payment-oral-health-score-completed']);
    }
    else 
    {
      this.errorMsg = data.message;
      this.paymentInProgress = false;
      setTimeout(() => {
      this.router.navigate(['payment-access-report']);     
    }, 5000);
    }
  })
}

**paymentHandler.open({
  name: 'Smilo',
  description: 'OHR Detailed Report',
  amount: this.payment_amount * 100,
  currency: 'aud',
  image:'assets/images/favicon.png',
  email: this.user_email,
  closed: ()=>{  this.handleCloseBtnFunction();      } 
});
}**


async invokeStripe(paymentAmount:any,api_key:any) {
if(!window.document.getElementById('stripe-script')) {
  const script = window.document.createElement("script");
  script.id = "stripe-script";
  script.type = "text/javascript";
  script.src = "https://checkout.stripe.com/checkout.js";
  script.onload = () => {
    this.paymentHandler = (<any>window).StripeCheckout.configure({
      key: api_key,
      locale: 'auto',
      token: function (stripeToken: any) {
        console.log(stripeToken)
        alert('Payment has been successfull!');
      }
    });
  }
  window.document.body.appendChild(script);
}
}

reference image

Upvotes: 2

Views: 2492

Answers (2)

Alexander Stewart
Alexander Stewart

Reputation: 1

In Chrome, if you go right click > Inspect > Elements tab, you may notice the form has an id, for me the name of the id is #payment-form.

Try changing the styling of the form with this id, for example, if you wanted to change the min-width of the form:

#payment-form {
  min-width: 380px !important;
}

Upvotes: 0

qichuan
qichuan

Reputation: 2011

There's no direct way to adjust the height and width of a Payment element, the closest you can get is to make the layout more or less spacious by adjusting the spacingUnit varaible.

Upvotes: 0

Related Questions