Tämä opetusohjelma opastaa sinut alusta loppuun, kuinka saat PayPal-maksut käyttöön.

Verkkokaupan alueella digitaaliset maksuratkaisut ovat lisänneet merkittävästi liikevaihdon ja yritysten yleistä kasvua mahdollistamalla ja käsittelemällä rajat ylittäviä maksuja helposti.

PayPal tarjoaa yksinkertaisen ja joustavan digitaalisen maksuratkaisun verkkotapahtumien hallintaan. Sisällyttämällä PayPalin verkkosovelluksiisi voit varmistaa, että asiakkaat saavat saumattoman ja turvallisen maksukokemuksen, mikä puolestaan ​​voi lisätä myyntiä ja yleistä brändiluottamusta.

Lue lisää PayPalin integroimisesta React-sovelluksiin.

Luo PayPal Sandbox -tili

PayPal Sandbox on PayPalin tarjoama testausympäristö, jonka avulla voit testata maksuintegraatioita sovelluksissasi. Se tarjoaa simuloidun ympäristön, joka sisältää kaikki PayPalin live-tuotantoympäristön maksuominaisuudet.

Yksinkertaisesti hiekkalaatikko tarjoaa alustan maksuintegraatioiden testaamiseen ilman oikean rahan tarvetta.

Hiekkalaatikkotilin avulla pääset virtuaaliselle PayPal-tilille testivaroilla, joiden avulla voit simuloida erityyppisiä tapahtumia ja maksuintegraatioita.

Jos haluat luoda hiekkalaatikkotilin, siirry osoitteeseen PayPal-kehittäjäkonsoli ja kirjaudu sisään PayPal-tilisi tunnistetiedoilla. Napsauta seuraavaksi kehittäjien hallintapaneelissa Sandbox-tilit -painiketta.

PayPal-tapahtuman käsittelemiseksi React-sovelluksellasi tarvitset kaksi hiekkalaatikkotiliä: yritystilin ja henkilökohtaisen tilin. Nämä kaksi tiliä auttavat sinua simuloimaan täydellisen tapahtuman – sekä asiakkaan että kauppiaan (yrityksen) näkökulmasta.

On tärkeää testata maksuintegraation toimivuutta sovelluksessasi molemmista näkökulmista.

Klikkaa Luo tili -painiketta kahden tilin määrittämiseksi.

Luo tilin asetussivulla yksi jokaisesta tilityypistä: henkilökohtainen ja sitten yritystili. Käytät henkilökohtaisia ​​tilitietoja kirjautumiseen PayPalin hiekkalaatikko henkilökohtainen tili. Toisaalta käytät yritystilin tunnistetietoja luodaksesi projektin kehittäjäkonsolissa PayPalin asiakastunnuksen saamiseksi.

Vaihtoehtoisesti voit uusien tilien luomisen sijaan käyttää PayPalin tarjoamia oletushiekkalaatikkotilejä maksuintegraatioiden testaamiseen.

Luo PayPal-projekti

Napsauta kehittäjien kojelautasivulla Sovellukset ja kirjautumistiedot -painiketta ja napsauta Luo sovellus -painiketta PayPal-projektin määrittämiseksi. Täytä seuraavaksi hakemuksesi nimi, valitse Kauppias tilin tyypiksi ja valitse alun perin luomasi yritystilin tunnistetiedot.

Kopioi lopuksi sovelluksen asiakastunnus.

Määritä React Client

Luo React-sovellus, avaa public/index.html tiedosto ja lisää asiakastunnuksesi alla olevassa head element -osiossa esitetyssä muodossa.

<käsikirjoitussrc=" https://www.paypal.com/sdk/js? client-id=your-client-ID&currency=USD">käsikirjoitus>

Komentosarjatunniste lataa PayPalin JavaScript SDK: n, kirjaston, joka tarjoaa asiakaspuolen toimintoja vuorovaikutukseen PayPalin API: n kanssa ja antaa sen käytettäväksi React-komponenteissa.

SDK: n toimintojen avulla voit luoda PayPal-maksupainikkeen, joka käsittelee maksuvirran, joka sisältää maksutietojen lähettämisen PayPalille, maksun valtuutuksen ja maksun käsittelyn vastaus.

Löydät tämän projektin koodin siitä GitHub-arkisto.

Luo tuotekomponentti

Luo /src-hakemistoon uusi komponenttien kansio ja lisää kaksi tiedostoa: Product.js ja PayPalCheckout.js.

Avaa Product.js-tiedosto ja lisää alla oleva koodi:

tuonti Reagoi, { useState } alkaen"reagoi";
tuonti"./product.style.css";
tuonti"../assests/laptop.jpg";
toimintoSovellus() {
palata (
"Tuotesäiliö">
"Tuotteen sisältö">
"tuote"> 
vaatia("../assests/laptop.jpg")} alt="kannettava tietokone" />
 </div>
"lasku">
 MacBook Pro</h2>





 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Maxime mollitia, molestiae quas vel sint commodi repudiandae
 consquuntur.
 </p>


Hinta: $350.00</h3>
 </div>
 </header>
 </div>
 );
}






viedäoletuksena Sovellus;

Tämä koodi tekee yksinkertaisen tuotekomponentin.

Luo PayPal Checkout -komponentti

Lisää seuraava koodi PayPalCheckout.js-tiedostoon:

tuonti React, { useRef, useEffect, useState } alkaen"reagoi";
tuonti Maksuvirhe alkaen"./PaymentFailure";
tuonti Maksu onnistui alkaen"./PaymentSuccess";
toimintoPayPalCheckout() {
konst paypal = useRef();
konst [transactionStatus, setTransactionStatus] = useState(tyhjä);


 useEffect(() => {
ikkuna.paypal
 .Buttons({
 CreateOrder: (tiedot, toimet, err) => {
palata action.order.create({
 tahallisuus: "KAAPATA",
 osto_yksiköt: [
 {
 kuvaus: "MacBook kannettava tietokone",
 määrä: {
 valuutta koodi: "USD",
 arvo: 350.00,
 },
 },
 ],
 });
 },
 OnApprove: asynk (tiedot, toimet) => {
konst tilaus = odottaa action.order.capture();


konsoli.Hirsi("menestys", Tilaus);
 setTransactionStatus("menestys");
 },
 onError: (err) => {
konsoli.log (err);
 setTransactionStatus("epäonnistuminen");
 },
 })
 .render (paypal.current);
 }, []);


jos (transactionStatus "menestys") {
palata<Maksu onnistui />;
 }


jos (transactionStatus "epäonnistuminen") {
palata<Maksuvirhe />;
 }


palata (




</div>
 </div>
 );
}


viedäoletuksena PayPalCheckout;

Tämä koodi käyttää kolmea Reagoi koukut: useRef, useState ja useEffect. Se käyttää useRef-komentoa luomaan viittauksen div-elementtiin, joka toimii PayPalin kassapainikkeen säilönä.

Se käyttää useEffectiä PayPal-painikkeen luomiseen paypal. Painikkeet -funktion ja tekee sitten painikkeen div-elementissä, johon viitataan paypal.current menetelmällä.

The paypal. Painikkeet funktio ottaa objektin, jolla on useita ominaisuuksia:

  • createOrder: Tämä funktio palauttaa objektin, joka sisältää tiedot käyttäjän luomasta tilauksesta. Tilaustiedot sisältävät tuotteen tai palvelun tarkat tiedot, kuten määrän, tuotteen nimen, kuvauksen ja valuutan.
  • onApprove: Tämä toiminto suoritetaan, kun maksu on hyväksytty. Se tallentaa maksun ja kirjaa onnistumisviestin konsoliin. Se asettaa myös tapahtuman tila valtiolle menestys.
  • onError: Tämä toiminto suoritetaan, kun maksussa tapahtuu virhe. Se kirjaa virheilmoituksen konsoliin ja määrittää tapahtuman tila valtiolle epäonnistuminen.

Lopuksi komponentti tekee ehdollisesti joko Maksu onnistui tai Maksuvirhe komponentti arvosta riippuen tapahtuman tila osavaltio.

Nämä kaksi komponenttia hahmonnetaan vain joko onnistuneen tai epäonnistuneen tapahtuman jälkeen. Mene eteenpäin ja luo kaksi tiedostoa: PaymentSuccess.js ja PaymentFailure.js komponentit-kansioon ja lisää toiminnallinen komponentti kappaleelementillä, joka näyttää tapahtuman tilan.

Päivitä App.js-komponentti

Avaa src/App.js-tiedosto ja lisää alla oleva koodi:

tuonti Reagoi, { useState } alkaen"reagoi";
tuonti Tuote alkaen"./components/Product";
tuonti PayPalCheckout alkaen"./components/PayPalCheckout";
tuonti"./App.css";
toimintoSovellus() {
konst [checkout, setCheckOut] = useState(väärä);


palata (


"Sovellus">
"Sovelluksen otsikko">
 {Tarkista? (

 ): (
"Tuote">
 luokannimi="Tarkista"
 onClick={() => {
 setCheckOut(totta);
 }}
 >
 Lisää ostoskoriin ja kassalle
 </button>

 </div>
 )}
 </header>
 </div>
 );
}


viedäoletuksena Sovellus;

Tämä koodi käyttää ehdollista renderöintitapaa joko PayPalCheckout- tai tuotekomponentin näyttämiseen. UseState-koukku alustaa checkout-nimisen tilamuuttujan epätosi-arvoksi, joka seuraa nykyistä tilaa sivun latautuessa.

Aluksi React renderöi tuotekomponentin, mukaan lukien kassapainikkeen. Kun käyttäjä napsauttaa kassapainiketta, onClick-käsittelijätoiminto aktivoituu päivittämään kassamuuttujan arvoon tosi. Tämä päivitys kehottaa App-komponenttia renderöimään PayPalCheckout-komponentin sen sijaan.

PayPal-maksun lisäominaisuudet

PayPalin maksuominaisuudet, kuten One Touch ja PayPal Credit, varmistavat, että asiakkaasi voivat nauttia virtaviivaistetusta maksuprosessista, joka on turvallinen, luotettava ja kätevä.

Vaikka voit rakentaa oman maksunkäsittelypalvelun tyhjästä, PayPalin kaltaisen maksualustan käyttö on mieluiten joustavampi ja tehokkaampi vaihtoehto. Pohjimmiltaan, kun maksuratkaisu on käytössä, sinun ei tarvitse huolehtia mukautetun maksupalvelun perustamiseen tarvittavan infrastruktuurin hallinnasta.