toxic tideBOT May 3, 2024, 9:05 PM

#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1236061030556368937

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

buoyant jetty May 3, 2024, 9:06 PM

#

    var cardNumber = elements.create("cardNumber", {
        style: style
    });
    cardNumber.mount("#card-number-element");
    var cardExpiry = elements.create("cardExpiry", {
        style: style
    });
    cardExpiry.mount("#card-expiry-element");
    var cardCvc = elements.create("cardCvc", {
        style: style
    });
    cardCvc.mount("#card-cvc-element");

#

And my forms payment :

            <form id="payment-form" method="POST" action="process_payment.php">
                <div class="mb-6">
                    <label for="cardholder-name" class="block text-gray-700 text-sm font-bold mb-2">Nom du titulaire de la carte</label>
                    <input type="text" id="cardholder-name" class="stripe-element block w-full px-4 py-2 text-gray-700">
                </div>
                <div class="mb-6">
                    <label for="card-number-element" class="block text-gray-700 text-sm font-bold mb-2">Numéro de carte</label>
                    <div id="card-number-element" class="stripe-element block w-full px-4 py-2 text-gray-700"></div>
                </div>
                <div class="flex mt-4 mb-4">
                    <div class="w-1/2 mr-2">
                        <label for="card-expiry-element" class="block text-gray-700 text-sm font-bold mb-2">Date d'expiration</label>
                        <div id="card-expiry-element" class="stripe-element block w-full px-4 py-2 text-gray-700 StripeElement"></div>
                    </div>
                    <div class="w-1/2 ml-2">
                        <label for="card-cvc-element" class="block text-gray-700 text-sm font-bold mb-2">CVC</label>
                        <div id="card-cvc-element" class="stripe-element block w-full px-4 py-2 text-gray-700"></div>
                    </div>
                </div>
                <div class="mb-6">
                    <label for="billing-address" class="block text-gray-700 text-sm font-bold mb-2">Adresse de facturation</label>
                    <input type="text" id="billing-address" class="stripe-element block w-full px-4 py-2 text-gray-700">
                </div>

#

<div class="flex mb-6">
<div class="w-1/2 pr-2">
<label for="billing-city" class="block text-gray-700 text-sm font-bold mb-2">Ville</label>
<input type="text" id="billing-city" class="stripe-element w-full px-4 py-2 text-gray-700">
</div>
<div class="w-1/2 pl-2">
<label for="billing-postal-code" class="block text-gray-700 text-sm font-bold mb-2">Code postal</label>
<input type="text" id="billing-postal-code" class="stripe-element block w-full px-4 py-2 text-gray-700">
</div>
</div>
<div class="flex justify-between items-center">
<button type="submit" class="w-full bg-pink-200 py-2 px-4 rounded">Payer <?= number_format(($_SESSION['amount_to_charge'] ?? 0) / 100, 2) . $currencySymbol ?></button>
</div>
</form>

#

Sorry for presentation...

toxic tideBOT May 3, 2024, 9:07 PM

#

🧑‍💻 How to format code on Discord

toxic tide · 2024-05-03T21:05:15.142Z

sh_cardelement-appearance | Stripe Developers | Page 1

Inline code: wrap in single backticks (`)

This:

The variable `foo` contains the value `bar`.

Will turn into this:

The variable foo contains the value bar.

Code blocks: wrap in three backticks (```)

Also, you can specify the language after the first three backticks to get syntax highlighting.

This:

```javascript
function foo() {
return 'bar';
}
```

Will turn into this:

function foo() {
  return 'bar';
}```

Notes about **code blocks**:
- Specifying the language is optional (e.g., you can omit `javascript` in the example above)
  - If you don't specify the language you won't get syntax highlighting
- When you're inside a code block (after you type \`\`\`) the `Return`/`Enter` key will add a new line instead of sending your message
  - Once you end the code block `Return`/`Enter` works normally again

You can [read more about message formatting on Discord's website.](https://support.discord.com/hc/en-us/articles/210298617)

vast oracle May 3, 2024, 9:07 PM

#

(Please read the explanation above)

#

But overall: Let's start small: do you have a live demo like a jsfiddle that explains exactly your problem? It's really tough to grasp with all the code dump and no idea what you visually want

buoyant jetty May 3, 2024, 9:09 PM

#

vast oracle (Please read the explanation above)

If I buy discord nitro, the code will be compressed, right?

buoyant jetty May 3, 2024, 9:10 PM

#

vast oracle But overall: Let's start small: do you have a live demo like a jsfiddle that exp...

I'd like to create a payment page, requesting information such as name, city and, above all, payment details. All this with a black border, and when clicked, a purple border. However, I can't get it to work at all, and I'm completely lost. Maybe I should go back to using my own code...

vast oracle May 3, 2024, 9:10 PM

#

you don't need to buy anything, you an read the explanation to learn how to format your code on Discord

buoyant jetty May 3, 2024, 9:11 PM

#

Like this ?

vast oracle May 3, 2024, 9:11 PM

#

yes

#

anyways, let me work on something simple to show you, give me some time

#

sh_cardelement-appearance

buoyant jetty May 3, 2024, 9:13 PM

#

I look forward to hearing from you. I'll give you an example of my code currently under development.

vast oracle May 3, 2024, 9:14 PM

#

you already did above

buoyant jetty May 3, 2024, 9:14 PM

#

Section HTML using TAILWINDCSS

📎 message.txt

#

And my JavaScript

📎 message.txt

#

Yes, that's how you formatted everything!

vast oracle May 3, 2024, 9:20 PM

#

Okay, so if you want a border around each element you have to put a border on the parent container. It's not something you pass in the Elements styles.

so what you want is apply a border to the div #card-number-element

buoyant jetty May 3, 2024, 9:21 PM

#

Exactly like this:
<div id=“card-number-element” class=“stripe-element block w-full px-4 py-2 text-gray-700”></div>
And also for the date and cvv.

vast oracle May 3, 2024, 9:24 PM

#

maybe, those are your own classes so I can't say. But yes that worked for me for example with this:
HTML:

  <div id="card_number" class="elements-container">
    <!-- a Stripe Element will be inserted here. -->
  </div>
  <div>
    next card element
  <div>
  <div id="card_expiry" class="elements-container">
    <!-- a Stripe Element will be inserted here. -->
  </div>
  </label>
</div>```
CSS:
```<style type="text/css">
  .elements-container {
    border: 1px solid black;
  }
</style>```

buoyant jetty May 3, 2024, 9:25 PM

#

What about the purple focus when you're on the element?

vast oracle May 3, 2024, 9:25 PM

#

Sure but I just gave you one example to understand you were saying you didn't understand how to do this

#

So what exactly is the problem with the purple focus?

buoyant jetty May 3, 2024, 9:26 PM

#

It does not apply, in my opinion "div"...

vast oracle May 3, 2024, 9:28 PM

#

I'm sorry I have no idea what "apply in my opinion div" could mean as a sentence. Can you try and be really really specific about the exact issue?

buoyant jetty May 3, 2024, 9:30 PM

#

                    </div>

                    <style type="text/css">
                        .elements-container {
                            border: 1px solid black;
                        }

                        .elements-container:focus {
                            border: 1px solid purple;
                        }
                    </style>

Doesn't this work for focus, for example? The black border is applied but not the purple one when the user clicks in the box.

vast oracle May 3, 2024, 9:31 PM

#

for example here's what I changed: .elements-container.StripeElement--empty { border: 1px solid green; } .elements-container.StripeElement--focus { border: 1px solid red; }

#

that works for me, green on load, red when I click. Is that what you want?

buoyant jetty May 3, 2024, 9:32 PM

#

This works, you're my savior! I'm going to start my tests, and I'll get back to you on the rest - how's that?

#

What are --empty and --focus?

#

I've found an error: when I write in my cell (field) and then leave it, the green border disappears?

vast oracle May 3, 2024, 9:41 PM

#

I'm sorry you are being super vague, it's tough to help you

#

https://docs.stripe.com/js/element/the_element_container make sure to read this and see all the various classes that can be applied to the container

buoyant jetty May 3, 2024, 9:48 PM

#

When you click inside the map field, the border turns red, but if you enter something inside, for example “4242”, and click outside the field, the green border disappears, do you?

vast oracle May 3, 2024, 9:49 PM

#

what does "the map field" mean? What map?

#

My example is only a basic example. There are other states than focus and empty. If you type 4242 and leave, that's a bad card number so you are going to have the error state. See the exact docs I linked you to

buoyant jetty May 3, 2024, 9:50 PM

#

I just succeeded with this:

.StripeElement--complete
.StripeElement--empty
.StripeElement--focus
.StripeElement--invalid

#

Absolutely, the link seems to help, I'll give it a try tonight and get back to you, thanks!

#sh_cardelement-appearance

🧑‍💻 How to format code on Discord

Inline code: wrap in single backticks (`)

Code blocks: wrap in three backticks (```)