Το κουμπί αγοράς
Το κουμπί αγοράς είναι μερικές γραμμές 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. |
theme | Όχι | dark ή light | Επιλέγει το ενσωματωμένο σχήμα χρωμάτων για το κουμπί και το αναδυόμενο παράθυρο μαζί. Προεπιλογή dark. Ορίστε theme="light" για το ανοιχτό σχήμα. Οι μεταβλητές CSS σας υπερισχύουν οποιουδήποτε από τα δύο. Δείτε τον οδηγό στυλ. |
editable-amount | Όχι | true ή false | Όταν είναι true, το αναδυόμενο παράθυρο δείχνει ένα πεδίο ποσού που συμπληρώνει ο αγοραστής (φιλοδωρήματα, δωρεές, πληρωμή-όσο-θέλεις). Προεπιλογή false, όπου το amount που ορίζετε είναι σταθερό και δεν εμφανίζεται κανένα πεδίο. Τα κουμπιά πληρωμής παραμένουν απενεργοποιημένα μέχρι το ποσό να είναι θετικός αριθμός. |
Πολλαπλά κουμπιά σε μία σελίδα
Το 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 διαμορφώνονται ανά πάροχο στον πίνακα ελέγχου, το στοιχείο δεν χρειάζεται να γνωρίζει γι’ αυτές.