Το κουμπί αγοράς και το αναδυόμενο πληρωμής που ανοίγει παίρνουν και τα δύο τα χρώματα, τις γραμματοσειρές, και το σχήμα σας. Ορίζετε μερικές μεταβλητές CSS· και τα δύο ακολουθούν μαζί. Όλα παρακάτω είναι ένα λειτουργικό παράδειγμα που μπορείτε να κάνετε κλικ, με τον ακριβή κώδικα που το παρήγαγε ακριβώς δίπλα του.
Κανένα από αυτά δεν είναι προκαθορισμένο θέμα. Κάθε εμφάνιση είναι φτιαγμένη από το απλό CSS που φαίνεται δίπλα της. Αντιγράψτε οποιοδήποτε ως αφετηρία και αλλάξτε ό,τι θέλετε.
Αυτά είναι ζωντανά κουμπιά με εικονικούς παρόχους και έναν ψεύτικο κωδικό αναφοράς. Δεν λαμβάνεται καμία πληρωμή. Κάντε κλικ σε ένα κουμπί για να ανοίξετε το αναδυόμενό του, μετά διαβάστε τον κώδικα που το διαμόρφωσε.
Χωρίς CSS, χωρίς χαρακτηριστικά. Το κουμπί και το αναδυόμενό του μοιράζονται ένα ουδέτερο ανθρακί από προεπιλογή. Αυτό είναι theme="dark", η προεπιλογή, οπότε το να το γράψετε ρητά δεν αλλάζει τίποτα.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="ebook"
amount="29"
currency="USD">
Buy now
</coin-moebius-buy>Προσθέστε theme="light" και τόσο το κουμπί όσο και το αναδυόμενο γίνονται ένα απαλό υπόλευκο. Ένα χαρακτηριστικό, χωρίς CSS.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="membership"
amount="99"
currency="USD"
theme="light">
Get access
</coin-moebius-buy>Καθένα από αυτά είναι απλώς το CSS που φαίνεται δίπλα του, τίποτα παραπάνω. Πάρτε οποιοδήποτε, επικολλήστε το στο δικό σας stylesheet, και αλλάξτε τις τιμές. Αναμίξτε τα όπως θέλετε.
Ένα κουμπί indigo με ένα ταιριαστό indigo αναδυόμενο, οριζόμενο με μια χούφτα μεταβλητές CSS. Αλλάξτε οποιαδήποτε τιμή για να το ξαναχρωματίσετε.
coin-moebius-buy {
/* the button */
--cm-button-bg: #4f46e5;
--cm-button-color: #fff;
--cm-button-radius: 9999px;
--cm-font: Georgia, serif;
/* the popup, styled to match */
--cm-modal-bg: #1e1b4b;
--cm-color: #e0e7ff;
--cm-modal-overlay: rgba(30, 27, 75, 0.6);
}
coin-moebius-buy::part(dialog) {
border-radius: 18px;
}
coin-moebius-buy::part(provider) {
border-radius: 9999px;
}Μαύρο φόντο, πράσινο κείμενο monospace, τετράγωνες γωνίες. Το αναδυόμενο ακολουθεί την ίδια εμφάνιση. Κάθε τιμή εδώ είναι δική σας να την αλλάξετε.
coin-moebius-buy {
/* the button */
--cm-button-bg: #001b00;
--cm-button-color: #39ff14;
--cm-button-radius: 0;
--cm-font: 'Courier New', monospace;
/* the popup, styled to match */
--cm-modal-bg: #000;
--cm-color: #39ff14;
--cm-modal-overlay: rgba(0, 20, 0, 0.8);
}
coin-moebius-buy::part(dialog) {
border: 1px solid #39ff14;
border-radius: 0;
}
coin-moebius-buy::part(provider) {
border-radius: 0;
}Ένα ζεστό ροζ κουμπί με ένα απαλό ροζ αναδυόμενο να ταιριάζει. Στρογγυλέψτε τις γωνίες περισσότερο ή λιγότερο επεξεργαζόμενοι έναν αριθμό.
coin-moebius-buy {
/* the button */
--cm-button-bg: #ec4899;
--cm-button-color: #fff;
--cm-button-radius: 14px;
/* the popup, styled to match */
--cm-modal-bg: #fff1f7;
--cm-color: #831843;
--cm-modal-overlay: rgba(131, 24, 67, 0.35);
}
coin-moebius-buy::part(dialog) {
border-radius: 18px;
}
coin-moebius-buy::part(provider) {
border-radius: 12px;
}Μια όψη κουμπιού με διαβάθμιση, με το αναδυόμενο βαμμένο ώστε να ταιριάζει. Βάψτε την όψη του κουμπιού όπως θέλετε.
coin-moebius-buy::part(button) {
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
border: none;
border-radius: 10px;
padding: 0.8rem 2rem;
font-weight: 700;
}
coin-moebius-buy {
/* the popup, picking up the gradient's colors */
--cm-modal-bg: #f5f3ff;
--cm-color: #4c1d95;
--cm-modal-overlay: rgba(76, 29, 149, 0.45);
}
coin-moebius-buy::part(dialog) {
border-radius: 14px;
border-top: 4px solid #764ba2;
}Ένα λεπτό περίγραμμα, ξεθωριασμένο κείμενο, και ένα καθαρό λευκό αναδυόμενο. Απογυμνώστε το μέχρι να είναι όσο απλό θέλετε.
coin-moebius-buy {
/* the button */
--cm-button-bg: transparent;
--cm-button-color: #374151;
--cm-button-radius: 6px;
/* the popup, styled to match */
--cm-modal-bg: #fff;
--cm-color: #374151;
--cm-modal-overlay: rgba(17, 24, 39, 0.25);
}
coin-moebius-buy::part(button) {
border: 1px solid #d1d5db;
}
coin-moebius-buy::part(dialog) {
border-radius: 8px;
border: 1px solid #e5e7eb;
}Τα παραπάνω παραδείγματα κάθονται σε κενό φόντο. Εδώ είναι σε μια σελίδα αντί γι αυτό, τοποθετημένο μέσα σε μια κάρτα, με το επεξεργάσιμο ποσό ενεργό ώστε ο αγοραστής να επιλέγει τι θα δώσει. Κάντε κλικ και δοκιμάστε.
Αφήστε ένα φιλοδώρημα. Κρατάει τα φώτα αναμμένα και τις αναρτήσεις να έρχονται.
coin-moebius-buy {
/* the button */
--cm-button-bg: #b45309;
--cm-button-color: #fff;
--cm-button-radius: 8px;
--cm-font: Georgia, serif;
/* the popup, styled to match */
--cm-modal-bg: #fffaf3;
--cm-color: #7c4a02;
--cm-modal-overlay: rgba(124, 74, 2, 0.4);
}
coin-moebius-buy::part(dialog) {
border-radius: 14px;
}Προσθέστε editable-amount="true" και το αναδυόμενο δείχνει ένα πεδίο ποσού που συμπληρώνει ο αγοραστής, για φιλοδωρήματα, δωρεές, ή πλήρωσε-όσο-θες. Αφήστε το ανενεργό, που είναι η προεπιλογή, και το amount που ορίζετε είναι σταθερό και δεν εμφανίζεται πεδίο. Σε κάθε περίπτωση τα κουμπιά πληρωμής μένουν απενεργοποιημένα μέχρι το ποσό να είναι θετικός αριθμός, ώστε ο αγοραστής να μην μπορεί να κάνει checkout για το τίποτα.
Κάθε επιφάνεια που μπορείτε να διαμορφώσετε. Ορίστε τις μεταβλητές στο κουμπί· φτάστε τα υπόλοιπα με το ::part().
Ορίστε αυτές στο στοιχείο coin-moebius-buy (ή σε οποιονδήποτε πρόγονό του, αφού οι προσαρμοσμένες ιδιότητες κληρονομούνται):
| Ιδιότητα | Προεπιλογή | Τι ελέγχει |
|---|---|---|
--cm-font | system-ui, -apple-system, BlinkMacSystemFont, sans-serif | Οικογένεια γραμματοσειράς για την ετικέτα του κουμπιού και κάθε στοιχείο κειμένου μέσα στο modal του επιλογέα. |
--cm-color | #ededed (#1f1f1f με theme="light") | Χρώμα κειμένου για το αναδυόμενο παράθυρο και τις οδηγίες του. |
--cm-button-bg | #2b2b2b (#f5f5f5 με theme="light") | Χρώμα φόντου του κουμπιού. Από προεπιλογή ταιριάζει με την επιφάνεια του αναδυόμενου παραθύρου. |
--cm-button-color | #ededed (#1f1f1f με theme="light") | Χρώμα κειμένου του κουμπιού. |
--cm-button-radius | 6px | Ακτίνα γωνίας του κουμπιού. Χρησιμοποιήστε 999px για χάπι, 0 για τετράγωνο. |
--cm-modal-bg | #2b2b2b (#f5f5f5 με theme="light") | Φόντο του αναδυόμενου παραθύρου του επιλογέα. |
--cm-modal-overlay | rgba(0, 0, 0, 0.45) | Απόχρωση φόντου πίσω από το modal του επιλογέα. |
Για οτιδήποτε πέρα από τις παραπάνω μεταβλητές, στοχεύστε τα ονομασμένα parts του στοιχείου από το CSS της σελίδας σας. Το κουμπί εκθέτει οκτώ:
| Part | Στοιχείο |
|---|---|
button | Το ίδιο το κουμπί αγοράς. |
modal | Ο περιέκτης επικάλυψης πλήρους viewport πίσω από τον επιλογέα. |
dialog | Το κεντραρισμένο κουτί modal του επιλογέα. |
provider | Κάθε επιλογή παρόχου πληρωμής μέσα στον επιλογέα. |
provider-icon | Το μικρό εικονίδιο δίπλα στο όνομα ενός παρόχου. |
provider-name | Το κείμενο του ονόματος του παρόχου. |
close | Το κουμπί «Ακύρωση» στο κάτω μέρος του επιλογέα. |
instructions | Ο πίνακας οδηγιών που εμφανίζεται για την πληρωμή ταχυδρομικώς (η ταχυδρομική διεύθυνση + ο κωδικός αναφοράς). |
Το αναδυόμενο παράθυρο είναι σκούρο από προεπιλογή. Για ανοιχτό αναδυόμενο παράθυρο, προσθέστε theme="light" στο στοιχείο. Αυτή είναι όλη η αλλαγή, και δεν ακολουθεί τη ρύθμιση της συσκευής του επισκέπτη, οπότε ό,τι επιλέξετε είναι αυτό που βλέπει κάθε αγοραστής. Θέλετε κάτι συγκεκριμένο; Ορίστε οποιαδήποτε από τις παραπάνω μεταβλητές πάνω σε οποιοδήποτε θέμα και οι τιμές σας κερδίζουν.
Μερικά πράγματα είναι σκόπιμα σταθερά στην v1: οι μεταβάσεις hover των 120ms, το z-index του modal και το μεγαλύτερο μέρος του spacing/padding μέσα στον επιλογέα. Αν μια ανάγκη επωνυμίας πέσει σε ένα από αυτά, η λύση είναι ο ίδιος επιλογέας ::part() με μια υπερισχύουσα τιμή !important· η καθαρότερη λύση είναι να μας ζητήσετε να προσθέσουμε μια μεταβλητή CSS για αυτό. Το issue tracker του SDK είναι το σωστό μέρος για αυτό.
Επιλέξτε ποιες μέθοδοι εμφανίζονται στο αναδυόμενο, μετονομάστε τες, και ορίστε τη σειρά τους για κάθε προϊόν από τον πίνακα ελέγχου σας. Μια συνδρομή μπορεί να παραλείπει την πληρωμή ταχυδρομικά ενώ ένα αρχείο λήψης την κρατάει.
Αντιγράψτε οποιοδήποτε παράδειγμα στο stylesheet σας και αρχίστε να δέχεστε πληρωμές. Δωρεάν για ξεκίνημα, χωρίς κάρτα.