Error while using confirmCardSetup() after update to 1.0.0-rc.2

[avdept]

So I have a very straightforward payment feature, which, after update to 1.0.0-rc.2 just stopped to work. Here's example of using it:

let result = await stripe.confirmCardSetup(model.setupIntentKey, {
        // eslint-disable-next-line camelcase
        payment_method: {
          card: this.cardElements,
          billing_details: { name: model.name } // eslint-disable-line camelcase
        }
      });

And this is the error I receive from stripe

{
  "error": {
    "code": "parameter_unknown",
    "doc_url": "https://stripe.com/docs/error-codes/parameter-unknown",
    "message": "Received unknown parameters: _elements, _id, _controller, _pendingFonts",
    "param": "payment_method_data[card][_elements]",
    "setup_intent": {
      "id": "==filtered==",
      "object": "setup_intent",
      "cancellation_reason": null,
      "client_secret": "==Filtered==",
      "created": 1581937261,
      "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"
  }
}

Any ideas what of last updated breaks it?

[patrick-emmanuel]

Could you please share more context into how you're getting this.cardElements?

[avdept]

Yes, very simple

...imports
const stripe = new Stripe(ENV.stripe.publishableKey); /* global Stripe */

export default Controller.extend({
   cardElements: computed(function() {
      return stripe.elements();
  }),
})

[patrick-emmanuel]

Is there any specific reason for initializing Stripe yourself? Looks like you aren't using this add-on.

I would suggest using the stripev3 service from this add-on and see if that helps. You can access the elements with stripev3.elements

[patrick-emmanuel]

You could also use the onComplete action here: https://github.com/adopted-ember-addons/ember-stripe-elements#actions

export default Controller.extend({
   stripev3: service(),

  // if you use ember-concurrency:
    confirmCardSetup: task(function* (cardElement) {
      try {
       yield stripev3.confirmCardSetup(model.setupIntentKey, {
        // eslint-disable-next-line camelcase
         payment_method: {
           card: cardElement,
           billing_details: { name: model.name } // eslint-disable-line camelcase
         }
       });
      } catch {}
     }).drop(),

    action: {
     onComplete(cardElement) {
        this.confirmCardSetup.perform(cardElement);
      }
    }
});

[avdept]

So, I've changed it use stripev3 service, however stripe still returns me 400 error with message provided in first post. As for actions - I'm not sure I need it. While submitting form I'm pretty sure stripe code has fully loaded

[patrick-emmanuel]

I don't think this will work:

cardElements: computed(function() {
      return stripe.elements();
  }),

You need to do this, and mount the element: var cardElement = elements.create('card'); https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options

But the above, in my opinion, will defeat the purpose of using this add-on.

If you want this add-on to help you, I'd suggest:

{{#stripe-card onComplete={{action 'onComplete'}} options=options as |stripeElement stripeError|}}
  {{#if stripeError}}
    <p class="error">{{stripeError.message}}</p>
  {{/if}}
  <button {{action "submit" stripeElement}}>Submit</button>
{{/stripe-card}}

export default Controller.extend({
   stripev3: service(),

  // if you use ember-concurrency:
    confirmCardSetup: task(function* (cardElement) {
      try {
       yield stripev3.confirmCardSetup(model.setupIntentKey, {
        // eslint-disable-next-line camelcase
         payment_method: {
           card: cardElement,
           billing_details: { name: model.name } // eslint-disable-line camelcase
         }
       });
      } catch {}
     }).drop(),

    action: {
     onComplete(cardElement) {
        //.....
        this.confirmCardSetup.perform(cardElement);
       //...
      }
    }
})

Making sure Stripe is fully loaded isn't enough. You need to make sure the element is filled with the right details.

[avdept]

I see, I will try to refactor code and see if that will work

[avdept]

Back to this. So I'm using components stripe-card-number, stripe-card-expiry, stripe-card-cvc

Here's example of my template

{{#stripe-card-number options=cardNumberOptions elements=cardElements change=(action (mut cardElements)) as |stripeElement stripeError|}}
    {{#if stripeError}}
      <p class='payment-error'>{{stripeError.message}}</p>
    {{/if}}
  {{/stripe-card-number}}

The setup above should bind provided components to cardElements object. Having this in mind, what would be my steps to fix issue above? I'm using standalone components for having custom css styling

PS: It was working well on 1.0.0-rc.1

PPS: I've debugged a little and looks like this commit 502db83c3835b44385c0da1f0d3d4f863674294d breaks it.

[patrick-emmanuel]

There was a breaking change. More here: https://github.com/adopted-ember-addons/ember-stripe-elements#actions. You could change to onChange=(action (mut cardElements)) to fix this.

[avdept]

Ok, that seems to be working now. However I completely missed that part. Mind making it at least bold font ?

[patrick-emmanuel]

Yeah, I see how it could easily be missed. I'll do that later on today. :)

[lindyhopchris]

Closing this issue as it looks like it's resolved. Let me know if that's not the case!

[lindyhopchris]

Closing this issue as it looks like it's resolved. Let me know if that's not the case!