#mick23_code

1 messages · Page 1 of 1 (latest)

analog wagonBOT
#

👋 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/1229438523485196401

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

river ridgeBOT
#

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

cursive steppe
#

Hello

#

Going to need more information to help

trim siren
#

I've had quite a few threads on this topic, but I'm still not getting things working for what I need, let me provide a summary.

#

SaaS Application, trying to integration with Stripe

#

Got the Create Customer in SaaS --> Stripe bit working fine.

#

Now I'm trying to have a page in SaaS for Add Card to Account, while making sure the user cannot add duplicate cards.

#

Specifically, wanting to Add Card to Account, so the user can at another point in time in the future use that card to make a payment. So not making payment at the same time.

cursive steppe
#

Sure. Are you using Payment Element?

trim siren
#

I've got the Stripe Elements Payment Element bit added into the page fine

cursive steppe
#

Ok

trim siren
#

On the last chat, the summary actions I needed to go away with and implement were;

#
  1. On Add Card page, Send to Stripe to get the Card Fingerprint (without adding to a Customer Account)
  2. On Add Card page, check with /my-api/if-card-fingerprint-already-exists-in-saas-db
  3. If not, create Setup Intent
#

So I previously had #3 working, but then noticed it allowed duplicates. So trying to get #1 working. I've built #2 in prep as that's the easy bit.

#

But what I have noticed (and I'll share code in a minute) is that on #1, when I do this, the Fingerprint ID is actually never returned from STripe

cursive steppe
#

Are you using the two step confirmation flow?

trim siren
#

This is the code in the Java SDK;

stripeElements.submit();

#

Not come across that terminology and/or link, let me have a quick skim (answer is probably no given that...)

cursive steppe
#

Basically how are you creating the PaymentMethod to check its fingerprint before you create/confirm your SetupIntent?

trim siren
#

Just had a skim through that link, some code snippets look very familiar, but later on in the doc, not so much.

cursive steppe
#

Okay if you show me your client-side code then that might be the next best step here

trim siren
#

Let me share code I have so far (sorry, it's not very nice to read yet and I've probably screwed some things up with copying and pasting trying different combinations)

#

Standard Payment Elements bit - Nothing too exciting here;

<form id="payment-form">
<div id="payment-element">
Elements will create form elements here
</div>
<button id="submit">Submit</button>
<div id="error-message">
Display error message to your customers here
</div>
</form>

analog wagonBOT
#

🧑‍💻 How to format code on Discord

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)
trim siren
#

Then the first bits of JS to attach Stripe.js to the form;

                        // https://docs.stripe.com/payments/accept-a-payment-deferred?platform=web&type=setup#additional-options
                        // Configure Options that we want to use on the Payment Element for the user to interact with
                        const options = {
                            mode: 'setup',
                            currency: 'gbp', // The Currency for which to charge the Customer in. Always default to GBP to avoid foreign currency conversion fees? Maybe? 
                            // Fully customizable with appearance API.
                            appearance: {/*...*/}, // N/A
                            paymentMethodCreation: "manual" // Aka. "Allows PaymentMethods to be created from the Elements instance using stripe.createPaymentMethod."
                        };

                        // Set up Stripe.js and Elements to use in checkout form
                        const stripeElements = stripe.elements(options);

                        // Create and mount the Payment Element and bind it to the HTML Element for "id=payment-element"
                        const paymentElement = stripeElements.create('payment');
                        paymentElement.mount('#payment-element');
#

Then this is where things just seem to go off a cliff...

# 
                        // Add OnFormSubmit Event Listener to Payment Form
                        const form = document.getElementById('payment-form');
                        form.addEventListener('submit', async (event) => {

                            // TBC
                            event.preventDefault();
                            // Think I need to implement a Promise off the back of the below to pass through the Promise to turn into a JSON Object
//                            const resultFromSubmission = stripeElements.submit();
//                            console.log("resultFromSubmission: " + resultFromSubmission);
//                            console.log("PaymentMethod: " + resultFromSubmission.paymentMethod.id); // THIS WORKS to get the Card Fingerprint ID



                            let myPromise = new Promise(function (myResolve, myReject) {
                                // "Producing Code" (May take some time)
                                stripeElements.submit();

                                myResolve(); // when successful
                                myReject();  // when error
                            });

                            // "Consuming Code" (Must wait for a fulfilled Promise)
                            myPromise.then(
                                    function (value) { /* code if successful */
                                        console.log("Value: " + value); // Undefined - I think this is because the Add Payment MEthod doesn't actually return a Response Body, according to the Stripe API. 
                                    },
                                    function (error) { /* code if some error */
                                        console.log("error: " + error);
                                    }
                            );
cursive steppe
#

Yeah you are missing creating the actual PaymentMethod here

trim siren
#

So when I'm running the above bit of code

stripeElements.submit();

It doesn't return anything back to me

trim siren
#

I tried so many different combinations / permutations the other day that it just started breaking the Payment Elements form due to all the JS errors I was getting all over the place.

#

I wasn't sure if I needed any of that Promise stuff, I just added that in because I noticed there was a Promise object returned after that stripeElements.submit() bit of code. But that didn't seem to do anything in the end, so I imagine I can get rid of that.

# 
//                            const stripePaymentMethod = await stripe.createPaymentMethod({
//                                stripeElements
//                            });
#

I'm assuming it's this bit of code I need

cursive steppe
#

Yep

trim siren
#

Which seemed to work when I was doing the Setup Intent stuff, but I could never get it working when not using the Setup Intent stuff. Just seemed to constantly break things no matter where I put that

cursive steppe
#

But really

#

That createPaymentMethod implementation is actually the legacy method

#

I'd recommend uisng // Create the ConfirmationToken using the details collected by the Payment Element const {error, confirmationToken} = await stripe.createConfirmationToken({ elements, params: { payment_method_data: { billing_details: { name: 'Jenny Rosen', } } } });

trim siren
#

Right I see. So that's the bit in the guide I was skimming when I mentioned I saw things that were new.

#

This is starting to fill in a few gaps

cursive steppe
#

So you look at payment_method_preview.card.fingerprint and check that against your database to see if it already exists

trim siren
#

That makes sense. Let me quickly knock that up and have a go.

cursive steppe
#

👍

trim siren
#

There doesn't seem to be any Java code snippets like there usually is?

cursive steppe
#

You are right... surprised those docs haven't been updated yet to include all languages. I'll flag that internally

trim siren
#

I've just done the same too via that report code error feature

cursive steppe
#

Thanks

#

Mostly that part is all custom code though

trim siren
#

To be fair, this is the first time I've ever seen a missing code snippet and I feel as though I've read them all by now

cursive steppe
#

You just return what you want to your frontend based on the result

trim siren
#

Do you know what the Java Object would be that is returned. i.e. like the below is what I used when playing with the SetupIntent stuff;

SetupIntent setupIntent;
            try {
                setupIntent = SetupIntent.create(params);
#

So I could then easily get the data out that I needed;

Map<String, String> map = new HashMap();
                map.put("client_secret", setupIntent.getClientSecret());
cursive steppe
#

I'm not a Java dev so I don't know off the top of my head, sorry

trim siren
#

Is there an equivalent object I need to use for this confirmation token?

#

ah right, ok.

#

Let me have a dig aroudn