Mike Smith

[subtle plinth]

How can we help?

[odd mantle]

I have a parent component that has an ElementsConsumer being used:

    <Elements
        stripe={stripePromise} options={options}>
        <ElementsConsumer>
            {({ stripe, elements }) => <ConnectedPaymentInfoStep stripe={stripe} elements={elements} {...props} />}
        </ElementsConsumer>
    </Elements>
);```

I then have a <CheckoutForm/> in this same file that's passing props:
<CheckoutForm clientSecret={clientSecret} stripe={this.props.stripe} elements={this.props.elements} />

In the CheckoutForm I'm setting a test example for appearance:

    theme: 'stripe',
    variables: {
      fontWeightNormal: '500',
      borderRadius: '2px',
      colorPrimary: '#f360a6',
      colorIconTabSelected: '#fff',
      spacingGridRow: '16px'
    },
    rules: {
      '.Tab, .Input, .Block, .CheckboxInput, .CodeInput': {
        boxShadow: '0px 3px 10px rgba(18, 42, 66, 0.08)'
      },
      '.Block': {
        borderColor: 'transparent'
      },
      '.BlockDivider': {
        backgroundColor: '#ebebeb'
      },
      '.Tab, .Tab:hover, .Tab:focus': {
        border: '0'
      },
      '.Tab--selected, .Tab--selected:hover': {
        backgroundColor: '#f360a6',
        color: '#fff'
      }
    }
  };

  // Pass the appearance object to the Elements instance
  const elements = stripe.elements({clientSecret, appearance});```

But I don't see any changes to the PaymentElement UI

This is specifically for an ACH form if that matters

This is the CheckoutForm JSX with the PaymentElement:

    <form id="payment-form" onSubmit={handleSubmit}>
      <PaymentElement id="payment-element" />
      <button className="checkout-flow-button place-order instant-ach-button" disabled={isLoading || !stripe || !props.elements || status === "requires_payment_method"} id="submit">
        Place Order
      </button>
      {/* Show any error or success messages */}
      {message && <div id="payment-message">{message}</div>}
    </form>
  );```

[subtle plinth]

Okay, that's a lot. Give me a few minutes to dig on that and circle back

[odd mantle]

Thanks

[subtle plinth]

I see you have options in your ElementsConsumer, but I don't see you defining options anywhere. Not sure if this is the same thing, but options is usually a hash that contains the appearance object (see here: https://stripe.com/docs/payments/quickstart#style)

[odd mantle]

Yes, I have it defined at the top of the parent component:

    clientSecret,
    theme: "stripe"
};```

I tried passing it there but it didn't work so I thought it needed to be passed in the CheckoutForm component

[subtle plinth]

Hmmm... do you know if the appearance object is ever even being accessed? Like, do you know if this is an order of operations issue? Or a formatting issue? If you put a few console.log(); functions at each of the steps, does appearance ever get passed anywhere? Is it nil?

[odd mantle]

I'm setting the appearance at the top of the CheckoutForm component:

  const [message, setMessage] = useState(null);
  const [status, setStatus] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const clientSecret = props.clientSecret;
  const stripe = props.stripe;

  const appearance = {
    theme: 'stripe',
    variables: {
      fontWeightNormal: '500',
      borderRadius: '2px',
      colorPrimary: '#f360a6',
      colorIconTabSelected: '#fff',
      spacingGridRow: '16px'
    },
    rules: {
      '.Tab, .Input, .Block, .CheckboxInput, .CodeInput': {
        boxShadow: '0px 3px 10px rgba(18, 42, 66, 0.08)'
      },
      '.Block': {
        borderColor: 'transparent'
      },
      '.BlockDivider': {
        backgroundColor: '#ebebeb'
      },
      '.Tab, .Tab:hover, .Tab:focus': {
        border: '0'
      },
      '.Tab--selected, .Tab--selected:hover': {
        backgroundColor: '#f360a6',
        color: '#fff'
      }
    }
  };

  // Pass the appearance object to the Elements instance
  const elements = stripe.elements({clientSecret, appearance});
  console.log('elements: ', elements);

  useEffect(() => {
    if (!stripe) {
      return;
    }

    if (!clientSecret) {
      return;
    }

    stripe.retrievePaymentIntent(clientSecret).then(({ paymentIntent }) => {
        setStatus(paymentIntent.status);
      switch (paymentIntent.status) {
        case "succeeded":
          setMessage("Payment succeeded!");
          break;
        case "processing":
          setMessage("Your payment is processing.");
          break;
        case "requires_payment_method":
          setMessage("Your payment was not successful, please try again.");
          break;
        default:
          setMessage("");
          break;
      }
    });
  }, [stripe]);```

Then when I console.log the elements variable, it just logs a bunch of event functions

So I have options defined in the parent component:

    theme: "stripe",
    variables: {
        fontWeightNormal: '500',
        borderRadius: '2px',
        colorPrimary: '#f360a6',
        colorIconTabSelected: '#fff',
        spacingGridRow: '16px'
      }
}

const options = {
    clientSecret,
    appearance
};```

Then those are passed into the injected form:

```export const InjectedCheckoutForm = (props) => (
    <Elements
        stripe={stripePromise} options={options}>
        <ElementsConsumer>
            {({ stripe, elements }) => <ConnectedPaymentInfoStep stripe={stripe} elements={elements} {...props} />}
        </ElementsConsumer>
    </Elements>
);```

But no UI is changed

It's still the default UI

[subtle plinth]

Grabbing a colleague to assist, just a minute

[odd mantle]

Ah, I think I fixed it. I created a separate appearance const and then passed that into the options object and it's getting UI changes now.

I edited the code above to reflect what's working now:

    theme: "stripe",
    variables: {
        fontWeightNormal: '500',
        borderRadius: '2px',
        colorPrimary: '#f360a6',
        colorIconTabSelected: '#fff',
        spacingGridRow: '16px'
      }
}

const options = {
    clientSecret,
    appearance
};```

[subtle plinth]

Good to hear it!

[odd mantle]

Thanks for the help!