- Projek React sedia ada
- Akses Stripe Test Mode
- Backend diperlukan untuk pembayaran selamat
Akses repositori tidak diperlukan. Akses projek hanya perlu jika anda mahu Bacodo mengintegrasikannya secara langsung.
React add-on
Penyepaduan Stripe untuk React
Tambahkan Stripe.js, Elemen Pembayaran dan pembayaran rahsia pelanggan pada React SPA sedia ada anda tanpa membina Elemen, 3-D Secure dan kesilapan kunci rahsia dari awal. React tidak mengehoskan webhook — API anda melakukannya.
- Kod sumber penuh disertakan & milik anda secara kekal
- Tiada kunci lesen tambahan atau lesen berulang diperlukan
- Sedia pengeluaran dan diuji
- Disepadukan ke dalam projek dan timbunan React sedia ada anda
- Sokongan teknikal selepas penyerahan 30 hari disertakan
- Sokongan Teknikal Lanjutan 6 bulan pilihan pada 20% daripada harga Add-on
Dari
$145
USD · React
Penyepaduan Stripe untuk React · React
Kod Sumber PenuhTiada Kunci LesenSedia PengeluaranIntegrasi yang DiujiSokongan 30 Hari
Requirements
What Penyepaduan Stripe untuk React needs
Apa yang dilakukan
Elemen Jalur dalam React SPA anda — API masih memiliki rahsia
Bacodo menyepadukan Stripe ke dalam projek React yang telah anda miliki (Vite, CRA, atau serupa). Selepas penyerahan, sumber React hidup dalam repo anda. Kunci rahsia dan webhook kekal pada bahagian belakang yang telah anda jalankan. Anda masih memiliki akaun Stripe dan yuran Stripe.
Masalah ia selesaikan
React SPA tidak boleh membuat PaymentIntents atau mengesahkan webhooks dengan selamat. Ia memerlukan Stripe.js, Elemen atau Checkout dan bahagian belakang yang mengembalikan rahsia pelanggan. Bangunan yang membahagi salah menghantar kunci rahsia dalam berkas.
Bagaimana ia mendarat dalam projek
Kami menambah @stripe/react-stripe-js, skrin daftar keluar dalam pepohon React anda dan panggilan pengambilan API sedia ada anda sudah pun diperlukan untuk PaymentIntents. Pengesahan Webhook disambungkan pada API itu, bukan di dalam React.
Mengapa ia menjimatkan masa pembangunan
Pasukan anda melangkau pelaksanaan Stripe React pengeluaran pertama: Elemen, SCA, env untuk kunci boleh diterbitkan dan penyerahan yang mendokumenkan cara React bercakap dengan API anda.
Untuk siapa ia
Pembangun dan agensi yang sudah mempunyai bahagian hadapan React dan API serta mahukan laluan Stripe yang boleh diselenggara tanpa memindahkan SPA ke Next.js.
Ciri utama
Apa yang Penyepaduan Stripe untuk React sertakan
Elemen Pembayaran dalam React
Pasang Elemen Pembayaran Stripe dengan @stripe/react-stripe-js pada laluan pembayaran React anda. Data kad kekal di Stripe — bukan dalam keadaan React yang anda berterusan.
React mengambil rahsia pelanggan — bukan kunci rahsia
Apl React hanya menggunakan kunci boleh diterbitkan dan rahsia pelanggan jangka pendek daripada API anda. Penyepaduan Stripe untuk React tidak meletakkan STRIPE_SECRET_KEY dalam Vite atau CRA env yang dihantar ke penyemak imbas.
Apple Pay dan Google Pay dalam Elemen React
Dayakan dompet dalam Elemen Pembayaran apabila akaun dan domain Stripe anda membenarkannya. React fallback kekal pada Elemen kad.
Mod ujian bertindak balas kemudian kunci boleh diterbitkan secara langsung
Hantar React SPA dengan kunci boleh diterbitkan ujian Stripe dahulu. Potongan langsung ialah perubahan env yang didokumenkan serta rahsia langsung yang sepadan pada API anda.
Pemenuhan bukan laluan terima kasih React
Skrin kejayaan React bukanlah sumber kebenaran. API anda mengesahkan webhook Stripe, kemudian apl React membaca keadaan berbayar daripada API tersebut.
Ralat bertindak balas dan batalkan keadaan
Kendalikan kad yang ditolak, Elemen yang dibatalkan, kegagalan rangkaian dan 3-D Secure yang tidak lengkap supaya UI React tidak meninggalkan pelanggan pada skrin mati.
Kes penggunaan
Bila Penyepaduan Stripe untuk React sesuai
Etalase React yang sedia ada di Vite atau CRA
Anda sudah mempunyai React SPA dan API. Anda memerlukan pembayaran Elemen tanpa menulis semula katalog dalam Next.js.
Agensi menyerahkan SPA pelanggan React kepada pengeluaran
Anda memerlukan laluan Stripe yang boleh diselenggara dalam React, sumber dalam repo klien dan pemotongan kunci langsung yang didokumenkan dan bukannya demo CodeSandbox.
Skrin tetapan SaaS dalam React
Apl React mengumpul kaedah pembayaran pertama sementara langganan kekal pada API dan Stripe Billing anda jika anda sudah menggunakannya.
React frontend, Django atau Node API sudah sedia ada
Integrasi Jalur untuk React ialah bahagian SPA. Jika anda juga memerlukan API yang dibina, yang diskop secara berasingan — harga ini bukan bahagian belakang baharu.
Demo
Pratonton aliran Elemen Jalur Bertindak balas
Pratonton laluan daftar keluar React: tindakan bayar, Elemen Pembayaran, pengesahan dan keadaan kegagalan. Kotak pasir langsung terhadap akaun Stripe anda tersedia selepas semakan keserasian. Halaman ini tidak memproses caj sebenar.
Cara ia berfungsi
Cara Integrasi Stripe untuk React disampaikan
Aliran kerja tambah Bacodo standard, dengan pemeriksaan khusus React untuk Vite/CRA, Penghala React dan API yang telah dipanggil oleh SPA.
01
Pilih React Stripe
Sahkan Integrasi Stripe untuk React dan bahawa anda mempunyai (atau akan merangkumi) API yang boleh membuat PaymentIntents.
02
Semakan keserasian bertindak balas
Semak versi React, pengikat, UI pembayaran sedia ada dan bahasa hujung belakang yang telah digunakan oleh SPA.
03
Sepadukan ke dalam React
Tambahkan Stripe.js, Elements, komponen daftar keluar dan kontrak pengambilan pada titik akhir PaymentIntent anda.
04
Konfigurasikan apl React
Sambungkan kunci yang boleh diterbitkan melalui persekitaran awam Vite/CRA. Kunci rahsia dan webhook kekal pada API.
05
Uji laluan pembayaran React
Jalankan kad ujian Stripe, 3-D Secure, batal/tolak dan sahkan kemas kini webhook API menyatakan apl React berbunyi.
06
Serahkan sumber React
Hantarkan sumber React, nota env dan senarai semak kunci langsung. Pelaksanaan React adalah milik anda untuk dikekalkan.
Seni bina
Cara Stripe menyambung ke projek React
Himpunan React tidak pernah memegang kunci rahsia. Elemen menggunakan rahsia pelanggan daripada API anda. Stripe memberitahu API itu melalui webhook. Bertindak balas kemudian membaca keadaan pesanan.
React SPAStripe.js / ElementsAPI andaStripe PaymentIntentsWebhook → APIReact membaca keadaan berbayar
Teknologi disokong
Apa yang Penyepaduan Stripe untuk React benar-benar guna
React SPA
React Semasa pada Vite, CRA atau pengikat SPA yang serupa. Ini bukan pendaratan Penghala Apl Next.js — lihat Penyepaduan Stripe untuk Next.js untuk timbunan itu.
@stripe/react-stripe-js dan Stripe.js
Pengikatan Stripe React Rasmi untuk Elemen Pembayaran dan dompet.
API sedia ada anda
PaymentIntent membuat dan pengesahan webhook pada bahagian belakang apl React sudah pun memanggil. Alat tambah ini tidak menggantikan API itu dengan perkhidmatan Bacodo sahaja.
Akaun Stripe untuk apl React
Akaun Stripe anda, uji dan kunci langsung, titik akhir webhook pada API dan acara Papan Pemuka.
Pembahagian pengehosan yang diperlukan
React SPA boleh menjadi statik. Webhook tidak boleh. Hos statik sahaja tanpa API tidak dapat melengkapkan laluan daftar keluar ini.
Apa yang disertakan
Apa yang termasuk dalam Integrasi Jalur untuk React
- Integrasi ke dalam projek React sedia ada
- Kod sumber penuh dalam repositori anda
- Komponen env dan daftar keluar kunci boleh diterbitkan
- Ambil kontrak ke PaymentIntent API anda
- Aliran pembayaran React Teruji sebelum penyerahan
- Nota serahan untuk pemotongan ujian kepada langsung
- Sokongan teknikal 30 hari selepas penyerahan
Bukan dalam harga tambahan
- Akaun Stripe, kunci API dan yuran pemprosesan Stripe — anda memilikinya
- Bahagian belakang baharu jika anda tidak mempunyai API yang boleh membuat PaymentIntents
- Penghijrahan daripada React to Next.js
- Marketplace Connect atau Pengebilan tersuai melainkan skop sebagai kerja tersuai
Pricing
Penyepaduan Stripe untuk harga React
Harga ini adalah untuk platform React SPA sahaja. Ia tidak menggunakan harga tambahan Next.js, Django, Flutter atau React Native.
Penyepaduan Stripe untuk React
Tambahkan pembayaran Stripe sedia pengeluaran pada React SPA sedia ada dan simpan kod sumber.
Keperluan
- Projek React sedia ada
- Akses Stripe Test Mode
- Backend diperlukan untuk pembayaran selamat
$145
sekali bayarReact
Perlu backend?
- Kod sumber penuh
- Tiada yuran lesen
- Sokongan 30 hari
- Integrasi penuh
Checkout selamat olehstripe
Penyerahan + keselamatan
Penyampaian tindak balas dan amalan keselamatan
Anggaran penghantaran React
Semakan React Stripe biasa dilingkungkan selepas semakan keserasian React. Garis masa bergantung pada UI dan API pembayaran React semasa anda.
Diuji pada React sebelum penyerahan
Kad mod ujian, laluan 3-D Secure, batal dan tolak digunakan pada React SPA sebelum kami menyerahkannya.
Rahsia jalur kekal di luar himpunan React
Hanya kunci yang boleh diterbitkan adalah awam. Kunci rahsia dan rahsia webhook kekal pada pelayan panggilan apl React.
Pengesahan Webhook adalah pada API, bukan dalam React
React tidak mengesahkan Stripe-Signature. API anda melakukannya, kemudian React membaca hasilnya.
Tiada tuntutan keselamatan React yang tidak boleh disahkan
Kami tidak menuntut pensijilan PCI atau penipuan sifar. React mengumpul kad melalui Stripe Elements, bukan borang kad tersuai yang kami simpan.
Soalan lazim
Soalan lazim
Apakah yang termasuk Stripe Integration for React?
Integrasi Stripe untuk React termasuk Stripe.js, Elemen Pembayaran pada skrin pembayaran React sedia ada anda, kontrak pengambilan ke API PaymentIntent anda, liputan ujian dan nota serahan. Anda menerima sumber React dalam projek anda. Yuran Stripe, akaun Stripe anda dan membina hujung belakang baharu adalah berasingan.
Adakah anda akan menyepadukan Stripe ke dalam apl React sedia ada kami?
ya. Penyepaduan Stripe untuk React dibina untuk SPA React yang telah anda miliki (Vite, CRA atau yang serupa). Kami memuatkan Elemen Pembayaran dan titik masuk pembayaran ke dalam laluan dan UI React semasa anda dan bukannya menghantar apl demo yang berasingan sebagai penghantaran.
Adakah Penyepaduan Stripe untuk React memerlukan bahagian belakang?
Ya untuk laluan React Stripe pengeluaran. PaymentIntents, kunci rahsia dan pengesahan webhook mesti hidup pada pelayan. Pelayar React hanya menerima kunci yang boleh diterbitkan dan rahsia pelanggan. Hos React statik sahaja tidak dapat melengkapkan laluan daftar keluar ini.
Pakej Stripe manakah yang digunakan oleh Stripe Integration for React?
Integrasi Stripe untuk React menggunakan Stripe.js rasmi dan @stripe/react-stripe-js untuk Elemen Pembayaran dan dompet. Kami tidak membungkus pembayaran React dalam pemalam tidak berdokumen melainkan anda memerlukannya secara eksplisit.
Adakah Stripe Integration for React menyokong Apple Pay dan Google Pay?
Ya apabila akaun Stripe anda, pengesahan domain dan peranti menyokongnya. Dalam React, butang dompet adalah skop pilihan. Elemen Pembayaran Kad pada React kekal sebagai sandaran lalai.
Adakah Next.js disertakan dalam Integrasi Stripe untuk React?
Tidak. Penyepaduan Stripe untuk React ialah laluan SPA. Penghala Apl Next.js dan Pengendali Laluan ialah Penyepaduan Stripe untuk Next.js. Kami tidak memindahkan React SPA ke Next.js dalam harga tambahan React ini.
Bolehkah Stripe Integration for React mengutip bayaran langganan?
Pelanggan React boleh mengesahkan PaymentIntent atau mengumpul kaedah pembayaran melalui Stripe.js. Produk Stripe Billing berulang, portal pelanggan dan logik invois secara langsung pada API anda. Kerja React yang berat langganan mungkin memerlukan Sebut Harga Tersuai.
Di manakah kunci boleh diterbitkan dan rahsia Stripe tinggal dalam apl React?
Penyemak imbas React hanya menggunakan kunci boleh diterbitkan Stripe melalui Vite atau CRA env awam. Kunci rahsia dan rahsia menandatangani webhook kekal pada API anda. Penyepaduan Stripe untuk React tidak meletakkan kunci rahsia dalam berkas React.
Bagaimanakah mod ujian Stripe dan mod langsung berfungsi dalam React?
Kami melaksanakan Integrasi Stripe untuk React terhadap kunci ujian Stripe dan kad ujian terlebih dahulu. Siaran langsung ialah perubahan penting yang boleh diterbitkan yang didokumenkan dalam React serta rahsia langsung dan webhook yang sepadan pada API anda, bukan pengaktifan lesen tambahan.
Bagaimanakah Stripe Integration for React mengendalikan 3-D Secure / SCA?
Elemen Pembayaran Stripe mengendalikan 3-D Secure melalui Stripe.js. Halaman React mesti mengekalkan aliran pembayaran sehingga Stripe mengembalikan status akhir; Penyepaduan Stripe untuk React menyalurkan keadaan tersebut secara eksplisit.
Adakah webhook Stripe diperlukan untuk pembayaran React?
Ya untuk pemenuhan selepas Elemen Pembayaran React. UI React bukanlah sumber kebenaran. API anda mengesahkan tandatangan webhook Stripe dan kemudian menandakan pesanan dibayar, membuka kunci kandungan atau memberitahu pemenuhan. Bertindak balas kemudian membaca keadaan itu.
Bolehkah kami mengekalkan UI pembayaran React semasa kami dengan Stripe?
ya. Penyepaduan Stripe untuk React biasanya mengekalkan produk, troli dan butang bayar React anda dan memasang Elemen Pembayaran daripada tindakan itu. Borang kad React tersuai yang menyentuh data PAN mentah adalah di luar skop lalai kerana Elemen Pembayaran ialah laluan PCI yang lebih selamat.
Adakah harga Stripe Integration for React termasuk akaun atau yuran Stripe?
Tidak. Anda membuat dan memiliki akaun Stripe, kunci API dan yuran pemprosesan Stripe. Harga tambahan React adalah pelaksanaan ke dalam projek React anda, bukan lesen pembayaran Bacodo.
Adakah Stripe Integration for React menggantikan Apple atau Google In-App Purchase?
Tidak. Barangan digital yang dijual di dalam gedung aplikasi selalunya masih memerlukan IAP. Integrasi Stripe untuk React adalah untuk pembayaran Stripe dalam tapak web React atau SPA di mana Stripe ialah laluan pembayaran yang dibenarkan untuk jenis produk anda.
Bolehkah kami menyesuaikan resit Stripe dan metadata dalam React?
ya. Metadata PaymentIntent, rekod pelanggan dan medan yang anda kekalkan selepas pengesahan webhook diselaraskan dengan model pesanan sedia ada anda semasa Penyepaduan Stripe untuk React. Apl React hanya memaparkan perkara yang dikembalikan oleh API anda.
Apakah sokongan React yang disertakan selepas penyerahan Stripe?
Sumber React ada dalam repo anda, jadi pasukan anda boleh mengekalkannya. Sokongan 30 hari yang disertakan meliputi soalan teknikal dan kecacatan dalam skop Integrasi Stripe untuk React yang dihantar, bukan kerja ciri React yang tidak berkaitan.
Bagaimanakah kemas kini Stripe.js atau Stripe API dikendalikan pada React?
Semasa tetingkap 30 hari kami membantu dengan kerosakan dalam penyepaduan React yang dihantar disebabkan oleh perubahan Stripe atau Stripe.js yang didokumenkan. Peningkatan pakej React yang berterusan selepas itu ialah penyelenggaraan anda atau Sokongan Teknikal Lanjutan jika anda membelinya.
Bagaimana jika pembayaran Stripe gagal dalam apl React pengeluaran?
Kami mendokumenkan cara membaca status PaymentIntent, log Papan Pemuka Stripe dan penghantaran webhook daripada laluan daftar keluar React. Sokongan 30 hari termasuk penyelesaian masalah penolakan, 3-D Secure drops dan kunci tersalah konfigurasi untuk aliran React yang dihantar.
Versi React manakah yang serasi dengan Stripe Integration for React?
Kami mengesahkan versi React anda, pengikat (Vite, CRA atau yang serupa) dan API yang telah dipanggil oleh SPA terhadap keluaran Stripe.js yang kami sematkan pada masa penyepaduan. Masa jalan React yang lebih lama atau bercabang besar mungkin memerlukan skop tambahan.
Apakah sokongan 30 hari berbanding Sokongan Teknikal Lanjutan 6 bulan untuk Penyepaduan Stripe untuk React?
30 hari selepas penyerahan disertakan untuk laluan React Stripe yang dihantar. Sokongan Teknikal Lanjutan adalah pilihan pada 20% daripada harga tambahan React ini dan meliputi enam bulan lagi bantuan teknikal pada penyepaduan React yang sama, bukan binaan produk baharu.
Penyepaduan Stripe untuk React
Tambahkan pembayaran Stripe sedia pengeluaran pada React SPA sedia ada anda, simpan kod sumber dan simpan rahsia pada API anda.
$145