sam-iframe | Stripe Developers | Page 1

sterile dove Mar 18, 2022, 4:16 AM

#

Hi there! Let me take a look.

onyx flame Mar 18, 2022, 4:17 AM

#

Many thanks @sterile dove !

sterile dove Mar 18, 2022, 4:18 AM

#

I was wondering how you are defining the text boxes for card information collection?

onyx flame Mar 18, 2022, 4:23 AM

#

We don't define the text boxes in the web app. It depends on the paymentintent.

sterile dove Mar 18, 2022, 4:26 AM

#

Do you mind sharing a code snippet of your frontend please?

onyx flame Mar 18, 2022, 4:26 AM

#

Gimme a tick

#

import { Elements } from "@stripe/react-stripe-js";
import {
  Appearance,
  loadStripe,
  StripeElementsOptions,
} from "@stripe/stripe-js";
import classNames from "classnames";
import React from "react";

import { componentClassName } from "~helpers";
import { IInvoice } from "~models";

import PoweredByStripe from "../Branding/PoweredByStripe";
import CheckoutForm from "../CheckoutForm/CheckoutForm";

import "./StripePanel.scss";

const createClass = componentClassName("StripePanel");

interface IProps {
  className?: string;
  invoice: IInvoice;
}

const StripePanel = ({ className, invoice }: IProps) => {
  const stripePaymentConfig = invoice.stripePaymentConfig!;

  const stripePromise = loadStripe(stripePaymentConfig.publishedKey, {
    stripeAccount: stripePaymentConfig.stripeAccountId,
  });

  const appearance: Appearance = {
    theme: "stripe",
  };

  const options: StripeElementsOptions = {
    clientSecret: stripePaymentConfig.paymentIntentClientSecret,
    appearance,
  };
  return (
    <article className={classNames(createClass(), className)}>
      <Elements options={options} stripe={stripePromise}>
        <CheckoutForm invoice={invoice} />
        <PoweredByStripe />
      </Elements>
    </article>
  );
};

StripePanel.defaultProps = {
  className: "",
};

export default StripePanel;

#

That's the parent component

#

const formBody = () => (
    <>
      <StripePanelHeader
        totalAmount={invoice.totalAmount}
        dueDate={invoice.dueDay}
        dueInDays={invoice.dueInDays}
      />
      <form
        className={createClass("payment-form")}
        name="payment-form"
        id="payment-form"
        onSubmit={handleSubmit}
      >
        <PaymentElement
          className={createClass("payment-element")}
          id="payment-element"
          onReady={(_element) => setIsReady(true)}
        />
        {!isReady && (
          <XUILoader
            ariaLabel={formatMessage({ id: "STRIPE_PAYMENT_FORM_LOADING" })}
          />
        )}
        {isReady && (
          <>
            <button
              name="submit"
              type="submit"
              disabled={isLoading || !stripe || !elements || !isReady}
              id="submit"
            >
              <span id="button-text">
                {isLoading ? (
                  <div className="spinner" id="spinner" />
                ) : (
                  <FormattedMessage id="STRIPE_PAYMENT_PAY_NOW" />
                )}
              </span>
            </button>
          </>
        )}
        {message && (
          <div className={createClass("payment-message")} id="payment-message">
            {message}
          </div>
        )}
      </form>
    </>
  );

#

That's the checkout form.

sterile dove Mar 18, 2022, 4:40 AM

#

Do you have an existing css file to define the width of the iframe?

onyx flame Mar 18, 2022, 4:42 AM

#

Oh
we have

  &--payment-form {
    align-self: center;
    background: $color-white;
    padding: $spacing-8 $spacing-6;
    width: 100%;
  }

#

Yes it's width:100%

sterile dove Mar 18, 2022, 4:43 AM

#

Interesting, and the height is not being limited.

#

if you try to add height: 100% to the css script, does it display the country text box fully?

onyx flame Mar 18, 2022, 4:46 AM

#

Let me give it a shot.

#

Giving height: 100% doesn't fix the truncated country field.

sterile dove Mar 18, 2022, 4:54 AM

#

Apologies, I'm actually a backend engineer, let me pass this on to another member in my team that is more familiar with frontend 🙇

onyx flame Mar 18, 2022, 4:57 AM

#

No worries mate. Much appreciated for your help!

sturdy marsh Mar 18, 2022, 4:59 AM

#

👋 stepping in

#

Can I have the public URL of your page?

onyx flame Mar 18, 2022, 5:13 AM

#

Sorry @sturdy marsh It's behind VPN as the product hasn't been made public yet.

#

Sorry @sturdy marsh and @sterile dove It's weird that this issue only occurs when developer mode is on in Chrome!!! Super weird! Please ignore it for the moment, as I don't think the customer will open it with dev mode on.
Many thanks for your time!

#sam-iframe