How to use directly instead of inputs?

Yussan1 commented 6 years ago

Hello, I want to use this directly loading data from my database instead of inputs.

Instead:

new Card({
            form: document.querySelector('form'),
            container: '.card-wrapper'
 });

Something like:

new Card({
            name: http://database.name,
            number: database.number,
            exp: database.exp,
            cvc: database.cvc
});

Any idea? Thanks!

LeebranZadwell commented 6 years ago

Hi there,

Good news, it's possible! I highly recommend reading the documentation - this repo actually has decent documentation, so take advantage of it when you can! :)

https://github.com/jessepollak/card/blob/master/README.md#rendering-with-different-initial-card-placeholders

From a quick test using the example, you need to have <FORM></FORM> at the very least - there do not need to be any fields within the form (I had mine commented out.)

Hope that helps!

EDIT: I also recommend against saving things like card numbers in the database - it is very easy to get things wrong, and money is on the line. Check out things like Stripe Elements to help you stay secure!

Yussan1 commented 6 years ago

Is it possible? But in the documentation, I only see the examples that require inputs. But if I have the "value" in the database, that doesn't require's any input how I can do it?

I spent on this around 48 hours reading, and reading, and still not figure how to do it. Thanks so much for your fast answer!!

I have this:

<div class="card-wrapper"></div>
<form id="cardforms"></form>

PS: Its possible to see your code if you did something similar? Thanks!!

Yussan1 commented 6 years ago

@LeebranZadwell Can you please explain to me what to do after this?

<div class="card-wrapper"></div>
<form id="cardforms"></form>

What code i should run here:

new Card({
//////
});

Thanks again!

LeebranZadwell commented 6 years ago

48 Hours?! Oh man, sorry to hear that.

Right - the examples have fields, and that's why I had to test it without. I was able to get it to work by commenting out fields. Check out the example I linked earlier, it spells the whole thing out verbatim:

<html>
<body>
<div class='card-wrapper'></div>
<!-- CSS is included via this JavaScript file -->
<script src="/path/to/card.js"></script>
<form>
    <input type="text" name="number">
    <input type="text" name="name"/>
    <input type="text" name="expiry"/>
    <input type="text" name="cvc"/>
</form>
<script>

var card = new Card({
    form: 'form',
    container: '.card-wrapper',

    placeholders: {
        number: '**** **** **** ****',
        name: 'Arya Stark',
        expiry: '**/****',
        cvc: '***'
    }
});
</script>
</body>
</html>

Delete the fields in the example, and you're golden. Honestly, I feel your pain, but this is a lot of time to spend on a problem that is directly spelled out in the documentation. I think the bigger issue here is you feel stuck, so here are some good steps when I feel stuck:

Take the example and get it to run. If there is no example, make one up!
Remove the bits you don't think you need. See what goes wrong.
Rinse and repeat until you get it working.

At the end of the day, I'm not really doing you any favours just giving you the answer here, but I understand your frustration and I want to help. Start simple. Frustration like this is a sign that you might be a little out of your depth. That being said, keep at it!!!

Yussan1 commented 6 years ago

@LeebranZadwell OH man, that worked!! I tough placeholders require "input", that's why I didn't even try without the inputs.

https://puu.sh/B1MZG/8fa8662f8a.png My only question here is, why is not changing the color to the card? With 4242 initial, should load visa type.

1 million thanks!!

My code:

<div class="card-wrapper"></div>
<form id="cardforms"></form>

        new Card({
        form: document.querySelector('form'),
        container: '.card-wrapper',

        placeholders: {
        number: '4242 **** **** 4242',
        name: 'Arya Stark',
        expiry: '12/****',
        cvc: '3**'
        }

        });

LeebranZadwell commented 6 years ago

Awesome!

Really glad to hear it's working! Yeah, you gotta try it. Debugging is all about breaking down assumptions. Worst case scenario you see an error and you know moving forward.

The brand is not set using placeholders, you'll need to set the brand yourself. I actually speak about it in this thread: https://github.com/jessepollak/card/issues/372#issuecomment-335995043

There is more detail here as well: https://github.com/jessepollak/card/issues/372#issuecomment-359956503

It's a bit advanced, so take your time with it and start simple. This is about all I can help with at the moment, so good luck!

Yussan1 commented 6 years ago

Thank you, you are a master!

But i'm seeing in your examples you are using: checkout_script.on('focus', function(event) {

Which I really don't need because I'm not using Stripe. So I should run this code directly?

      $('.jp-card').addClass('jp-card-flipped');
      $('.jp-card-cvc').addClass('jp-card-focused');

Before the new Card or after?

LeebranZadwell commented 6 years ago

You've grabbed a snippet from the portion labelled Highlighting Fields on Card.

Your original question is about changing the brand. Is this about changing the brand, or highlighting fields on the card?

Take a minute. Read it all.

Yussan1 commented 6 years ago

@LeebranZadwell True, I read it all. Even before opening this thread. Btw I'm not an expert javascript, just amateur trying to learn as much possible testing/playing with different libraries, so sometimes I have to re-read something 30 times to start understanding something.

My only purpose is to load from the database, which now is working! Now need to change the color depending on the brand (Visa, Mastercard...)

This is the code you posted:

  checkout_script.on('brand', function(event) {
    var cardLogo = 'none';
    var card_class = 'unknown';

    if (event.brand && event.brand !== 'unknown') {
      var filePath = 'https://cdn.na.bambora.com/downloads/images/cards/' + event.brand + '.svg';
          cardLogo = 'url(' + filePath + ')';

      card_class = 'jp-card-' + event.brand;

      $('.jp-card').attr('class', 'jp-card');
      $('.jp-card').addClass('jp-card-identified');
    }

    if ( card_class === 'unknown' ) {
      $('.jp-card').removeClass('jp-card-identified');
    }

    document.getElementById('id_card_number').style.backgroundImage = cardLogo;
    $('.jp-card').addClass(card_class);

But i see there a lot of things that i think i don't need like: checkout_stripe, brand. (i'm not sure what is that url path)

Thanks again, and sorry I really appreciate it the effort that when someone doesn't understand a language and you try to communicate with him.

LeebranZadwell commented 6 years ago

Everyone starts somewhere!

Nothing to apologize about, I just recommend taking a bit more time to understand what's going on, especially if you're learning.

Having read it all - It's pretty clear that some key pieces of information are getting skipped somehow - regardless of how experienced you are, this is something you'll want to look at. I'm not placing any judgement on this, I'm saying this is likely your biggest obstacle to your personal improvement as well as tackling this issue. I've been there myself, so I believe we have common ground there!

Hope this all helps, I gotta get back to some stuff I'm stumped on!

Keep at it!

Yussan1 commented 6 years ago

Thanks for all @LeebranZadwell I think I will give up this time.

I'm stuck even on the first line: checkout_script.on('brand', function(event) { If I remove it, the entire code breaks, because don't finds 'brand' and 'event', if I don't delete it, I get error checkout_script is not defined so.

I've spent too many hours on this, and I can't think anymore.

Maybe someone will read this and finds useful to do, what I can't do. Thanks again for everything, Have a great day.

jessepollak / card

How to use directly instead of inputs? #407