Can I use this library with Payment Elements?

[bhaidar]

Hi, How can I use this library to use Payment Element instead of Card Element? Any sample code would be highly appreciated.

@softbeehive

Thank you Bill

[softbeehive]

Hi, yes you can use Payment Element

1. Provide type="payment"

<StripeElements
  ...
>
  <StripeElement
    type="payment"
    ...
  />
</StripeElements>

2. Follow error messages of stripe, it will guide you

I'll keep this issue open until full payment element guide is ready.

[Aniruddh-J]

And how can we pass payment intent client secret?

EDIT: Nevermind, got it. :)

[eliezerp3]

@Aniruddh-J How did you submit the payment element?

[SleepiestAdam]

And how can we pass payment intent client secret?

EDIT: Nevermind, got it. :)

@Aniruddh-J

I'd also be interested in how you got the payment element submitting - got it all loading on my end, but when submitting as running into errors trying to get it working. I either get:

stripe.confirmPayment(): expected either `elements` or `clientSecret`, but got neither.

When I use the following code:

const paymentElement = this.$refs.payment;

this.$refs.elms.instance.confirmPayment({
    paymentElement,
    confirmParams: {
        // Return URL where the customer should be redirected after the PaymentIntent is confirmed.
        return_url: 'https://example.com',
    }
})
.then(function(result) {
    if (result.paymentIntent) {
        console.log(result);
    }
});

Or

stripe.confirmPayment(): the `confirmParams.return_url` argument is required unless passing `redirect: 'if_required'`

When I use this code:

const paymentElement = this.$refs.payment;

this.$refs.elms.instance.confirmPayment(
    paymentElement,
    { 
        confirmParams: {
            // Return URL where the customer should be redirected after the PaymentIntent is confirmed.
            return_url: 'https://example.com',
        }
    }
)
.then(function(result) {
    if (result.paymentIntent) {
        console.log(result);
    }
});

Unsure of what else to try.

[Aniruddh-J]

Sorry for the delay in the response.

You need to supply clientSecret in elements options.

const elementsOptions = ref({
      clientSecret: props.payment_intent.clientSecret
})

EDIT: You need to create a payment intent first: https://stripe.com/docs/api/payment_intents/create

The API response will give you a client secret. Use it in the code above, and the code should work.

[TommyLeadJabber]

And how can we pass payment intent client secret? EDIT: Nevermind, got it. :)

@Aniruddh-J

I'd also be interested in how you got the payment element submitting - got it all loading on my end, but when submitting as running into errors trying to get it working. I either get:

stripe.confirmPayment(): expected either `elements` or `clientSecret`, but got neither.

When I use the following code:

const paymentElement = this.$refs.payment;

this.$refs.elms.instance.confirmPayment({
    paymentElement,
    confirmParams: {
        // Return URL where the customer should be redirected after the PaymentIntent is confirmed.
        return_url: 'https://example.com',
    }
})
.then(function(result) {
    if (result.paymentIntent) {
        console.log(result);
    }
});

Or

stripe.confirmPayment(): the `confirmParams.return_url` argument is required unless passing `redirect: 'if_required'`

When I use this code:

const paymentElement = this.$refs.payment;

this.$refs.elms.instance.confirmPayment(
    paymentElement,
    { 
        confirmParams: {
            // Return URL where the customer should be redirected after the PaymentIntent is confirmed.
            return_url: 'https://example.com',
        }
    }
)
.then(function(result) {
    if (result.paymentIntent) {
        console.log(result);
    }
});

Unsure of what else to try.

I got the payment intent and client secret, but I get the same errors when doing a confirmPayment request.

Did you get it working?

[Aniruddh-J]

@TommyLeadJabber Could you please paste the code you are using to achieve this?

[TommyLeadJabber]

@TommyLeadJabber Could you please paste the code you are using to achieve this?

Which part? The confirmPayment request are more or less identical to the examples in the code I quoted. I get one of the error messages from the quoted code, depending on what I try to pass in.

[Aniruddh-J]

Did you supply the client secret the way I mentioned in my previous post?

Sorry for the delay in the response.

You need to supply clientSecret in elements options.

const elementsOptions = ref({
      clientSecret: props.payment_intent.clientSecret
})

EDIT: You need to create a payment intent first: https://stripe.com/docs/api/payment_intents/create

The API response will give you a client secret. Use it in the code above, and the code should work.

I am sorry I am asking this because I don't see your exact setup, and sometimes very small things we miss can be the reason.

*** removed the edit, I got confused, sorry. ****

[TommyLeadJabber]

Did you supply the client secret the way I mentioned in the my previous post?

Sorry for the delay in the response. You need to supply clientSecret in elements options.

const elementsOptions = ref({
      clientSecret: props.payment_intent.clientSecret
})

EDIT: You need to create a payment intent first: https://stripe.com/docs/api/payment_intents/create The API response will give you a client secret. Use it in the code above, and the code should work.

I am sorry I am asking this because I don't see your exact setup and sometimes very small things we miss can be the reason. No worries.

Yes, I managed to create a payment intent and used the clientSecret from that to set up the payment element (if I didn't, the element wouldn't load and I would get an error telling me to create a payment intent).

When I type in the credit card info , and try to send the data with confirmPayment, that's when I get those errors.

[Aniruddh-J]

I noticed one minor issue in the example code above. The mandatory elements property was missing from the code. I have corrected the code:

const paymentElement = this.$refs.payment;

this.$refs.elms.instance.confirmPayment({
    elements: this.$refs.elms.elements,
    confirmParams: {
        // Return URL where the customer should be redirected after the PaymentIntent is confirmed.
        return_url: 'https://example.com',
    }
})
.then(function(result) {
    if (result.paymentIntent) {
        console.log(result);
    }
});

Please try it and let me know if it solves your issue.

EDIT: I have made one more edit.

[TommyLeadJabber]

Nice, that last edit of yours did the trick!

Thanks for your help, really appreciate it 👍