Create a custom donation button with django-paypal package

Question

I want to create a custom donate button using the django-paypal package. I have created an html page using tailwindcss and alpineJS which allows users to pick from the options or enter their own amount

What i am trying to archived is to pass the amount the user selected to be the amount for the PayPAl. So if they choose any of the radio inputs, that should be the amount, Also if they type in an amount that should be the amount.

#html

 <form action="" x-data="{ showOtherAmount: false }">

                    <div class="flex flex-wrap gap-3">
                        <label class="cursor-pointer">
                            <input @click="showOtherAmount=false" type="radio"  value="10" class="peer sr-only" name="pricing" />
                            <div
                                class="w-32 max-w-xl rounded-md bg-white p-5 text-gray-600 ring-2 ring-transparent transition-all hover:shadow peer-checked:text-white peer-checked:ring-blue-400 peer-checked:ring-offset-2 peer-checked:bg-blue-400">
                                <div class="flex flex-col gap-1">

                                    <div class="flex justify-center items-center flex-col">
                                        <div class="flex">
                                            <span class="text-lg">£</span>
                                            <h1 class="py-1">10</h1>
                                        </div>
                                        <span class="text-xs">GBP</span>
                                    </div>
                                </div>
                            </div>
                        </label>

                        <label class="cursor-pointer">
                            <input @click="showOtherAmount=false" type="radio"  value="50"class="peer sr-only" name="pricing" />
                            <div
                                class="w-32 max-w-xl rounded-md bg-white p-5 text-gray-600 ring-2 ring-transparent transition-all hover:shadow peer-checked:text-white peer-checked:ring-blue-400 peer-checked:ring-offset-2 peer-checked:bg-blue-400">
                                <div class="flex flex-col gap-1">

                                    <div class="flex justify-center items-center flex-col">
                                        <div class="flex">
                                            <span class="text-lg">£</span>
                                            <h1 class="py-1">50</h1>
                                        </div>
                                        <span class="text-xs">GBP</span>
                                    </div>
                                </div>
                            </div>
                        </label>


                        <label class="cursor-pointer">
                            <input @click="showOtherAmount=false" type="radio" value="100" class="peer sr-only" name="pricing" />
                            <div
                                class="w-32 max-w-xl rounded-md bg-white p-5 text-gray-600 ring-2 ring-transparent transition-all hover:shadow peer-checked:text-white peer-checked:ring-blue-400 peer-checked:ring-offset-2 peer-checked:bg-blue-400">
                                <div class="flex flex-col gap-1">

                                    <div class="flex justify-center items-center flex-col">
                                        <div class="flex">
                                            <span class="text-lg">£</span>
                                            <h1 class="py-1">100</h1>
                                        </div>
                                        <span class="text-xs">GBP</span>
                                    </div>
                                </div>
                            </div>
                        </label>

                        <label class="cursor-pointer ">
                            <input @click="showOtherAmount=true" type="radio" value=""class="peer sr-only" name="pricing" />
                            <div
                                class="w-32 max-w-xl rounded-md bg-white p-5 text-gray-600 ring-2 ring-transparent transition-all hover:shadow peer-checked:text-white peer-checked:ring-blue-400 peer-checked:ring-offset-2 peer-checked:bg-blue-400">
                                <div class="flex flex-col gap-1">

                                    <div class="flex justify-center items-center flex-col">
                                        <div class="flex">

                                            <h1 class="py-4 text-3xl">Other</h1>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </label>

                    </div>
                    <div class="my-3" >

                        <input x-show="showOtherAmount" type="text"  id="other" name="amount"
                            class="form_control py-5 text-2xl" placeholder="Enter your amount">
                    </div>

                    <div class="my-3 flex flex-col">
                        <label for="message">Leave a Message</label>
                        <textarea name="" id="message" cols="30" rows="7" class="form_control">

                                </textarea>
                    </div>

                    <div class="my-3 flex space-x-2">
                      <div class="">
                       
                      </div>
                       
                    </div>
                </form>
                {{ form.render}} 

#paypal controller

def donate(request ):

   
    host = request.get_host()

    # What you want the button to do.
    paypal_dict = {
        "business": settings.PAYPAL_RECEIVER_EMAIL,
        "item_name": "Donation",
        "amount": '100.00',
        "invoice": "unique-invoice-id",
        "currency_code": "GPB",
        "notify_url": f"http://{host}{reverse('paypal-ipn')}",
        "return": f"http://{host}{reverse('index')}",
        "cancel_return": f"http://{host}{reverse('index')}",
    }

    # Create the instance.
    form =PayPalPaymentsForm(initial=paypal_dict)
    context = {"form": form}
    return render(request, 'donations.html',context)

As you can see the amount is hard coded. i want it dynamic