Skip to content

Commit 80a87ff

Browse files
hegedustiborhegedustibor
committed
Add publishable SimplePay logo assets
1 parent 3439f0c commit 80a87ff

73 files changed

Lines changed: 14624 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -411,6 +411,30 @@ SIMPLEPAY_USD_MERCHANT=your_usd_merchant_id
411411
SIMPLEPAY_USD_SECRET_KEY=your_usd_secret_key
412412
```
413413

414+
## Logos and Assets
415+
416+
The package includes the official SimplePay merchant logo pack. Publish the assets:
417+
418+
```bash
419+
php artisan vendor:publish --tag=simplepay-assets
420+
```
421+
422+
This copies logos and pre-composed variations to `public/vendor/simplepay/`.
423+
424+
Usage in Blade, Vue.js, or React:
425+
426+
```blade
427+
{{-- Blade --}}
428+
<img src="{{ asset('vendor/simplepay/logos/simplepay_200x50.png') }}" alt="SimplePay">
429+
```
430+
431+
```vue
432+
<!-- Vue.js / React (Inertia.js) -->
433+
<img src="/vendor/simplepay/logos/simplepay_200x50.png" alt="SimplePay" />
434+
```
435+
436+
Available logos: SimplePay (multiple sizes/orientations + white variants), Visa, Mastercard, Maestro, Amex, Apple Pay, Google Pay, Qvik, OTP SZÉP. Pre-composed card type combinations are also included. See [examples](examples/en/logos-and-assets.md) for Blade, Vue.js, and React checkout page examples.
437+
414438
## Logging
415439

416440
Set `SIMPLEPAY_LOG_CHANNEL` to any Laravel log channel name. Example dedicated channel in `config/logging.php`:

‎examples/en/logos-and-assets.md‎

Lines changed: 284 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,284 @@
1+
# Logos and Assets
2+
3+
The `netipar/simplepay` package includes the official SimplePay merchant logo pack, which can be published to your Laravel application.
4+
5+
## Publishing Assets
6+
7+
```bash
8+
php artisan vendor:publish --tag=simplepay-assets
9+
```
10+
11+
This copies all logos and variations to `public/vendor/simplepay/`.
12+
13+
## Directory Structure
14+
15+
```
16+
public/vendor/simplepay/
17+
├── logos/ # Individual logos
18+
│ ├── simplepay_200x50.png # SimplePay main logo (200x50)
19+
│ ├── simplepay_w140.png # SimplePay 140px wide
20+
│ ├── simplepay_w240.png # SimplePay 240px wide
21+
│ ├── simplepay_w360.png # SimplePay 360px wide
22+
│ ├── simplepay_horizontal_01.png # Horizontal logo v1
23+
│ ├── simplepay_horizontal_02.png # Horizontal logo v2
24+
│ ├── simplepay_vertical.png # Vertical logo
25+
│ ├── simplepay_top.png # Top-placed logo
26+
│ ├── simplepay_*-white.png # White variants (for dark backgrounds)
27+
│ ├── visa_logo_color.png # Visa (color)
28+
│ ├── visa_logo_bw.png # Visa (black & white)
29+
│ ├── mastercard_logo_color_new.png
30+
│ ├── mastercard_logo_bw_new.png
31+
│ ├── maestro_logo_color_new.png
32+
│ ├── maestro_logo_bw_new.png
33+
│ ├── amex_logo_color.png
34+
│ ├── amex_logo_bw.png
35+
│ ├── Apple_Pay_Mark_RGB.png
36+
│ ├── GPay_logo_color_new.png
37+
│ ├── qvik_logo_color.png
38+
│ └── OTPszepkartya_logo_color.png
39+
└── variaciok/ # Pre-composed logo combinations
40+
├── SimplePay_Logo+MC-Maestro-Visa/
41+
├── SimplePay_Logo+Qvik/
42+
├── SimplePay_Logo+SZEP/
43+
├── SimplePay_Logo_with_Amex/
44+
├── SimplePay_Logo_with_Amex+Qvik/
45+
├── SimplePay_Logo_wo_Amex/
46+
├── SimplePay_Logo_wo_Amex+Qvik/
47+
├── SimplePay_Logo_kartyak_wo_Amex/
48+
└── SimplePay_Logo-kartyak_with_Amex/
49+
```
50+
51+
## Usage in Blade Templates
52+
53+
### Simple SimplePay Logo
54+
55+
```blade
56+
<img src="{{ asset('vendor/simplepay/logos/simplepay_200x50.png') }}" alt="SimplePay">
57+
```
58+
59+
### Accepted Card Types
60+
61+
```blade
62+
<div class="flex items-center gap-3">
63+
<img src="{{ asset('vendor/simplepay/logos/simplepay_200x50.png') }}" alt="SimplePay" class="h-8">
64+
<span class="text-gray-400">|</span>
65+
<img src="{{ asset('vendor/simplepay/logos/visa_logo_color.png') }}" alt="Visa" class="h-6">
66+
<img src="{{ asset('vendor/simplepay/logos/mastercard_logo_color_new.png') }}" alt="Mastercard" class="h-6">
67+
<img src="{{ asset('vendor/simplepay/logos/maestro_logo_color_new.png') }}" alt="Maestro" class="h-6">
68+
</div>
69+
```
70+
71+
### With Amex
72+
73+
```blade
74+
<div class="flex items-center gap-3">
75+
<img src="{{ asset('vendor/simplepay/logos/simplepay_200x50.png') }}" alt="SimplePay" class="h-8">
76+
<span class="text-gray-400">|</span>
77+
<img src="{{ asset('vendor/simplepay/logos/visa_logo_color.png') }}" alt="Visa" class="h-6">
78+
<img src="{{ asset('vendor/simplepay/logos/mastercard_logo_color_new.png') }}" alt="Mastercard" class="h-6">
79+
<img src="{{ asset('vendor/simplepay/logos/amex_logo_color.png') }}" alt="American Express" class="h-6">
80+
</div>
81+
```
82+
83+
### Apple Pay and Google Pay
84+
85+
```blade
86+
<div class="flex items-center gap-3">
87+
<img src="{{ asset('vendor/simplepay/logos/Apple_Pay_Mark_RGB.png') }}" alt="Apple Pay" class="h-8">
88+
<img src="{{ asset('vendor/simplepay/logos/GPay_logo_color_new.png') }}" alt="Google Pay" class="h-8">
89+
</div>
90+
```
91+
92+
### Pre-composed Variations
93+
94+
Use pre-composed logo combinations instead of managing individual card logos:
95+
96+
```blade
97+
{{-- SimplePay + bank cards (without Amex) --}}
98+
<img
99+
src="{{ asset('vendor/simplepay/variaciok/SimplePay_Logo_wo_Amex/simplepay_bankcard_logos_left-hu.png') }}"
100+
alt="SimplePay - Card payment"
101+
class="h-12"
102+
>
103+
104+
{{-- SimplePay + bank cards (with Amex) --}}
105+
<img
106+
src="{{ asset('vendor/simplepay/variaciok/SimplePay_Logo_with_Amex/simplepay_bankcard_logos_left-hu.png') }}"
107+
alt="SimplePay - Card payment"
108+
class="h-12"
109+
>
110+
111+
{{-- SimplePay + Qvik --}}
112+
<img
113+
src="{{ asset('vendor/simplepay/variaciok/SimplePay_Logo+Qvik/simplepay_bankcard_logos_left_new.png') }}"
114+
alt="SimplePay - Qvik payment"
115+
class="h-12"
116+
>
117+
```
118+
119+
### Checkout Page -- Blade
120+
121+
```blade
122+
<div class="border rounded-lg p-6">
123+
<h3 class="text-lg font-semibold mb-4">Payment method</h3>
124+
125+
<label class="flex items-center gap-4 p-4 border rounded-lg cursor-pointer hover:bg-gray-50">
126+
<input type="radio" name="payment_method" value="simplepay" checked>
127+
<div class="flex items-center gap-3">
128+
<img src="{{ asset('vendor/simplepay/logos/simplepay_200x50.png') }}" alt="SimplePay" class="h-8">
129+
<div class="flex items-center gap-2">
130+
<img src="{{ asset('vendor/simplepay/logos/visa_logo_color.png') }}" alt="Visa" class="h-5">
131+
<img src="{{ asset('vendor/simplepay/logos/mastercard_logo_color_new.png') }}" alt="Mastercard" class="h-5">
132+
<img src="{{ asset('vendor/simplepay/logos/maestro_logo_color_new.png') }}" alt="Maestro" class="h-5">
133+
</div>
134+
</div>
135+
</label>
136+
137+
<button type="submit" class="mt-4 w-full bg-green-600 text-white py-3 rounded-lg font-semibold">
138+
Pay now
139+
</button>
140+
141+
<p class="mt-3 text-xs text-gray-500 text-center">
142+
Secured by
143+
<img src="{{ asset('vendor/simplepay/logos/simplepay_w140.png') }}" alt="SimplePay" class="inline h-4">
144+
</p>
145+
</div>
146+
```
147+
148+
## Usage in Vue.js (Inertia.js)
149+
150+
Published assets are in the `public/` directory, so they can be referenced directly:
151+
152+
### Simple Logo
153+
154+
```vue
155+
<template>
156+
<img src="/vendor/simplepay/logos/simplepay_200x50.png" alt="SimplePay" />
157+
</template>
158+
```
159+
160+
### Accepted Card Types
161+
162+
```vue
163+
<template>
164+
<div class="flex items-center gap-3">
165+
<img src="/vendor/simplepay/logos/simplepay_200x50.png" alt="SimplePay" class="h-8" />
166+
<span class="text-gray-400">|</span>
167+
<img src="/vendor/simplepay/logos/visa_logo_color.png" alt="Visa" class="h-6" />
168+
<img src="/vendor/simplepay/logos/mastercard_logo_color_new.png" alt="Mastercard" class="h-6" />
169+
<img src="/vendor/simplepay/logos/maestro_logo_color_new.png" alt="Maestro" class="h-6" />
170+
</div>
171+
</template>
172+
```
173+
174+
### Checkout Page -- Vue.js
175+
176+
```vue
177+
<script setup>
178+
import { useForm } from '@inertiajs/vue3';
179+
180+
const form = useForm({
181+
payment_method: 'simplepay',
182+
});
183+
</script>
184+
185+
<template>
186+
<form @submit.prevent="form.post(route('checkout.store'))">
187+
<div class="border rounded-lg p-6">
188+
<h3 class="text-lg font-semibold mb-4">Payment method</h3>
189+
190+
<label class="flex items-center gap-4 p-4 border rounded-lg cursor-pointer hover:bg-gray-50">
191+
<input v-model="form.payment_method" type="radio" value="simplepay" />
192+
<div class="flex items-center gap-3">
193+
<img src="/vendor/simplepay/logos/simplepay_200x50.png" alt="SimplePay" class="h-8" />
194+
<div class="flex items-center gap-2">
195+
<img src="/vendor/simplepay/logos/visa_logo_color.png" alt="Visa" class="h-5" />
196+
<img src="/vendor/simplepay/logos/mastercard_logo_color_new.png" alt="Mastercard" class="h-5" />
197+
<img src="/vendor/simplepay/logos/maestro_logo_color_new.png" alt="Maestro" class="h-5" />
198+
</div>
199+
</div>
200+
</label>
201+
202+
<button
203+
type="submit"
204+
class="mt-4 w-full bg-green-600 text-white py-3 rounded-lg font-semibold"
205+
:disabled="form.processing"
206+
>
207+
Pay now
208+
</button>
209+
210+
<p class="mt-3 text-xs text-gray-500 text-center">
211+
Secured by
212+
<img src="/vendor/simplepay/logos/simplepay_w140.png" alt="SimplePay" class="inline h-4" />
213+
</p>
214+
</div>
215+
</form>
216+
</template>
217+
```
218+
219+
## Usage in React (Inertia.js)
220+
221+
### Simple Logo
222+
223+
```jsx
224+
export default function SimplePayLogo() {
225+
return (
226+
<img src="/vendor/simplepay/logos/simplepay_200x50.png" alt="SimplePay" />
227+
);
228+
}
229+
```
230+
231+
### Checkout Page -- React
232+
233+
```jsx
234+
import { useForm } from '@inertiajs/react';
235+
236+
export default function Checkout() {
237+
const { data, setData, post, processing } = useForm({
238+
payment_method: 'simplepay',
239+
});
240+
241+
const submit = (e) => {
242+
e.preventDefault();
243+
post(route('checkout.store'));
244+
};
245+
246+
return (
247+
<form onSubmit={submit}>
248+
<div className="border rounded-lg p-6">
249+
<h3 className="text-lg font-semibold mb-4">Payment method</h3>
250+
251+
<label className="flex items-center gap-4 p-4 border rounded-lg cursor-pointer hover:bg-gray-50">
252+
<input
253+
type="radio"
254+
value="simplepay"
255+
checked={data.payment_method === 'simplepay'}
256+
onChange={(e) => setData('payment_method', e.target.value)}
257+
/>
258+
<div className="flex items-center gap-3">
259+
<img src="/vendor/simplepay/logos/simplepay_200x50.png" alt="SimplePay" className="h-8" />
260+
<div className="flex items-center gap-2">
261+
<img src="/vendor/simplepay/logos/visa_logo_color.png" alt="Visa" className="h-5" />
262+
<img src="/vendor/simplepay/logos/mastercard_logo_color_new.png" alt="Mastercard" className="h-5" />
263+
<img src="/vendor/simplepay/logos/maestro_logo_color_new.png" alt="Maestro" className="h-5" />
264+
</div>
265+
</div>
266+
</label>
267+
268+
<button
269+
type="submit"
270+
className="mt-4 w-full bg-green-600 text-white py-3 rounded-lg font-semibold"
271+
disabled={processing}
272+
>
273+
Pay now
274+
</button>
275+
276+
<p className="mt-3 text-xs text-gray-500 text-center">
277+
Secured by{' '}
278+
<img src="/vendor/simplepay/logos/simplepay_w140.png" alt="SimplePay" className="inline h-4" />
279+
</p>
280+
</div>
281+
</form>
282+
);
283+
}
284+
```

0 commit comments

Comments
 (0)