#priya_97027

1 messages · Page 1 of 1 (latest)

grave willowBOT
fierce python
stuck flame
#

I did. My question is just for mounting do we need the clientSecretKey? For now we are using CardElement and creating paymentIntent once user submits the payment.

#

So our flow is wherein once paymentIntent is created we do the payment. But in case of Payment Element looks like clientSecretKey (getting via creating payment intent) is mandate and we would need to call it and we don't want payment to process at this point.

shy sierra
stuck flame
#

Thank you so much 🙂

stuck flame
#

Another question, for adding other payment methods we add payment_method_types to the payment intent option but on adding this to the options to Elements without calling intent it's not rendering.

#

I tried

const options = {
mode: 'payment',
amount: 1099,
currency: 'usd',
// Fully customizable with appearance API.
appearance: {/.../},
layout: "tabs",
payment_method_types: ["card", "ideal"]
};

shy sierra
#

Is an error appearing in your developer console? That setup looks fine to me at first glance

stuck flame
#

Nope I am not able to see the other payment options.

#

Below is the basic code i am using

import React from 'react';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import CheckoutForm from './CheckoutForm';// Import CheckoutForm component

const stripePromise = loadStripe('pk_test_A7jK4iCYHL045qgjjfzAfPxu');

export const PaymentInfo = () => {

const options = {
mode: 'payment',
amount: 1099,
currency: 'usd',
// Fully customizable with appearance API.
appearance: {/.../},
layout: "tabs",
payment_method_types: ["card", "ideal"]
};

return (
<Elements stripe={stripePromise} options={options}>
<CheckoutForm />
</Elements>
);
};

export default PaymentInfo;

shy sierra
stuck flame
#

Hmm now if I want to make it flexible for every type of currency how can I do that?

shy sierra
#

I think you can include different payment methods that take different currencies in the payment method options and we will only show the ones that support your specified currency

stuck flame
#

okay

#

On including below one
const options = {
mode: 'payment',
amount: 2000,
currency: 'cad',
// Fully customizable with appearance API.
appearance: {/.../},
layout: "tabs",
payment_method_types: ["card", "klarna", "afterpay_clearpay", "bancontact"]
};

Throws below console error
controller-4f2e2092970f51ef94ca6315f36e89a4.js:1 The currency provided (cad) is invalid. Payments with bancontact support the following currencies: eur.

#

I feel a mapping is required here. We cannot specify all the payment methods.

shy sierra
#

Interesting. I am not sure why that would error but ideal w/ USD did not. Looking in to this and will get back to you

#

So as long as the PMs are turned on in your dashboard that will be a much simpler solution

stuck flame
#

okay. Another thing I wanna point out is I am trying to use accordion layout but I still see tabs layout somehow.

import React from 'react';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import CheckoutForm from './CheckoutForm';// Import CheckoutForm component

const stripePromise = loadStripe('pk_test_A7jK4iCYHL045qgjjfzAfPxu');

export const PaymentInfo = () => {

const options = {
mode: 'payment',
amount: 2000,
currency: 'cad',
layout: {
type: 'accordion'
},
// Fully customizable with appearance API.
appearance: {/.../},
payment_method_types: ["card", "klarna", "afterpay_clearpay"]
};

return (
<Elements stripe={stripePromise} options={options}>
<CheckoutForm />
</Elements>
);
};

export default PaymentInfo;

#

I need the accordion view with radio buttons here.

shy sierra
stuck flame
#

Yes tried this as well

import React from 'react';
import { PaymentElement } from '@stripe/react-stripe-js';

export const CheckoutForm = () => {

const options = {
layout: {
type: 'accordion'
}
};

return (
<form style={{ margin: '30px' }}>
<PaymentElement options={options}/>
<button>Pay now</button>
</form>
);
};

export default CheckoutForm;

#

Another thing that's weird is the moment I add affirm to the payment method type console throws below error even tho amount is 2000.

controller-4f2e2092970f51ef94ca6315f36e89a4.js:1 Amount must be no less than $50.00 CAD for the Affirm payment method.

#

Here's the code

import React from 'react';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import CheckoutForm from './CheckoutForm';// Import CheckoutForm component

const stripePromise = loadStripe('pk_test_A7jK4iCYHL045qgjjfzAfPxu');

export const PaymentInfo = () => {

const options = {
mode: 'payment',
amount: 2000,
currency: 'cad',
appearance: {},
payment_method_types: ["card", "affirm", "klarna", "afterpay_clearpay"]
};

return (
<Elements stripe={stripePromise} options={options}>
<CheckoutForm />
</Elements>
);
};

export default PaymentInfo;

shy sierra
#

Strange, that same code where you set the options on the PaymentElement works for me. Trying to think of what may be happening here

grave willowBOT
stuck flame
#

I hope it's not the stripe version

#

"stripe": "^14.16.0", "@stripe/react-stripe-js": "^2.4.0", "@stripe/stripe-js": "^2.4.0",
This is what I have. Thinking maybe released in a different one.

#

I am sending all the code below

import React from 'react'; import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; import CheckoutForm from './CheckoutForm';// Import CheckoutForm component const stripePromise = loadStripe('pk_test_A7jK4iCYHL045qgjjfzAfPxu'); export const PaymentInfo = () => { const options = { mode: 'payment', amount: 2000, currency: 'cad', appearance: {}, payment_method_types: ["card", "affirm", "klarna", "afterpay_clearpay"] }; return ( <Elements stripe={stripePromise} options={options}> <CheckoutForm /> </Elements> ); }; export default PaymentInfo;

import React from 'react'; import { PaymentElement } from '@stripe/react-stripe-js'; export const CheckoutForm = () => { const options = { layout: "accordion" }; return ( <form style={{ margin: '30px' }}> <PaymentElement options={options}/> <button>Pay now</button> </form> ); }; export default CheckoutForm;

muted ingot
#

Hello! I'm taking over and catching up...

#

Is it possible your browser is caching an older version of the code? Have you tried a hard refresh (hold shfit while reloading the page)?

#

Also wondering if you can share a screenshot of the Payment Element you're seeing. Something might become apparent if we can see what you're currently seeing?

stuck flame
#

yep did just now. Same tab view.

muted ingot
#

🤔

#

If you view the source in your browser using the dev tools can you confirm it's using the code that's specifying accordion?

stuck flame
#

I don't see the layout here

muted ingot
#

It would be in the JavaScript, not the HTML.

#

Are you using Chrome?

stuck flame
#

ok this is weird. My bad. The checkout form is not using the updated code.

#

yep restarted the server. Working now. thank you. I wanted to check about the multiple payment methods being defined regardless of the currency.

#

It's throwing an error in console.

#

message : "The currency provided (cad) is invalid. Payments with ideal support the following currencies: eur." param : "deferred_intent.payment_method_types" request_log_url : "https://dashboard.stripe.com/test/logs/req_9sO5LVo0FvPt5y?t=1707930332"

#

Is it like we need to feed in payment type based on currency?

muted ingot
#

Yeah, if you specify specific payment method types some of them may not be compatible with the currency you're using. iDEAL, as the error states, only supports EUR as documented here: https://docs.stripe.com/payments/ideal

stuck flame
#

const options = {
mode: 'payment',
amount: 2000,
currency: 'cad',
appearance: {},
payment_method_types: ["card", "klarna", "afterpay_clearpay", "affirm"]
};

muted ingot
#

The amount you're setting is $20 CAD, which is less than the minimum $50 CAD required.

#

All amounts in Stripe are set using the smallest currency unit. 2000 = $20.00 CAD.

stuck flame
#

gotcha

#

Thank You