Uncaught (in promise) IntegrationError: Missing value for options: amount should be a number

Question

const options = {
            mode: 'payment',
            amount: 1000,
            currency: 'inr',
            appearance, // Optional Style the Express Checkout Element
        };
        // Pass the appearance object to the Elements instance. // Optional Style the Express Checkout Element
        const elements = stripe.elements({
            options,
            fonts: [
                {
                    cssSrc: 'https://fonts.googleapis.com/css?family=Roboto',
                },
            ],
            // Specify the mode here
            mode: 'payment', // or 'setup' if you're setting up for future payments        
        }); 

Express Checkout Element

I have tried implementing the above code snippet in my checkout.js. Unfortunately, I'm encountering this error. Also, the express-checkout-element is not getting injected by Stripe.js into my form which is present in my Checkout.chtml. Finally, this is a MVC .Net 5 application trying to do Stripe Payments using Stripe Api and official docs documentation.

<!-- Display a payment form -->
<form id="payment-form">
    <!-- Create a container for the Payment Request Button -->
    <!--<div id="payment-request-button">-->
        <!-- The Payment Request Button will be inserted here -->
    <!--</div>-->
    <div id="express-checkout-element">
        <!-- Mount the Express Checkout Element here -->
    </div>
    <!--<div id="card-element">-->@*Stripe.js injects the Card Element*@<!--</div>-->
    <div>&nbsp;</div>
    <button id="submit">
        <div class="spinner hidden" id="spinner"></div>
        <span id="button-text">Pay now</span>
    </button>
    <p id="card-error" role="alert"></p>
    <p class="result-message hidden">
        To see the Payment status, check the results in your
        <a href="" target="_blank">Stripe dashboard.</a> Refresh the page to pay again.
    </p>
</form>

@section Scripts{
    <script src="https://js.stripe.com/v3/"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script>
    <script src="~/js/checkout.js" defer></script>
}

Tried commenting out options when defining elements variable. Tried reaching out to Stripe support.

Answer 1

You need to update your js code to match the following:

const options = {
  mode: 'payment',
  amount: 1099,
  currency: 'inr',
  // Customizable with appearance API.
  appearance: {
     theme: 'stripe',
     variables: {
        fontFamily: 'Ideal Sans, system-ui, sans-serif'
     }
  },
};

// Set up Stripe.js and Elements to use in checkout form
const elements = stripe.elements(options);