I'm integrating Stripe to my Blazor application. The functionality I need is to replace an existing 'Add a card' ponent.

I have successfully achieved this using the stripe.confirmSetup method in the JS library however this requires a redirect URL which is causing issues as the rest of our application does not behave like that.

I have identified the createPaymentMethod as an alternative due to the fact that it does not require a redirect URL, opens any 3DS page in a modal and supports a 'then' callback method, where I can show a success popup and update the DOM accordingly.

The issue is when I pass the card element that I have previously mounted I get this error.

Invalid value for createPaymentMethod: card was payment Element, which cannot be used to create card PaymentMethods

razor/html

    <EditForm id="payment-form" Model="@BillingProfile">
        <div id="payment-element">
            <!-- Elements will create form elements here -->
        </div>

        @if (stripeReady)
        {
            <div class="text-center mt-2">
                <button type="button" @onclick="TogglePaymentEditStripe" class="btn btn-grey text-dark">Cancel</button>  
                <button type="submit" id="submitStripeCard" disabled="@(Busy)" class="btn btn-blue">Add card</button>
            </div>                }

        <!-- We'll put the error messages in this element -->
        <div id="payment-method-errors" role="alert"></div>   
    </EditForm>

JavaScript

export function initialiseStripeAndMount(publishableKey, clientIntentSecret, redirectUrl){

    const stripe = Stripe(publishableKey);  

    const options = {
        clientSecret: clientIntentSecret, //intent
        // Fully customizable with appearance API.
        appearance: {
            theme: 'night',
            labels: 'floating',           
        }
    };

    // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 3
    const elements = stripe.elements(options);

    // Create and mount the Payment Element
    const cardElement = elements.create('payment');
    cardElement.mount('#payment-element');

    // Create a token or display an error when the form is submitted.
    const form = document.getElementById('payment-form');

    form.addEventListener('submit', async (event) => {
        event.preventDefault();

        const result = await stripe.createPaymentMethod({                
            type: 'card',
            card: cardElement,
            billing_details: {

                name: 'Jenny Rosen',
            },
            })
            .then(function (result) {
                // Handle result.error or result.paymentMethod
                alert(result)
            });
    });
   
}

Question

How can I use the 'createPaymentMethod' function with the stripe mounted element so that I can avoid the page posting back as per their documentation:

edit

If I try using confirmSetup with the following:

stripe.confirmSetup({
    elements,
    confirmParams: {
        // Return URL where the customer should be redirected after the SetupIntent is confirmed.
        return_url: '',
        redirect: "if_required"
    },
})

Then I get a error code 400 response, with the following response object:

{
  "error": {
    "code": "parameter_unknown",
    "doc_url": ";,
    "message": "Received unknown parameter: redirect",
    "param": "redirect",
    "request_log_url": "[Redacted]",
    "setup_intent": {
      "id": "[Redacted]",
      "object": "setup_intent",
      "cancellation_reason": null,
      "client_secret": "[Redacted]",
      "created": [Redacted],
      "description": null,
      "last_setup_error": null,
      "livemode": false,
      "next_action": null,
      "payment_method": null,
      "payment_method_types": [
        "card"
      ],
      "status": "requires_payment_method",
      "usage": "off_session"
    },
    "type": "invalid_request_error"
  }
}

I'm integrating Stripe to my Blazor application. The functionality I need is to replace an existing 'Add a card' ponent.

I have successfully achieved this using the stripe.confirmSetup method in the JS library however this requires a redirect URL which is causing issues as the rest of our application does not behave like that.

I have identified the createPaymentMethod as an alternative due to the fact that it does not require a redirect URL, opens any 3DS page in a modal and supports a 'then' callback method, where I can show a success popup and update the DOM accordingly.

The issue is when I pass the card element that I have previously mounted I get this error.

Invalid value for createPaymentMethod: card was payment Element, which cannot be used to create card PaymentMethods

razor/html

    <EditForm id="payment-form" Model="@BillingProfile">
        <div id="payment-element">
            <!-- Elements will create form elements here -->
        </div>

        @if (stripeReady)
        {
            <div class="text-center mt-2">
                <button type="button" @onclick="TogglePaymentEditStripe" class="btn btn-grey text-dark">Cancel</button>  
                <button type="submit" id="submitStripeCard" disabled="@(Busy)" class="btn btn-blue">Add card</button>
            </div>                }

        <!-- We'll put the error messages in this element -->
        <div id="payment-method-errors" role="alert"></div>   
    </EditForm>

JavaScript

export function initialiseStripeAndMount(publishableKey, clientIntentSecret, redirectUrl){

    const stripe = Stripe(publishableKey);  

    const options = {
        clientSecret: clientIntentSecret, //intent
        // Fully customizable with appearance API.
        appearance: {
            theme: 'night',
            labels: 'floating',           
        }
    };

    // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 3
    const elements = stripe.elements(options);

    // Create and mount the Payment Element
    const cardElement = elements.create('payment');
    cardElement.mount('#payment-element');

    // Create a token or display an error when the form is submitted.
    const form = document.getElementById('payment-form');

    form.addEventListener('submit', async (event) => {
        event.preventDefault();

        const result = await stripe.createPaymentMethod({                
            type: 'card',
            card: cardElement,
            billing_details: {

                name: 'Jenny Rosen',
            },
            })
            .then(function (result) {
                // Handle result.error or result.paymentMethod
                alert(result)
            });
    });
   
}

Question

How can I use the 'createPaymentMethod' function with the stripe mounted element so that I can avoid the page posting back as per their documentation:

edit

If I try using confirmSetup with the following:

stripe.confirmSetup({
    elements,
    confirmParams: {
        // Return URL where the customer should be redirected after the SetupIntent is confirmed.
        return_url: 'http://www.google.co.uk',
        redirect: "if_required"
    },
})

Then I get a error code 400 response, with the following response object:

{
  "error": {
    "code": "parameter_unknown",
    "doc_url": "https://stripe./docs/error-codes/parameter-unknown",
    "message": "Received unknown parameter: redirect",
    "param": "redirect",
    "request_log_url": "[Redacted]",
    "setup_intent": {
      "id": "[Redacted]",
      "object": "setup_intent",
      "cancellation_reason": null,
      "client_secret": "[Redacted]",
      "created": [Redacted],
      "description": null,
      "last_setup_error": null,
      "livemode": false,
      "next_action": null,
      "payment_method": null,
      "payment_method_types": [
        "card"
      ],
      "status": "requires_payment_method",
      "usage": "off_session"
    },
    "type": "invalid_request_error"
  }
}

• javascript
• stripe-payments

Share Improve this question Follow edited Feb 6, 2023 at 13:39 JsonStatham asked Feb 6, 2023 at 10:42 JsonStathamJsonStatham 10.4k2828 gold badges112112 silver badges189189 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

If you are only accepting card payments, then it's possible to have no redirects when using SetupIntents. Just add redirect: "if_required" when calling stripe.confirmSetup(). Learn more. It should look something like this:

stripe.confirmSetup({
 elements, 
 redirect: "if_required",
 confirmParams: { return_url: 'http://foo.bar' }
})

For your specific error message, I think the issue is that you are passing Card: cardElement (uppercase C) instead of card: cardElement (lowercase c). But note that createPaymentMethod will only work with the Card Element (and not the Payment Element).