#Nick137645

1 messages · Page 1 of 1 (latest)

queen craterBOT
thin meteor
#

👋 How can I help?

rigid phoenix
#

Hi

#

I receive its errors

thin meteor
#

@rigid phoenix At which stage did you see the error from? When I load your website, I don't see the errors

rigid phoenix
#

Simply load the page

#

Same Safari, Chrome and Firefox

#

I just did a test with my wife's macbook. I get the same errors

thin meteor
#

This is what I see. I don't have those errors you mentioned

rigid phoenix
#

Are you able to validate a test payment?

thin meteor
#

Does Payment Element load for you? And can you perform payment on it?

rigid phoenix
#

Yes it loads but I am not able to send the form.

#

<meta http-equiv="Content-Security-Policy" content="Content-Security-Policy: default-src 'self'; connect-src https://api.stripe.com https://maps.googleapis.com https://carsoftwarepro.com; frame-src https://js.stripe.com https://hooks.stripe.com; script-src https://js.stripe.com https://maps.googleapis.com https://carsoftwarepro.com"> is it correct ?

thin meteor
#

If you remove content-security-policy, does it work?

rigid phoenix
#

no

#

My NGINX server seems to be correctly configured and no Cloudflare option seems to modify the content of the pages or the headers.

thin meteor
#

When I test on your website, I was redirected to the same page after completing the payment. I don't have any CSP error in the console

#

Per my checking on your account, the payment wasn't successfully made

#

Could you share the code about how you confirm the payment using stripe.confirmPayment()?

rigid phoenix
#

yes

#

one moment

# 

require_once '../stripe/vendor/autoload.php';
require_once 'secrets.php';

\Stripe\Stripe::setApiKey($stripeSecretKey);

function calculateOrderAmount(array $items): int {
    // Replace this constant with a calculation of the order's amount
    // Calculate the order total on the server to prevent
    // people from directly manipulating the amount on the client
    return 2900;
}

header('Content-Type: application/json');

try {
    // retrieve JSON from POST body
    $jsonStr = file_get_contents('php://input');
    $jsonObj = json_decode($jsonStr);

    // Create a PaymentIntent with amount and currency
    $paymentIntent = \Stripe\PaymentIntent::create([
        'amount' => calculateOrderAmount($jsonObj->items),
        'currency' => 'usd',
        'automatic_payment_methods' => [
            'enabled' => false,
        ],
    ]);

    $output = [
        'clientSecret' => $paymentIntent->client_secret,
    ];

    echo json_encode($output);
} catch (Error $e) {
    http_response_code(500);
    echo json_encode(['error' => $e->getMessage()]);
}```
thin meteor
#

This is the server side code which looks fine to me. stripe.confirmPayment() is the client code using StripeJS. Can you share your client code?

rigid phoenix
# 
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Accept a payment</title>
    <meta name="description" content="A demo of a payment on Stripe" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="checkout.css" />
    
  <!--Content-Security-Policy: frame-ancestors 'self' 'unsafe-inline' -->
  
 <meta http-equiv="Content-Security-Policy" content="Content-Security-Policy: default-src 'self'; connect-src https://api.stripe.com https://maps.googleapis.com https://carsoftwarepro.com; frame-src https://js.stripe.com https://hooks.stripe.com; script-src https://js.stripe.com https://maps.googleapis.com https://carsoftwarepro.com">
  
    <script src="https://js.stripe.com/v3/"></script>
    <script src="checkout.js?4dfdvfddd343" defer></script>
  </head>
  <body>
    <!-- Display a payment form -->
    <form id="payment-form address-form">
      
      <div id="link-authentication-element">
        <!--Stripe.js injects the Link Authentication Element-->
      </div>
      <h3>Address</h3>
      <div id="address-element">
        <!-- Elements will create form elements here -->
      </div>
      <h3>Payment methode</h3>
      <div id="payment-element">
        <!--Stripe.js injects the Payment Element-->
      </div>
      <button id="submit">
        <div class="spinner hidden" id="spinner"></div>
        <span id="button-text">Pay now</span>
      </button>
      <div id="payment-message" class="hidden"></div>
    </form>
  </body>
</html>```
thin meteor
#

From the error here, it looks like your addEventListener isn't registered properly. When clicking the PayNow button, it doesn't invoke handleSubmit

image.png
rigid phoenix
#

This is the Stripe demonstration code

#

I am on this problem since this morning.

thin meteor
rigid phoenix
#

yes

#

exactly

thin meteor
#

When you run the app locally, does it work?

#

I tried to run the example code directly without any modification, the payment was successfully completed

rigid phoenix
#

I don't have a local server to install on my macbook

thin meteor
#

oh wait

#

why do you have two IDs in form ID <form id="payment-form address-form">

rigid phoenix
#

for address collect

thin meteor
#

Can you remove address-form? In your submit event registration, it's looking for payment-form which can't be found

rigid phoenix
#

ok

#

but I need to collect the customer's address and phone number

thin meteor
#

payment-form is just an ID. you can still collect customer address and phone number

rigid phoenix
#

I have deleted ID and form for the address

#

The error is always present

thin meteor
#

which error?

rigid phoenix
#

one moment

#

This message intrigues me

thin meteor
#

I don't see any CSP error on my end

#

This is what I see

image.png
rigid phoenix
#

On my side it doesn't work. Even the 3d secure validation window doesn't want to be displayed. I have tried on my wife's macbook.
I don't have any ad blocker or other extension installed that could block the iframes.

thin meteor
#

The event listener is able to register the handleSubmit event successfully since it is able to look for payment-form div

#

Hmm.. can you try clearing the cache?

rigid phoenix
#

yes

#

I can't validate the payment on my iphone. I am redirected to the forum without errors displayed

#

I deleted the browser cache, deleted the cloudflare caches. Still the same errors.

#

I will try with the cellular network of my phone to make sure I don't have a problem with the fixed internet connection

thin meteor
#

I'm unable to reproduce any error like what you mentioned

#

Your website is working fine and the payment is completed successfully on my end

#

The issue is likely not because of your integration/code

rigid phoenix
#

It works now but there are still errors

#

I was able to validate a payment with 3d secure

#

but mistakes are always there

thin meteor
#

If the payment is working fine, it's safe to ignore the errors since it's report only

rigid phoenix
#

Will alerts appear on my customers' browser at checkout?

#

So I can't use "address element" together with "payment element"?

#

It would seem so.
I thank you for your time and your precious help.

thin meteor
#

Yes, you can use Address Element with Payment Element

#

Address Element can be put under payment-form

#

You don't need a new ID for it

rigid phoenix
#

ok thanks

#

Thank you very much for your help

#

🙏