ferdinand-Paynow

[gleaming vale]

Hi there, let me check for you.

ferdinand-Paynow

[fallen pivot]

thank you @gleaming vale !

[gleaming vale]

You can use this doc to get started with react integration https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements&html-or-react=react

And you can call stripe.confirmPaynowPayment to display the QR code https://stripe.com/docs/payments/paynow/accept-a-payment?platform=web#confirm-payment-intent

[fallen pivot]

thank you @gleaming vale but i got stuck when implemented

[gleaming vale]

can you tell me a bit more?

[fallen pivot]

yes. this is my code on react after following this tutorial https://stripe.com/docs/payments/paynow/accept-a-payment?platform=web#confirm-payment-intent

import React, { useEffect, useState } from 'react';

import { loadStripe } from "@stripe/stripe-js";

function Payment(props) {
//STRIPE PAYNOW
var response = fetch('/create-payment-intent-paynow').then(function(response) {
return response.json();
}).then(function(responseJson) {
var clientSecret = responseJson.client_secret;
// Call stripe.confirmPayNowPayment() with the client secret.
});

// Set your publishable key. Remember to change this to your live publishable key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
var stripePaynow = loadStripe('pk_test_....');

var form = document.getElementById('payment-form-paynow');

form.addEventListener('submit', function(event) {
event.preventDefault();

// Set the clientSecret here you got in Step 2
stripePaynow.confirmPayNowPayment(
clientSecret,
).then((res) => {
if(res.paymentIntent.status === 'succeeded') {
// The user scanned the QR code
} else {
// The user closed the modal, cancelling payment
}
});
});

return (
    <div>
        <ul className="nav nav-tabs">
            <li className="nav-item">
                <a className="nav-link"  aria-current="page" href="#" onClick={handleTabCC}>Credit Cart</a>
            </li>  
        </ul>  

        <form id="payment-form-paynow">
            <button type="submit" id="submit" ></button>
        </form> 
    </div>
);

}

export default Payment;

but i got error

[gleaming vale]

Which line is Payment.js 111? Is form null?

[fallen pivot]

this code :

form.addEventListener('submit', function(event) {

[gleaming vale]

Can you check if form is null?

[gleaming vale]

Hi @fallen pivot just want to check in and see if your problem is resolved.