Implements the Revolut Card Popup modal checkout. Activates when building a popup/modal payment flow, showing a card form in an overlay, or when user mentions card popup, modal checkout, popup payment, or overlay checkout.
How this skill is triggered — by the user, by Claude, or both
Slash command
/laravel-revolut-skill:revolut-card-popupThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Activate this skill when:
Activate this skill when:
Revolut Checkout (popup mode): https://developer.revolut.com/docs/sdks/merchant-web-sdk/revolut-checkout
The Card Popup opens a Revolut-hosted modal overlay for card entry. It is the simplest integration — one JS call opens the secure payment form over your page. Use payWithPopup() for the popup; use createCardField() for an inline form (see the revolut-card-field skill).
use Lartisan\Revolut\Facades\Revolut;
Route::post('/popup/order', function (Request $request) {
$order = Revolut::createOrder([
'amount' => $request->integer('amount'),
'currency' => 'USD',
'description' => 'Popup checkout',
'redirect_url' => route('checkout.success'),
'cancel_redirect_url' => route('checkout.cancel'),
]);
return response()->json(['public_id' => $order->public_id]);
});
<button id="open-checkout" type="button">Pay $29.99</button>
<p id="payment-status"></p>
<script src="https://merchant.revolut.com/embed.js"></script>
<script>
document.getElementById('open-checkout').addEventListener('click', async () => {
const btn = document.getElementById('open-checkout');
btn.disabled = true;
btn.textContent = 'Loading…';
try {
const { public_id } = await fetch('/popup/order', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
},
body: JSON.stringify({ amount: 2999 }),
}).then(r => r.json());
RevolutCheckout(public_id, 'sandbox').payWithPopup({
onSuccess() {
document.getElementById('payment-status').textContent = 'Payment successful!';
window.location.href = '/checkout/success';
},
onError(message) {
document.getElementById('payment-status').textContent = 'Error: ' + message;
btn.disabled = false;
btn.textContent = 'Pay $29.99';
},
onCancel() {
btn.disabled = false;
btn.textContent = 'Pay $29.99';
},
});
} catch (err) {
btn.disabled = false;
btn.textContent = 'Pay $29.99';
console.error(err);
}
});
</script>
Pre-fill customer information to speed up the checkout experience:
RevolutCheckout(public_id, 'sandbox').payWithPopup({
name: 'Jane Smith',
email: '[email protected]',
phone: '+14155550100',
locale: 'en', // BCP 47 language tag
savePaymentMethodFor: 'merchant', // saves card for future charges
onSuccess() { window.location.href = '/success'; },
onError(msg) { alert(msg); },
onCancel() { /* re-enable button */ },
});
{{-- Create order, pass $order->public_id to view --}}
<x-revolut::checkout
:public-id="$order->public_id"
button-text="Pay now"
button-class="btn btn-primary btn-lg"
/>
| Popup | Card Field | |
|---|---|---|
| UI location | Overlay over your page | Inline in your page |
| Styling control | Revolut-hosted, limited | Full CSS control |
| Setup complexity | Minimal | Moderate |
| Best for | Quick integration | Custom design systems |
public_id may expireonCancel — the button stays disabled if users close the popupcheckout_url as a fallback — it is a different redirect-based flow'sandbox' in RevolutCheckout(public_id, 'sandbox') — pass the environment from your backend so production uses 'prod' (see revolut-integration skill)npx claudepluginhub lartisan/laravel-revolut-skill --plugin laravel-revolut-skillCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.