greg-addresselement-values | Stripe Developers | Page 1

coral spearBOT Jul 18, 2023, 3:54 PM

#

solid pivot Jul 18, 2023, 3:55 PM

#

greg-addresselement-values

shrewd creek Jul 18, 2023, 3:56 PM

#

Sorry forgot to say I also use a setupintent

solid pivot Jul 18, 2023, 3:59 PM

#

https://stripe.com/docs/elements/address-element/collect-addresses

#

you can use this to see the address information collected and pass this to your server when you create the Customer. There's nothing "automated" at the moment that will sync the two together

shrewd creek Jul 18, 2023, 4:02 PM

#

Yeah I did read this, however my JS skills are not great, I previously done this via HTML and PHP but obviously the new stripe elements are mostly JS based. can you possibly show me an example for how that address data would feed into the stripe PHP create customer ? My current customer snipper is as follows. My problem is transferring from javascript to PHP

$customer = \Stripe\Customer::create(
[
// this is the data that will be submitted to stripe along with customer data such as meta data and other configured fields
'email' => $email,
'name' => $card_name,
'description' => $description,
'metadata' => $metadata,
'address' => [
'line1' => $address_line1,
'line2' => $address_line2,
'city' => $address_city,
'postal_code' => $address_postcode,
],
'phone' => $phone,
'payment_method' => $paymentmethodId,
'invoice_settings' => [
'default_payment_method' => $paymentmethodId,
],
]
);

solid pivot Jul 18, 2023, 4:07 PM

#

PHP runs on your server. Javascript runs on your client in the browser. There's no direct link from JS to PHP. You have to write custom code to do this really. I can't really write code for you here but I can help if you're stuck
Step 1: Focus on the client, write JS code to see the address being inputed and log it to the console as it happens
Step 2: Add JS code that will send the address to your server (the same way you write any javascript in your app to send any value from your app to your PHP) and log it on the server
Step 3: Retrieve the data sent from the client and send it in the API to the Customer create API

shrewd creek Jul 18, 2023, 4:09 PM

#

Yeah I've gotten part of this done, my js code is below, it's pretty plain at this point

// Create an address element instance
const addressElement = elements.create("address", addressElementOptions);

// mount the address element
addressElement.mount("#address-element");

// listen for a change on the address elements and store it
addressElement.on('change', (event) => {
const address = event.value;
});

#

Sorry

solid pivot Jul 18, 2023, 4:11 PM

#

So what does that mean? What's in address? Did you log it?

shrewd creek Jul 18, 2023, 4:13 PM

#

It's not been logged no this was as far as I got. As I said I normally done this via HTML/PHP so I'm finding the javascript side a little trickier

solid pivot Jul 18, 2023, 4:15 PM

#

Sure but I can't really write your entire code I'm sorry. You likely need to hire a freelancer to teach you how to do all of this but I can't teach you myself, this server is really busy with 10 other people right now asking for help
I can answer concrete questions developers to developers. But the learning of the basics is something you do on your own

shrewd creek Jul 18, 2023, 4:16 PM

#

A little bit mean, I am a developer, I just don't specialise with the JS side of things is all. I can build various things with the likes of HTML and PHP and basic JS work. But this aspect is a bit more advanced and the stripe docs don't really cover examples of converting the data processed in the JS element to the PHP API. So I figured I'd ask in here

solid pivot Jul 18, 2023, 4:17 PM

#

Sorry I'm not trying to be mean. I totally understand that you aren't familiar with JS. I wasn't either when I started doing web development

#

What I am saying is that I can't really teach you here. It'd take days to teach you how to do this end to end and learn it the right way

shrewd creek Jul 18, 2023, 4:21 PM

#

In all honesty JS moves to quickly and there's always some new alternative. I've never had the time to get down to full learning

solid pivot Jul 18, 2023, 4:21 PM

#

Totally fair, I also mostly know basic/vanilla JS

shrewd creek Jul 18, 2023, 4:22 PM

#

I normally find an example which stripe usually has plenty of, and modify from there which is probably what most of the 300 lines of JS code are for my stripe integration. unfortunately the latest elements stuff is more advanced as I'm sure youd agree

#

I'll try figure out how to dump the address out and get it over to PHP though. I was basically hoping you'd have access to an example or even a gist someone's made that does similar

solid pivot Jul 18, 2023, 4:26 PM

#

yeah I just don't have a specific example and really the complex part is how to send it to your server which is really specific to your own application overall

#

If you share a bit more of your code like how you send a value from JS to PHP usually I can show you how to connect the two together

shrewd creek Jul 18, 2023, 4:28 PM

#

That's my other issue, I made this a while back so let me check through my code base, there's a fair bit going on in some parts

#

I'll see what I can send over

#

Well, here's that JS file, you're welcome to see what I've done. Some of the old code is still there, I need to remove that but I wanted the new stuff to work first

#

📎 message.txt

#

📎 message.txt

#

the form is an html form as you'd expect
<form action="<?php echo BASE_DIR; ?>customer/" method="post" id="payment-form" data-secret="<?php echo $clientSecretID; ?>">

solid pivot Jul 18, 2023, 4:31 PM

#

hmmmm

#

trying to figure out what this code does

shrewd creek Jul 18, 2023, 4:32 PM

#

the bottom section of the js file is a bit more outdated, that was used with the card element

solid pivot Jul 18, 2023, 4:32 PM

#

    event.preventDefault();
    var cardholder_name = document.getElementById("cardholder-name").value;
    var address_line1 = document.getElementById("card-address1").value;
    var address_line2 = document.getElementById("card-address2").value;
    var address_city = document.getElementById("card-address-city").value;
    var address_zip = document.getElementById("card-address-postcode").value;
    var submitbutton = document.getElementById("submit-button");
    var clientSecret = submitbutton.getAttribute("data-secret");```

#

what does this do? Where do those values come from exactly? Your own address form separate from AddressElement?

shrewd creek Jul 18, 2023, 4:33 PM

#

those are my HTML fields that I used before I started implementing the new stripe elements

solid pivot Jul 18, 2023, 4:33 PM

#

ah so they are irrelevant?

shrewd creek Jul 18, 2023, 4:33 PM

#

they will be when I get it working yeah

#

as en example heres the html

#

<div class="col">
<input name="card-address1" id="card-address1" class="StripeElement" placeholder=" " pattern="['-A-Za-z0-9 ]+" required />
<label>
Address line 1
</label>
</div>

solid pivot Jul 18, 2023, 4:34 PM

#

sorry, getting so lost in your code

shrewd creek Jul 18, 2023, 4:34 PM

#

apologies, I should have maybe commented my code for you

solid pivot Jul 18, 2023, 4:34 PM

#

Where is the "SetupIntent" creation?

shrewd creek Jul 18, 2023, 4:34 PM

#

sure, that's called in via php include

#

<?php

// Create a Stripe SetupIntent instance
$intent = \Stripe\SetupIntent::create(
[
//'payment_method_types' => ['card', 'link'],
'usage' => 'off_session',
'automatic_payment_methods' => ['enabled' => true]
]
);

// Set the client secret key into a variable
$clientSecretID = $intent->client_secret;

solid pivot Jul 18, 2023, 4:35 PM

#

that's the PHP part

#

Where in JAvascript do you get that information back

shrewd creek Jul 18, 2023, 4:36 PM

#

oh, I beleive that's all the JS I use

solid pivot Jul 18, 2023, 4:36 PM

#

I mean that's impossible

#

That PHP code is creating a SetupIntent: seti_123 and it has a client secret that needs to be sent to the JS

shrewd creek Jul 18, 2023, 4:37 PM

#

oh sorry

#

below my HTML form ->

        <script type="text/javascript">
            const stripe = Stripe("<?php echo $stripe_public; ?>");
            const  clientSecretID = "<?php echo $clientSecretID; ?>";
        </script>
        <script type="text/javascript" src="<?php echo ASSET_DIR; ?>scripts/form.js"></script>

#

and theres a PHP vars file that does this:

$paymentmethodId = $_POST['paymentmethodId'];
$email = $_POST['stripeEmail'];
$card_name = $_POST['cardholder-name'];
$address = $_POST['card-address1'] . ', ' . $_POST['card-address2'] . ', ' . $_POST['card-address-city'] . ', ' . $_POST['card-address-postcode'];
$address_line1 = $_POST['card-address1'];
$address_line2 = $_POST['card-address2'];
$address_city = $_POST['card-address-city'];
$address_postcode = $_POST['card-address-postcode'];

#

that's previously how I've gotten my data

solid pivot Jul 18, 2023, 4:38 PM

#

So you create the SetupIntent on page load like before you render PaymentElement?

shrewd creek Jul 18, 2023, 4:38 PM

#

yeah

solid pivot Jul 18, 2023, 4:38 PM

#

but then you have //const elements = stripe.elements({clientSecret: clientSecretID}, style); const elements = stripe.elements(options);

shrewd creek Jul 18, 2023, 4:38 PM

#

<?php

require_once './paths.php';
require_once ASSET_PATH. 'includes/security.php';
require_once ASSET_PATH. 'includes/header.php';
require_once ASSET_PATH. 'includes/jfpost.php';
require_once ASSET_PATH. 'config/config.php';
require_once ASSET_PATH. 'includes/identity.php';
require_once ASSET_PATH. 'includes/setupintents.php';

?>

solid pivot Jul 18, 2023, 4:38 PM

#

which means you're never using it and are using a more advanced flow called "deferred intent"

shrewd creek Jul 18, 2023, 4:38 PM

#

top of my index file

#

then the form loads below that

solid pivot Jul 18, 2023, 4:39 PM

#

I'm sorry it's like you have 3 separate integrations all mixed up in one file

#

What are you really doing? Wouldn't Checkout be drastically easier for you than all of this?

shrewd creek Jul 18, 2023, 4:39 PM

#

you'd think so

#

the company I work for ask for strange things

solid pivot Jul 18, 2023, 4:40 PM

#

I mean you even have some bits of a legacy CardElement integration commented out

shrewd creek Jul 18, 2023, 4:40 PM

#

this is a way for the company to get new customers payment details and save them to stripe

#

yeah this was all being updated from card element

solid pivot Jul 18, 2023, 4:40 PM

#

But Checkout can do exactly that: collect card details and save it to a Customer for you

#

Checkout would take a few lines of code

shrewd creek Jul 18, 2023, 4:40 PM

#

we originally started this before checkout was avaialble to us I think

#

funnily enough they do actually use checkout too. but for whatver reason I've been asked to update this integration I had made

#

I just do what Im asked 🙈

solid pivot Jul 18, 2023, 4:42 PM

#

Sure but now that we talked, maybe you should go back to them and use Checkout instead. Honestly based on your code this is going to take you a few days at best to implement this end to end

shrewd creek Jul 18, 2023, 4:43 PM

#

yeah, now you're seeing why I reached out 😉

#

the live version of this code is actually using the legacy card element completely

#

the mess I've showed you is my dev file where I've been playing around trying to update

solid pivot Jul 18, 2023, 4:44 PM

#

Okay so let's give up entirely on the right approach, this really won't work

#

You shared the PHP code that creates the Customer earlier. That code seems to run after the SetupIntent succeeded, is that correct?

shrewd creek Jul 18, 2023, 4:45 PM

#

yeah pretty much

#

on clicking submit stripe does its thing and on success the form post is actioned

#

my customer.php file

solid pivot Jul 18, 2023, 4:46 PM

#

Cool, so at that point I see you do 'payment_method' => $paymentmethodId, 'invoice_settings' => [ 'default_payment_method' => $paymentmethodId, ], ]

#

What you can do is before creating the Customer you can call the Retrieve PaymentMethod API: https://stripe.com/docs/api/payment_methods/retrieve to get the full PaymentMethod object and that will have the full address/billing detaisl information inside billing_details

#

and then you can pass those values to the Customer creation all in PHP

shrewd creek Jul 18, 2023, 4:47 PM

#

that sounds like a plan

solid pivot Jul 18, 2023, 4:48 PM

#

It's not the best approach but it will definitely be a lot easier for you

shrewd creek Jul 18, 2023, 4:48 PM

#

I'm just bringin the page up now

#

so you're suggesting confirm the setup intent with payment method, then retrieve said payment method via the API (which gives me the data via PHP) and then use that in my customer creation

solid pivot Jul 18, 2023, 4:50 PM

#

All I'm saying is to change the PHP code that creates the Customer (what you shared above) in that file, before that call, add the retrieval of the PaymentMethod

shrewd creek Jul 18, 2023, 4:51 PM

#

yeah, ok I got you. I do remember having the pm_id being gave to me in previous var dumping from before. I can get that and process it to get the data. Thanks I think that's enough to set me off with an attempt

solid pivot Jul 18, 2023, 4:53 PM

#

yeah the PM id is in the part I shared above

#

seems your code has it as $paymentmethodId

shrewd creek Jul 18, 2023, 4:53 PM

#

yeah that's correct, I also have it set to be stored as a php session variable it seems from my previous debugging

#

Well thank you for helping me onto the right tracks I do appreciate it. I unfortunately have a meeting I've gotta attend now. But I look forward to having a go at this tomorrow

#greg-addresselement-values