supriya

[gentle dome]

Hi there, how can I help?

[keen citrus]

I have one question if i am using const paymentElement = elements.create("card", paymentElementOptions);
paymentElement.mount("#payment-element");
i am able to create the payment method id

but layout will be comming like :

[gentle dome]

Is there a public URL that I can visit ane reproduce the problem?

[keen citrus]

I want this design instaed of above one

and need to created payment method UI side and need to send that id to Server side

Jack ,can you help me on that

[gentle dome]

Then you should use the cardNumber, cardExpiry and cardExpiry elements

https://stripe.com/docs/js/element/other_element?type=cardNumber

[keen citrus]

Okay ,Then while creating the payment method how i need to send the all card elements

const result = await stripe.createPaymentMethod({
type: 'card',
** card: paymentElement,**
billing_details: {
// Include any additional collected billing details.
name: 'Jenny Rosen',
},
})

[gentle dome]

You just need to pass any one of the elements

[keen citrus]

I tried if i pass cardnumber element card number field only showing

can you share me the one example with multple card elements

[gentle dome]

Can you show me your code?

[keen citrus]

const paymentElement = elements.create("cardExpiryElement ", paymentElementOptions);
paymentElement.mount("#payment-element");

const btnsubmit = document.getElementById('submit');
btnsubmit.addEventListener('click', async (event) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();

    const result = await stripe.createPaymentMethod({
        type: 'card',
        card: paymentElement,
        billing_details: {
            // Include any additional collected billing details.
            name: 'Jenny Rosen',
        },
    })
    /*return result.paymentMethod.id;*/
    //stripePaymentMethodHandler(result);
});

[gentle dome]

are you using paymentElement ?

[keen citrus]

Instaed of payment element I have to use card element ?

[gentle dome]

Yes

[keen citrus]

Okay

Can you please provide the payment method code in javascript if i am using like cardexpiry,cardCvc

[gentle dome]

You can find example code in our API reference

https://stripe.com/docs/js/element/other_element?type=cardNumber

[keen citrus]

this is create the card element

but my question was how to send the card elements while creating the payment method

[gentle dome]

As I said before, you just need to replace paymentElement with cardNumberElement in your code

[keen citrus]

Give me moment i am checking

same like as you suggest

const cardElement = elements.create("cardNumber ", paymentElementOptions);
cardElement.mount("#card-element");

const btnsubmit = document.getElementById('submit');
btnsubmit.addEventListener('click', async (event) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();

    const result = await stripe.createPaymentMethod({
        type: 'card',
        card: cardElement,
        billing_details: {
            // Include any additional collected billing details.
            name: 'Jenny Rosen',
        },
    })

I am using like this

I am getting this error :A valid Element name must be provided. Valid Elements are:
card, cardNumber, cardExpiry, cardCvc, postalCode, paymentRequestButton, iban, idealBank, p24Bank, auBankAccount, fpxBank, affirmMessage, afterpayClearpayMessage, paymentMethodMessaging; you passed: cardNumber .

[gentle dome]

elements.create("cardNumber ", there's an extra space after cardNumber, you should remove it

[keen citrus]

Okay

[keen citrus]

if i use like this i got this error

Uncaught (in promise) IntegrationError: The selector you specified (#card-element) applies to no DOM elements that are currently on the page.
Make sure the element exists on the page before calling mount().

[amber crag]

That error, means that there is no element in your page that has #card-element as an Id