App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
// "Build a Stripe Checkout Form in React with Custom Button Styles import React from 'react'; import { loadStripe } from '@stripe/stripe-js'; import "./App.css" import { PaymentElement, Elements, useStripe, useElements, } from '@stripe/react-stripe-js'; // CheckoutForm Component const CheckoutForm = () => { const stripe = useStripe(); const elements = useElements(); const handleSubmit = async (event) => { event.preventDefault(); }; return ( <form onSubmit={handleSubmit}> <PaymentElement /> {/* Manually applying custom styles to the Pay Now button */} <button type="submit" className="custom-submit-button" disabled={!stripe || !elements}> Pay Now </button> </form> ); }; // Load Stripe const stripePromise = loadStripe('##yourpublishablekey##'); // Stripe Elements options with appearance const options = { mode: 'payment', amount: 1099, currency: 'usd', appearance: { theme: 'stripe', // Flat design, other options are 'stripe' and 'night' or 'flat' labels: 'floating', // Label positioning options: 'floating', 'inline' variables: { colorPrimary: '#5469d4', // Primary color for buttons, links, etc. colorBackground: '#f5f5f5', // Background color for elements colorText: '#333333', // Text color fontFamily: '"Helvetica Neue", Helvetica, sans-serif', // Custom font family fontWeight: 400, // Font weight spacingUnit: '4px', // Spacing unit for margin and padding }, paymentRequestButton: { theme: 'dark', // Theme for the Payment Request Button ('light' or 'dark') height: '40px', // Height of the button }, input: { borderRadius: '8px', // Border radius for inputs borderColor: '#e1e1e1', // Border color for the input fields borderWidth: '1px', // Border width backgroundColor: '#fff', // Input field background color padding: '12px', // Padding inside input fields }, button: { borderRadius: '8px', // Button border radius backgroundColor: '#5469d4', // Button background color textColor: '#ffffff', // Button text color fontSize: '16px', // Button font size padding: '12px 24px', // Button padding }, }, }; // App Component with Stripe Elements const App = () => ( <Elements stripe={stripePromise} options={options}> <CheckoutForm /> </Elements> ); export default App; // CSS (in App.css or a styled component) |
