Implements an embedded card input field via the Revolut Merchant Web SDK. Activates when building a custom card form, embedding card entry in your own UI, styling card inputs, or when user mentions card field, custom card form, embedded card input, or card tokenisation.
How this skill is triggered — by the user, by Claude, or both
Slash command
/laravel-revolut-skill:revolut-card-fieldThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Activate this skill when:
Activate this skill when:
Card Field: https://developer.revolut.com/docs/sdks/merchant-web-sdk/card-field
Card Field embeds Revolut's secure card input form (number, expiry, CVV) directly in your page. Unlike the popup, the form is mounted inline and styled by you. Card data is handled by Revolut's secure iframe — you never touch raw card numbers.
use Lartisan\Revolut\Facades\Revolut;
Route::post('/card-field/order', function (Request $request) {
$order = Revolut::createOrder([
'amount' => $request->integer('amount'),
'currency' => 'EUR',
'description' => 'Card payment',
'redirect_url' => route('checkout.success'),
'cancel_redirect_url' => route('checkout.cancel'),
]);
return response()->json(['public_id' => $order->public_id]);
});
<form id="card-form">
<div id="card-field"></div>
<button type="submit">Pay now</button>
</form>
<script src="https://merchant.revolut.com/embed.js"></script>
<script>
async function initCardField() {
const { public_id } = await fetch('/card-field/order', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
},
body: JSON.stringify({ amount: 1299 }),
}).then(r => r.json());
const instance = RevolutCheckout(public_id, 'sandbox');
const cardField = instance.createCardField({
target: document.getElementById('card-field'),
locale: 'en',
hidePostcodeField: false,
onSuccess() {
window.location.href = '/checkout/success';
},
onError(message) {
document.getElementById('error-msg').textContent = message;
},
onValidation(errors) {
// errors is an array of field validation messages
console.log('Validation:', errors);
},
});
document.getElementById('card-form').addEventListener('submit', (e) => {
e.preventDefault();
cardField.submit(); // Triggers payment
});
}
initCardField();
</script>
<p id="error-msg" style="color:red"></p>
const cardField = instance.createCardField({
target: document.getElementById('card-field'),
styles: {
default: {
color: '#1a1a1a',
fontSize: '16px',
fontFamily: 'Inter, sans-serif',
'::placeholder': { color: '#9ca3af' },
},
invalid: {
color: '#ef4444',
},
},
});
namespace App\Http\Controllers;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Request;
use Lartisan\Revolut\Facades\Revolut;
class CardFieldCheckoutController extends Controller
{
public function createOrder(Request $request): JsonResponse
{
$validated = $request->validate([
'amount' => ['required', 'integer', 'min:50'],
'currency' => ['required', 'string', 'size:3'],
]);
$order = Revolut::createOrder([
'amount' => $validated['amount'],
'currency' => $validated['currency'],
'description' => 'Checkout #'.uniqid(),
'redirect_url' => route('checkout.success'),
'cancel_redirect_url' => route('checkout.cancel'),
]);
return response()->json(['public_id' => $order->public_id]);
}
}
cardField.submit() vs payWithPopup()| Method | UI style | User experience |
|---|---|---|
createCardField() | Inline, fully styled by you | Card entry on your page |
payWithPopup() | Revolut-hosted overlay | Popup over your page |
Use createCardField() when you want full visual control.
cardField.submit() before the SDK has loaded — wait for onReady callbackonValidation — users won't know their card details are wrongstyles option insteadonError — silent failures confuse userspublic_id after an error — create a new order'sandbox' in RevolutCheckout(public_id, 'sandbox') — pass the environment from your backend to avoid real charges in production (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.