Zigzag | Stripe Developers | Page 1

worldly lindenBOT Sep 13, 2022, 9:28 AM

#

wintry talon Sep 13, 2022, 9:29 AM

#

hi there 🙂
Is there a specific use case you're trying to account for?

solid field Sep 13, 2022, 9:29 AM

#

Hi, Thanks for looking up into my request

#

So I did implement stripe card element on my frontend

#

and from there I was creating payment method using stripe js

#

and my backend was making the charge using Laravel Cashier

#

It was totally fine

#

but now I decided to split my card element into pieces

#

like cardNumber, cardExpiry and cardCvc

#

and now I am not able to create payment method

#

on docs it says to pass cardNumberElement where i used to pass cardElement

#

What to do?

wintry talon Sep 13, 2022, 9:40 AM

#

Thanks for all these details

#

First of all, I want to check with you, are you using this Stripejs function in order to create the split card elements ?

solid field Sep 13, 2022, 9:42 AM

#

Yes I am using these functions properly and they are working fine, validation is also working correctly and their events as well

#

but createPaymentMethod which accepts card or cardNumber is throwing error that it needs card exp month etc. but I do have elements and don't know how to extract values out of these elements to pass into method if method needs it

#

https://stripe.com/docs/js/payment_methods/create_payment_method

Stripe JS Reference

#

Here docs say that I must pass cardNumberElement where I used to pass cardElement but its throwing error

wintry talon Sep 13, 2022, 9:49 AM

#

OK I assume in your code you are doing something like this ?

let number = elements.getElement(CardNumberElement);

stripe.createPaymentMethod({
    type: "card",
    card: cardNumber
});

#

and you got error?

solid field Sep 13, 2022, 9:49 AM

#

nope

#

I am passing the actual cardNumberElement where you have passed cardNumber in above code

#

like this

#

stripe.createPaymentMethod(
"card",
cardNumberElement
);

#

And its not working

#

      {
        type: "card",
        card: cardNumberElement
       });

#

Even using this

#

It says Missing required param: card[exp_month]

wintry talon Sep 13, 2022, 9:56 AM

#

OK, give me couple of minutes while I test that

solid field Sep 13, 2022, 9:56 AM

#

Thanks 🙂

wintry talon Sep 13, 2022, 10:18 AM

#

Thanks for your patience, I just finished the test and I created a PaymentMethod, here is what I did:

HTML

    <div id="split-payment-form">
      <!--Stripe.js injects the Payment Element-->
      <div id="card-number"></div>
      <div id="card-expiry"></div>
      <div id="card-cvc"></div>

      <button id="submit-split-payment-element" class="Product-BuyButton">
        <div class="spinner hidden" id="split-spinner"></div>
        <span id="submit-button-text">Pay now</span>
      </button>
    </div>

JS

var splitElements;
var cardNumberElement;

async function initializeSplitPaymentElement() {
  splitElements = stripe.elements();
  
  cardNumberElement = splitElements.create('cardNumber');

  var cardCvcElement = splitElements.create('cardCvc');
  var cardExpiryElement = splitElements.create('cardExpiry');
  
  cardNumberElement.mount('#card-number');
  cardCvcElement.mount('#card-cvc');
  cardExpiryElement.mount('#card-expiry');
}

initializeSplitPaymentElement();

async function submitSplitPaymentElementFunction() {
  //const cardNumber = splitElements.getElement(cardNumberElement)
  stripe
  .createPaymentMethod({
    type: 'card',
    card: cardNumberElement
  })
  .then(function(result) {
    console.log(result);
    // Handle result.error or result.paymentMethod
  });
}

const submitSplitPaymentElement = document.getElementById("submit-split-payment-element");
submitSplitPaymentElement.addEventListener("click", submitSplitPaymentElementFunction);

solid field Sep 13, 2022, 10:24 AM

#

Did it create paymentMethod for you successfully?

#Zigzag