Fase 3 (isla reutilizable): servicios de personaje de pago; aplica a rename

Componente genérico CharacterPurchaseForm (selector de personaje + botón con precio)
+ entry character_purchase, configurable por data-* en la plantilla. Al enviar, la
vista devuelve {session_id, stripe_public_key} y se redirige al Checkout de Stripe
(helper stripe.ts que carga Stripe.js). Reutilizable por rename/customize/race/
faction/level/gold/transfer... cambiando solo los data-* y la lista de personajes
(json_script). Primer uso: rename_character.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-12 21:33:14 +00:00
parent b1107c0a54
commit 2258df4b09
5 changed files with 193 additions and 22 deletions
+11 -22
View File
@@ -16,28 +16,17 @@
<p>Se puede repetir la acción en un mismo las veces que quieras.</p>
</div>
</fieldset>
<script src="{{ URL_PRINCIPAL }}/static/nw-themes/nw-ryu/nw-js-handlers/rename_response.js"></script>
<script src="https://js.stripe.com/v3/"></script>
<form id="nw-rename-form" div class="centered">
<br>
<br>
<p>Escoge el personaje que quieres desbloquear</p>
<br>
<form action="" id="nw-unstuck-form" method="POST" accept-charset="utf-8">
<select name="character">
<option value="" selected disabled>Seleccione un personaje</option>
{% for character in characters %}
<option class="priest big-font" value="{{ character }}">{{ character }}</option>
{% endfor %}
</select>
<br>
<button class="rename-button" type="submit" name="rename-button" data-id="Renombrar">Renombrar por {{ price }} €</button>
</form>
<br>
<hr>
<center><div class="alert-message" id="rename-response"></div></center>
<br>
</div>
{% load django_vite %}
<!-- Isla React (Vite): servicio de pago de personaje (genérico).
POST -> session_id de Stripe -> Checkout. -->
<div id="character-purchase-app"
data-csrf="{{ csrf_token }}"
data-url="{% url 'rename-character' %}"
data-price="{{ price }}"
data-label="Renombrar"
data-button-class="rename-button"></div>
{{ characters|json_script:"character-purchase-data" }}
{% vite_asset 'src/entries/character_purchase.tsx' %}
</div>
</div>
</div>