JCoDog - issuing elements PHP | Stripe Developers | Page 1

mint gladeBOT Dec 14, 2022, 3:13 PM

#

pulsar dragon Dec 14, 2022, 3:16 PM

#

These elements are meant for a front-end application, which is expected to be running some javascript

#

So yes you'll need at least some client script for using the issuing elements on your page for your customers/users

echo bear Dec 14, 2022, 3:17 PM

#

Yes, I see. I am just trying to figure how to make it run, but I think I will make an express localhost version of the site for now as I only need information about one card.

#

I assume you can declare stripe in the script tag within html for this to work?

pulsar dragon Dec 14, 2022, 3:23 PM

#

Yep! You can see that done here:
https://stripe.com/docs/js/including
https://stripe.com/docs/js/initializing

Stripe JS Reference

#

JCoDog - issuing elements PHP

echo bear Dec 14, 2022, 3:41 PM

#

This has not worked.

#

#

lone turtle Dec 14, 2022, 3:43 PM

#

What is that blue bar? Is that what the issuing card pin display looks like when mounted?

echo bear Dec 14, 2022, 3:43 PM

#

yes

#

its meant to show the pin there

#

but it doesnt.

lone turtle Dec 14, 2022, 3:45 PM

#

What happens if you get rid of the style that you are providing?

echo bear Dec 14, 2022, 3:46 PM

#

is it meant to be in a div or a paragraph?

lone turtle Dec 14, 2022, 3:48 PM

#

I think it should be in its own script tag. Can you try moving your code out of the tag that sources stripe.js?

<script>
const pubKey = ....
</script>```

echo bear Dec 14, 2022, 3:53 PM

#

ok

#

its telling me await is not valid

#

Nevermind got this error

#

This is the code

lone turtle Dec 14, 2022, 4:09 PM

#

Which line of code is throwing that error?

echo bear Dec 14, 2022, 4:09 PM

#

#

I am still not seeing the Pin number or the copy button

#

How do I display these using the mount thing as I am not sure it is attatching to the elements in the html document

#

do I need to add it to an iframe?

lone turtle Dec 14, 2022, 4:13 PM

#

The mounting is what creates the iframe here.

#

I am still not seeing the Pin number or the copy button
Does this mean that that previous exception about ephemeralKey and nonce went away or is this still the same issue?

echo bear Dec 14, 2022, 4:14 PM

#

yes

#

its not working, I have done the dom element as it shows in the stripe.js reference but it is not working.

#

<div class="wrapper">
    <div class="content">
        <div class="store-item" style="text-align: center;">
            <label>Pin:
                <div id="card-number"></div>
            </label>
        </div>
    </div>
</div>

<script src="https://js.stripe.com/v3/"></script>
<script async>
    async function getCard() {
        const pubkey = "";
        var stripe = Stripe(pubkey);

        const cardId = '';

        // Use Stripe.js to create a nonce
        const nonceResult = await stripe.createEphemeralKeyNonce({
            issuingCard: cardId,
        });

        if (nonceResult.error) {
            console.error(nonceResult.error);
        }

        const nonce = await nonceResult.nonce;

        // Call your ephemeral key creation endpoint to fetch the ephemeral key
        const ephemeralKeyResult = await fetch('', {
            method: 'POST',
            body: `cardId=${cardId}&nonce=${nonce}`,
        });

        const ephemeralKeyResponse = await ephemeralKeyResult.json();
        const ephemeralKeySecret = await ephemeralKeyResponse.ephemeralKeySecret;

        const elements = stripe.elements();

        const cardNumber = await elements.create('issuingCardPinDisplay', {
            issuingCard: cardId,
            nonce: nonce,
            ephemeralKeySecret: ephemeralKeySecret,
        });

        cardNumber.mount('#card-number');

        const cardNumberCopy = await elements.create('issuingCardCopyButton', {
            toCopy: 'pin',
            style: {
                base: {
                fontSize: '12px',
                lineHeight: '24px',
                },
            },
        });

        // Once again, mount the elements onto DOM elements in your web application
        cardNumberCopy.mount('#card-number-copy');
    }
    getCard()
</script>```

lone turtle Dec 14, 2022, 4:24 PM

#

When you say not working. Do you mean you get that exception and stripe.js errors out? Or are you past that exception, no errors in the console, and the DOM element is there but not visible?

echo bear Dec 14, 2022, 4:24 PM

#

#

This is the line it says has the error.

lone turtle Dec 14, 2022, 4:27 PM

#

Gotcha, thank you for clarifying. Looking in to what can cause that error

echo bear Dec 14, 2022, 4:33 PM

#

something about line one column one? So cardId?

#

ok well I told it to log the ephemeral key stuff and its logged nothing

#

So is this endpoint wrong?

#

https://dashboard.stripe.com/logs/req_NpblHfnQquIBRi

Stripe Login | Sign in to the Stripe Dashboard

Sign in to the Stripe Dashboard to manage business payments and operations in your account. Manage payments and refunds, respond to disputes and more.

#

Somehow I am passing in unknown variables

neon echo Dec 14, 2022, 5:07 PM

#

Hi there 👋 taking over for @lone turtle

Can you summarize any outstanding questions? The thread is a little all over the place and I'm unsure if anything is outstanding

echo bear Dec 14, 2022, 5:07 PM

#

I fixed that but it is not sending the variables from the client-side through the serverside endpoint.

#

As shown here

#

https://dashboard.stripe.com/logs/req_bff4PpIJPM00Iz

Stripe Login | Sign in to the Stripe Dashboard

Sign in to the Stripe Dashboard to manage business payments and operations in your account. Manage payments and refunds, respond to disputes and more.

#

This is the endpoint

#

This is where I call to the endpoint.

#

The endpoint is not returning the ephemeral key so the entire process of retrieving the card is not working.

haughty garden Dec 14, 2022, 5:15 PM

#

give me a sec, catching up

#

first question

#

1/ can you add logs to your server-side PHP code to ensure that your PHP endpoint is being called correctly? just add multiple log lines through your endpoint , i.e. before and after the Stripe related code

echo bear Dec 14, 2022, 5:19 PM

#

I know it is being called correctly because it triggers the event in the logs on stripe

haughty garden Dec 14, 2022, 5:20 PM

#

yeah but please do add the logs, the Stripe part might be executing fine but I want to ensure you get to the last line of your PHP code

echo bear Dec 14, 2022, 5:20 PM

#

ok

#

How would you like me to do it? Make it write a message to a file?

haughty garden Dec 14, 2022, 5:23 PM

#

yeah that works, or if you have a server console, then just writing to it

echo bear Dec 14, 2022, 5:24 PM

#

i only have composer access

#

it is not getting to be bottom of the script as is erros

haughty garden Dec 14, 2022, 5:27 PM

#

which part errors, is it the Stripe API request?
or a part of your code after it?

echo bear Dec 14, 2022, 5:30 PM

#

stripe

#

payload is $payload->body right?

haughty garden Dec 14, 2022, 5:33 PM

#

sorry I'm a bit confused as you had said the Stripe part works correctly earlier, so the Stripe part is error'ing out? What is the request ID? You can get it from your https://dashboard.stripe.com/logs/ page

echo bear Dec 14, 2022, 5:34 PM

#

it isnt getting the information from payload

haughty garden Dec 14, 2022, 5:34 PM

#

payload is $payload->body right?
you mean the payload your frontend is sending, right? I am not entirely sure as I'm not a PHP expert but I recommend logging out both $payload and $payload->body to confirm which has the data you're sending

echo bear Dec 14, 2022, 5:51 PM

#

its something to do with passing the values into the endpoint

#

its not turning the data passed into the payload into an object properly.

#JCoDog - issuing elements PHP