Το κουμπί αγοράς
Το κουμπί αγοράς είναι μερικές γραμμές HTML που επικολλάτε σε οποιαδήποτε σελίδα. Χωρίς framework, χωρίς βήμα εγκατάστασης από την πλευρά σας. Το κουμπί εμφανίζεται στο πρώτο rendering· ο επιλογέας παρόχου και τα SDK των παρόχων πληρωμών φορτώνονται κατ’ απαίτηση την πρώτη φορά που κάνει κλικ ένας αγοραστής. Λειτουργεί σε οποιονδήποτε ιστότοπο ή framework που αποδίδει HTML, συμπεριλαμβανομένων των δομητών ιστότοπων χωρίς κώδικα που σας επιτρέπουν να επικολλήσετε ενσωματώσεις HTML.
Επιβεβαιωμένη λειτουργία με: Angular, Hugo, Jekyll, απλό HTML, Webflow (ενσωμάτωση Custom Code), Carrd (στοιχείο Embed), Framer (ενσωμάτωση HTML), Squarespace (Code Block), WordPress (μπλοκ Custom HTML), Ghost, ιστότοποι Notion (widget ενσωμάτωσης HTML). Αν ο ιστότοπός σας σας επιτρέπει να επικολλήσετε HTML σε μια σελίδα, το κουμπί αγοράς λειτουργεί εκεί.
Αναφορά χαρακτηριστικών
| Χαρακτηριστικό | Απαιτείται | Τι δέχεται | Σημειώσεις |
|---|---|---|---|
endpoint | Όχι | Συμβολοσειρά URL | Σχεδόν πάντα παραλείψτε το. Το κουμπί εντοπίζει αυτόματα τη βάση API του: https://api.coinmoebius.com στην παραγωγή, http://localhost:8787 στο localhost. Ορίστε το μόνο ως υπερισχύουσα τιμή για μια ασυνήθιστη ρύθμιση (π.χ., έναν αυτο-φιλοξενούμενο proxy μπροστά από το API). |
project-id | Ναι | Συμβολοσειρά, με πρόθεμα proj_ | Από τη σελίδα έργου σας στον πίνακα ελέγχου. Ασφαλές να εκτεθεί δημόσια, είναι αναγνωριστικό, όχι διαπιστευτήριο. |
product-id | Ναι (σε αυστηρή λειτουργία) / Συνιστάται (σε λειτουργία ad-hoc) | Συμβολοσειρά, οποιαδήποτε μορφή επιλέξετε | Το εσωτερικό σας αναγνωριστικό προϊόντος. Σε αυστηρή λειτουργία (η προεπιλογή), έτσι αναζητά ο worker την τιμή από τον κατάλογό σας. Σε λειτουργία ad-hoc, εξακολουθεί να περνά στα webhook σας μέσα στο metadata.productId ώστε να μπορείτε να αντιστοιχίσετε συναλλαγές πίσω στο απόθεμά σας. Δείτε την ενότητα Αυστηρή λειτουργία έναντι λειτουργίας ad-hoc παρακάτω. |
amount | Μόνο σε λειτουργία ad-hoc | Δεκαδικός αριθμός ως συμβολοσειρά | Η τιμή σε κύριες μονάδες (π.χ., δολάρια, όχι σεντς). Πρέπει να είναι θετική. Παραλείψτε το σε αυστηρή λειτουργία. Ο worker διαβάζει την κανονική τιμή από τον κατάλογό σας και αγνοεί οποιαδήποτε τιμή στο HTML. Απαιτείται μόνο όταν το έργο είναι σε λειτουργία ad-hoc και το product-id δεν είναι στον κατάλογο. |
currency | Μόνο σε λειτουργία ad-hoc | Κωδικός ISO 4217 τριών γραμμάτων ή το δικό σας όνομα μονάδας | USD, EUR, κ.λπ. για κάρτες / τρόπους πληρωμής με κρυπτονομίσματα. Ο πάροχος πληρωμής ταχυδρομικώς δέχεται οποιαδήποτε συμβολοσειρά (π.χ., GBK) επειδή ο έμπορος είναι αυτός που διακανονίζει τη συναλλαγή. Ίδιος κανόνας με το amount: παραλείψτε σε αυστηρή λειτουργία, απαιτείται σε λειτουργία ad-hoc για προϊόντα που δεν είναι στον κατάλογο. |
label | Όχι | Συμβολοσειρά | Το κείμενο του κουμπιού. Προεπιλογή Buy. Χρησιμοποιήστε το για να ξεχωρίσετε κουμπιά στην ίδια σελίδα. |
customer-ref | Όχι | Συμβολοσειρά, οποιαδήποτε μορφή επιλέξετε | Ένα αδιαφανές αναγνωριστικό για τον αγοραστή στο δικό σας σύστημα, όπως ένα id συνδεδεμένου χρήστη. Το κουμπί το προωθεί στον worker ως metadata.customerRef, και ο worker επισημαίνει τη συναλλαγή με αυτό. Αργότερα μπορείτε να ρωτήσετε «ποιος από τους χρήστες μου πλήρωσε;» χρησιμοποιώντας το δικό σας id, χωρίς να κρατάμε εμείς πραγματικά δεδομένα πελάτη. Παραλείψτε για ανώνυμα checkout. |
buyer-email | No | Email address | Where to send a digital download. Set this when your site already knows the buyer, like a members area or a logged-in app, and the button will not ask them for an email. When it is not set, the button asks the buyer for one at checkout if the product is a download on a provider that does not return the email itself. We use the address only to send the download and then delete it. We never store it. |
theme | Όχι | dark ή light | Επιλέγει το ενσωματωμένο σχήμα χρωμάτων για το κουμπί και το αναδυόμενο παράθυρο μαζί. Προεπιλογή dark. Ορίστε theme="light" για το ανοιχτό σχήμα. Οι μεταβλητές CSS σας υπερισχύουν οποιουδήποτε από τα δύο. Δείτε τον οδηγό στυλ. |
editable-amount | Όχι | true ή false | Όταν είναι true, το αναδυόμενο παράθυρο δείχνει ένα πεδίο ποσού που συμπληρώνει ο αγοραστής (φιλοδωρήματα, δωρεές, πληρωμή-όσο-θέλεις). Προεπιλογή false, όπου το amount που ορίζετε είναι σταθερό και δεν εμφανίζεται κανένα πεδίο. Τα κουμπιά πληρωμής παραμένουν απενεργοποιημένα μέχρι το ποσό να είναι θετικός αριθμός. |
disabled | Όχι | Χαρακτηριστικό παρόν/απών, ή η ιδιότητα el.disabled | Το τυπικό συμβόλαιο κουμπιού: όσο υπάρχει, το κουμπί είναι σβησμένο και αγνοεί τα κλικ. Ορίστε το στο HTML σας ή αναστρέψτε την ιδιότητα από κώδικα όπως θα κάνατε σε ένα εγγενές κουμπί. Ξεχωριστά, το κουμπί κλειδώνει πάντα τον εαυτό του ενώ ένα κλικ επεξεργάζεται ώστε ένα διπλό κλικ να μην μπορεί να ξεκινήσει δύο checkouts· αυτό το εσωτερικό κλείδωμα ποτέ δεν αγγίζει μια τιμή που ορίσατε. |
spinner | Όχι | true ή false | Το ενσωματωμένο loading spinner που εμφανίζεται στο κουμπί ενώ ξεκινά το checkout. Ενεργοποιημένο από προεπιλογή. Ορίστε spinner="false" για να το απενεργοποιήσετε και να οδηγήσετε το δικό σας loading UI από τα συμβάντα cm-busy και cm-idle. Η απενεργοποίηση του spinner δεν απενεργοποιεί ποτέ την προστασία διπλού κλικ. Το spinner σχεδιάζει στο δικό σας χρώμα κειμένου του κουμπιού και το μέγεθος, οπότε ταιριάζει αυτόματα με το στυλ σας· αλλάξτε του το στυλ με ::part(spinner) ή αντικαταστήστε το εντελώς με <span slot="spinner">το δικό σας markup</span>. |
Μία μέθοδος πληρωμής; Χωρίς αναδυόμενο παράθυρο.
Όταν ένα προϊόν έχει ακριβώς μία μέθοδο πληρωμής ενεργοποιημένη και μια σταθερή τιμή, το κουμπί παραλείπει τον επιλογέα: ο αγοραστής κάνει κλικ και μετάβαση κατευθείαν στη ροή αυτής της μεθόδου. Τα φιλοξενούμενα checkouts πλοηγούνται αμέσως χωρίς αναδυόμενο παράθυρο καθόλου, ενώ η πληρωμή ταχυδρομικώς, τα νομίσματα σε σελίδα και το πρόσκλησης ηλεκτρονικού ταχυδρομείου ανοίγουν ακόμα το αναδυόμενο παράθυρο στο πρώτο βήμα τους. Τα προϊόντα με δύο ή περισσότερες μεθόδους και τα προϊόντα τιμής αγοραστή (φιλοδωρήματα, δωρεές) δείχνουν πάντα τον επιλογέα. Δεν υπάρχει τίποτα να διαμορφώσετε· το κουμπί αποφασίζει από τις δικές σας ρυθμίσεις προϊόντος, ανά προϊόν, οπότε ένα προϊόν δύο μεθόδων και ένα προϊόν μίας μεθόδου στην ίδια σελίδα κάνουν το σωστό. Αν ένα checkout αποτύχει στη άμεση διαδρομή, ένα σύντομο σφάλμα εμφανίζεται κάτω από το κουμπί (επιμορφώσιμο μέσω ::part(error)).
Πολλαπλά κουμπιά σε μία σελίδα
Το script καταχωρεί το κουμπί μία φορά, και μετά οποιοσδήποτε αριθμός στιγμιοτύπων μπορεί να εμφανιστεί σε μια σελίδα. Κάθε στιγμιότυπο είναι ανεξάρτητο. Το παρακάτω παράδειγμα χρησιμοποιεί αυστηρή λειτουργία (την προεπιλογή): χωρίς amount ή currency στο HTML, επειδή ο worker αναζητά την τιμή κάθε προϊόντος από τον κατάλογό σας.
<coin-moebius-buy
project-id="proj_YOUR_ID"
product-id="t-shirt-medium"
label="T-shirt (medium)">
</coin-moebius-buy>
<coin-moebius-buy
project-id="proj_YOUR_ID"
product-id="mug-blue"
label="Blue mug">
</coin-moebius-buy>Αν το έργο σας είναι σε λειτουργία ad-hoc (widget δωρεών, κουτιά φιλοδωρημάτων), κάθε κουμπί περιλαμβάνει επίσης amount και currency. Δείτε Αυστηρή λειτουργία έναντι λειτουργίας ad-hoc για τη συνολική εικόνα.
Προσαρμογή του κουμπιού
Το κουμπί αγοράς εμφανίζεται μέσα σε ένα Shadow DOM, που σημαίνει ότι κανένα από το υπάρχον CSS της σελίδας σας δεν φτάνει μέσα του. Αυτό είναι σκόπιμο: κρατά το κουμπί να φαίνεται ίδιο σε κάθε ιστότοπο, και σταματά έναν αδέσποτο κανόνα * { box-sizing: ... } από το να σπάσει το modal του επιλογέα. Το προσαρμόζετε μέσα από δύο επιφάνειες από το δικό σας φύλλο στυλ: προσαρμοσμένες ιδιότητες CSS για χρώματα, γραμματοσειρές και σχήμα, και επιλογείς ::part() για όλα τα υπόλοιπα. Χωρίς JavaScript.
Κάθε μεταβλητή και part τεκμηριώνεται στον οδηγό στυλ, με ζωντανά παραδείγματα που μπορείτε να κάνετε κλικ και να αντιγράψετε:
Ανοίξτε τον διαδραστικό οδηγό στυλ →
Οι URL επιτυχίας και ακύρωσης
Όταν συνδέετε το Stripe ή το NOWPayments στην καρτέλα Πάροχοι του πίνακα ελέγχου, ορίζετε δύο URL:
- URL επιτυχίας, όπου καταλήγει ο αγοραστής μετά από μια επιτυχημένη πληρωμή. Το Stripe και το NOWPayments προσαρτούν μια παράμετρο ερωτήματος (
?session_id=...για Stripe,?NP_id=...για NOWPayments) ώστε η σελίδα επιτυχίας σας να μπορεί να ταυτοποιήσει ποια συναλλαγή ολοκληρώθηκε. Οι περισσότεροι στατικοί ιστότοποι απλώς δείχνουν ένα γενικό μήνυμα «Ευχαριστούμε, η πληρωμή σας υποβάλλεται σε επεξεργασία» και βασίζονται στον πίνακα ελέγχου ως πηγή αλήθειας. - URL ακύρωσης, όπου καταλήγει ο αγοραστής αν αποχωρήσει πριν πληρώσει. Συχνά είναι ίδια με τη σελίδα καλαθιού σας.
Και οι δύο URL διαμορφώνονται ανά πάροχο στον πίνακα ελέγχου, το στοιχείο δεν χρειάζεται να γνωρίζει γι’ αυτές.