Hugging Face's logo

Spaces:
eubottura
/
stripe-payment-interface
Running

App Files Community
stripe-payment-interface
File size: 2,980 Bytes 
9113b22
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
83
84
85
86
87
88
89
 
// Stripe Integration Script

// Initialize Stripe with your publishable key
const stripe = Stripe('pk_test_51P8KpGDMHO4ZxtzFDMHO4ZxtzFDMHO4ZxtzF'); // Replace with your actual publishable key
const elements = stripe.elements({
    appearance: {
        theme: 'stripe',
        variables: {
            colorPrimary: '#6366f1', // indigo-500
            colorText: '#1f2937', // gray-800
            colorBackground: '#ffffff',
            colorDanger: '#ef4444', // red-500
        },
        rules: {
            '.Input': {
                borderColor: '#d1d5db', // gray-300
                borderRadius: '0.5rem',
                boxShadow: 'none',
            },
            '.Input:focus': {
                borderColor: '#6366f1', // indigo-500
                boxShadow: '0 0 0 3px rgba(99, 102, 241, 0.3)',
            },
        }
    }
});

// Create and mount the Payment Element
const paymentElement = elements.create('payment', {
    layout: {
        type: 'tabs',
        defaultCollapsed: false,
        radios: false,
        spacedAccordionItems: false
    },
    paymentMethodOrder: ['card', 'klarna', 'afterpay_clearpay', 'affirm'],
    wallets: {
        applePay: 'never',
        googlePay: 'never'
    }
});

paymentElement.mount('#payment-element');

// Handle form submission
const submitButton = document.getElementById('submit-button');
const errorMessage = document.getElementById('error-message');

submitButton.addEventListener('click', async (e) => {
    e.preventDefault();
    
    // Disable the button and show loading state
    submitButton.disabled = true;
    submitButton.innerHTML = `
        <div class="flex items-center justify-center">
            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            Processing...
        </div>
    `;
    
    // Confirm the payment
    const {error} = await stripe.confirmPayment({
        elements,
        confirmParams: {
            return_url: 'https://your-website.com/order-confirmation', // Replace with your actual return URL
        },
    });
    
    // Handle errors
    if (error) {
        errorMessage.classList.remove('hidden');
        errorMessage.textContent = error.message;
        submitButton.disabled = false;
        submitButton.innerHTML = 'Pay $55.98';
    }
});

// Handle real-time validation errors from the Payment Element
paymentElement.on('change', (event) => {
    if (event.error) {
        errorMessage.classList.remove('hidden');
        errorMessage.textContent = event.error.message;
    } else {
        errorMessage.classList.add('hidden');
    }
});