Onlinebetaalomgeving upgraden

Je kunt de onlinebetaalomgeving aanpassen om je merk uit te breiden, berichten te wijzigen, aanbiedingen te presenteren en andere verbeteringen aan te brengen in de manier waarop je klanten in de betaalomgeving kunnen werken. Om ervoor te zorgen dat je aanpassingen compatibel zijn met de voortdurende wijzigingen die door Shopify worden aangebracht, moet je je betaalomgeving regelmatig bijwerken.

Doe het volgende om je voor te bereiden op deze upgrade:

1. Bekijk een voorbeeld van de nieuwe betaalomgeving en test de omgeving zoals klanten die ervaren. Afhankelijk van de aanpassingen die je aan je checkout hebt aangebracht, moet je wellicht je bestand checkout.liquid wijzigen, voordat je kunt bijwerken.
2. Zodra je tevreden bent over je wijzigingen, moet je de winkel upgraden om de nieuwe Shopify Checkout te gebruiken.

Voorbeeld van betaalomgeving bekijken en testen op fouten

Het is belangrijk dat je een voorbeeld van de wijzigingen bekijkt voordat je een upgrade van je winkel uitvoert om de nieuwe versie van de betaalomgeving te gebruiken.

Stappen:

1. Ga vanuit je Shopify-beheercentrum naar de pagina Checkout upgrade en klik vervolgens op Voorbeeld checkout.
2. Selecteer je huidige thema in de lijst en klik vervolgens op Voorbeeld.
3. Maak een test checkout aan door als klant door het checkout-proces te gaan.

Opmerking

Sommige betalingsproviders hebben een minimumprijs voor test-checkouts. Voor Shopify Payments is dit 0,50 CAD, 0,35 USD of 0,30 EUR. Andere betalingsproviders hebben mogelijk verschillende drempels.

Als er de foutmelding wordt weergegeven Je betaling kan op dit moment niet worden verwerkt, probeer het dan over een paar minuten opnieuw. Probeer de prijs van de testbestelling te verhogen of een test-checkout-procedure met gratis artikelen af te ronden.

Als er tijdens deze tests fouten optreden, betekent dit dat mogelijk sommige van je aanpassingen in de betaalomgeving conflicteren met verbeteringen in de nieuwe versie. Als dit het geval is, moet je het bestand checkout.liquid wijzigen, voordat je gaat upgraden.

Fouten oplossen

Opmerking

Wanneer je een thema wilt wijzigen of testen, moet je een duplicaatkopie maken en werken met dit duplicaat. Als je een fout maakt tijdens het werken met het duplicaat, kun je het duplicaat verwijderen en een nieuwe kopie van het oorspronkelijke thema maken, zonder dat dit gevolgen heeft voor je klanten.

Stappen:

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.

2. Klik op de knop ... en daarna op Dupliceren.

3. Zoek het gedupliceerde thema bij Meer thema's en klik op de knop ... > Code bewerken. Breng de gewenste wijzigingen aan en test deze met behulp van deze dubbele en niet-gepubliceerde versie van je thema.

4. Open het checkout.liquid -bestand.

5. Bekijk een voorbeeld van het checkout.liquid -bestand van je gedupliceerde thema met behulp van de nieuwe Shopify-betaalomgeving:

   1. Ga vanuit je Shopify-beheercentrum naar de pagina Checkout upgrade, klik Voorbeeld van Checkout, en kies vervolgens voor het gedupliceerde thema.
   2. Voltooi enkele testbestellingen in het voorbeeld.

Als er fouten optreden of als je iets opvalt met betrekking tot hoe de checkoutpagina eruitziet, moet je het bestand checkout.liquid bewerken om dit op te lossen.

Upgraden naar de nieuwe Shopify Checkout

Het upgraden van je checkout is een proces in twee stappen, waarbij je Shopify Checkout moet upgraden en het huidige, gepubliceerde thema moet vervangen door het duplicaat dat je wijzigingen bevat.

Let op

Zorg ervoor dat je een voorbeeld van de betaalomgeving hebt bekeken voordat je deze upgrade uitvoert. Je moet er zeker van zijn dat deze upgrade geen gevolgen heeft voor de betaalervaring van je klanten en dat ze nog steeds voor hun bestellingen kunnen betalen in de nieuwe betaalomgeving.

Voer de upgrade uit op een rustiger moment van de dag (zoals 's ochtends vroeg,' s avonds laat of in het weekend) om mogelijke verstoringen tot een minimum te beperken.

Stappen:

1. Klik op de pagina Checkout upgraden op Checkout upgraden (deze knop is onderaan de pagina te vinden).
2. Als je fouten bent tegengekomen toen je voor het eerst je thema bekeek, controleer dan eerst of ze zijn opgelost (zie fouten oplossen hierboven). Publiceer vervolgens het bijgewerkte duplicaat thema:
   1. Klik in webshop op Thema's.
   2. Zoek het gedupliceerde thema en klik op de knop ... > Publiceren.

De betaalomgeving wordt bijgewerkt en het duplicaatthema is nu het huidige thema.

Wat is er nieuw in Shopify Checkout?

De nieuwe versie van Shopify Checkout bevat de volgende wijzigingen en nieuwe functies:

• Abonnementen
• Upsell
• Fooien bij de checkout
• Afhalen en lokale bezorging
• Aanvullende internationale velden
• Volg bestelling met Shop-knop
• Updates van de bestelstatuspagina
• Algemene bestandswijzigingen
• Skeletten/laadtoestanden
• Foutmeldingen
• Gegevensattribuut wijzigingen
• Toegankelijkheidsverbeteringen

Abonnementen

Er zijn meerdere secties toegevoegd aan Shopify Checkout, zodat je abonnementsproducten kunt aanbieden terwijl je je betalingsaanpassingen behoudt. In deze secties kun je abonnementsproducten verkopen en terugkerende betalingen rechtstreeks binnen Shopify Checkout verwerken.

Nadat je de checkout-upgrade hebt voltooid, kun je abonnementen aanbieden door een abonnement-app uit de Shopify App Store toe te voegen, of een app op maat te bouwen met nieuwe abonnement-API's.

Meer informatie over abonnementen vind je in het Shopify-helpcentrum:

• Als abonnementen zijn geactiveerd, worden de verzendmethoden die worden gebruikt voor abonnementen afzonderlijk weergegeven van die van eenmalige aankopen.
• .product_description_variant Span.product_description_selling_plan wordt weergegeven als een extra orderregel-eigenschap als er een abonnement aan het product is gekoppeld.
• Een terugkerend totaal met bijbehorende tooltip verschijnt onder het totaal in het besteloverzicht.
• Verzendopties voor abonnementen worden weergegeven wanneer een abonnementsproduct bij de bestelling is inbegrepen.

Upsell

Nieuwe upsell-apps zijn na aankoop beschikbaar in de Shopify App Store. Deze apps presenteren aanbiedingen na aankoop aan klanten rechtstreeks in Shopify Checkout en passen hun voltooide bestelling aan om het opnieuw verkochte product op te nemen zonder opnieuw facturerings- of verzendgegevens in te voeren.

Deze checkout-upgrade bevat wijzigingen in je checkout-bestanden waardoor upsells na aankoop kunnen werken met je aangepaste checkout.

Meer informatie over upselling na aankoop.

Wanneer een geldige app na aankoop is geïnstalleerd in het Shopify-beheercentrum, ontvangen klanten aanbiedingen na aankoop.

Opmerking

Aanpassing van de post-purchasepagina wordt gedaan in de upsell-app van derden. Het kan niet worden aangepast met checkout.liquid.

Fooien bij de checkout

Fooi-opties kunnen worden gebruikt om klanten een fooi te laten opnemen bij hun online bestelling, of om donaties te verzamelen in plaats van fooien. Als fooien is geactiveerd, wordt de sectie Fooi toevoegen weergegeven bij de betaalmethode bij de checkout. De sectie Fooi toevoegen bevat drie vooraf geselecteerde fooi-opties naast een veld om een aangepast fooi-bedrag in te voeren.

Als fooien is geactiveerd, wordt de sectie Fooi toevoegen weergegeven bij de betaalmethode bij de checkout.

Meer informatie over het aanbieden van Fooi-opties.

Afhalen in de winkel en lokale bezorging

Afhalen in de winkel en bezorging zijn nieuwe bezorgmethoden waarmee klanten hun bestellingen lokaal kunnen ontvangen. Als deze bezorgmethoden zijn geactiveerd, kunnen klanten Afhalen in de winkel of bezorging selecteren tijdens de verzendstap van de checkout.

Lees hoe je afhalen in de winkel en lokale bezorging kunt activeren.

• Extra velden voor lokale bezorging worden weergegeven wanneer lokale bezorging is geactiveerd en geselecteerd door de klant.

• Als afhalen in de winkel is geactiveerd, wordt een sectie over de bezorgmethode aan de klant weergegeven op de pagina Informatie bij de checkout. Als verzending niet beschikbaar is, wordt alleen afhaalinformatie weergegeven.

• Bezorgmethoden worden weergegeven als afzonderlijke tabbladen. - Door Verzenden te selecteren, worden klanten gevraagd hun verzendinformatie in te voeren en worden beschikbare verzendmethoden weergegeven wanneer op Doorgaan naar verzenden wordt geklikt. - Als je Ophalen selecteert, wordt een lijst met ophaallocaties weergegeven. Klanten klikken op het keuzerondje voor de gewenste afhaallocatie en klikken vervolgens op Doorgaan naar betalen.

• Als klanten Afhalen selecteren in de verzendstap van de checkout, wordt er geen verzendinformatie verzameld. Klanten zijn verplicht om factuurgegevens in te voeren tijdens de betaalstap van de checkout.

• Lokale bezorginstructies worden weergegeven op de bestelstatuspagina. Deze kunnen worden bewerkt door in je Shopify-beheercentrum naar Instellingen > Verzending en bezorging te gaan. Zoek in de sectie Afhalen in de winkel de locatie die je wil bewerken en klik op Beheren.

• De bestelstatuspagina is bijgewerkt om de voortgang van bezorgingen en afhalingen weer te geven. Berichten worden weergegeven als: - een bestelling is voorbereid en klaar staat voor bezorging. - een bezorging is voltooid. Dit bericht bevat ook een link om dezelfde items opnieuw te bestellen. - een afhaalbestelling is bevestigd, wat aangeeft dat de klant een e-mail ontvangt wanneer deze klaar is om opgehaald te worden. - een afhaalbestelling klaar staat om opgehaald te worden. - een afhaalbestelling is opgehaald.

Aanvullende internationale velden

Sommige landen hebben unieke verzendvoorschriften waaraan je moet voldoen om ervoor te zorgen dat je zendingen je klanten bereiken. Er zijn nu extra velden beschikbaar voor landen met unieke verzendvoorschriften. Deze nieuwe velden verschijnen in de betaalmethodestap van de checkout.

Meer informatie over aanvullende internationale velden.

• Extra afrekenvelden worden alleen weergegeven voor klanten in Brazilië, Zuid-Korea, Italië en China.

Volg bestelling met Shop-knop

De knop Bestelling volgen met Shop op de bestelstatus- en bedankpagina's is bijgewerkt met een nieuw ontwerp.

Meer informatie over de Shop-app.

• Er is een tekstknop toegevoegd die klanten vraagt hun aankoop in de Shop-app te volgen.
• Er zijn parameters toegevoegd om Shop Pay-tracking weer te geven.
• Rendering voor de Bestelling volgen met Shop-knop voor de volgende gevallen: - bezorgpoging - bevestiging - bezorgd - niet gelukt - onderweg - niet-verzendbaar - klaar voor bezorging

Updates van de bestelstatuspagina

Er zijn verschillende updates doorgevoerd op de bestelstatuspagina.

• Er is een speciaal gedeelte met informatie over cadeaubonnen gemaakt die wordt weergegeven wanneer een cadeaubon is gekocht.
• Abonnementsinformatie is toegevoegd.
• De klasse icon-svg--align-text-bottom is verwijderd.
• data-step="thank-you" is gewijzigd in data-step="thank_you". Als je dit attribuut gebruikt om te bepalen op welke pagina van de checkout de klant is, gebruik je in plaats daarvan het JavaScript-object Shopify.Checkout.page.
• Er is een bestelstatuskaart toegevoegd.

Algemene bestandswijzigingen

• div.content-box__row heeft nu role="table".

• Als de klant de bedankstap gebruikt en de QR-bundel heeft, wordt show_qr.js toegevoegd.

• Er is een check toegevoegd om er zeker van te zijn dat de klant toegang heeft tot de checkout.

• Cadeaubonnen worden nu weergegeven met checkouts/order_status/gift_cards.

• De richting van de contactinformatie is opgelost met enforce_content_directionality.

• Verzendinformatie is verplaatst naar checkouts/web/checkouts/contact_information/pickup.

• De weergave van meerdere verzendregels in de zijbalk van het orderoverzicht wordt nu ondersteund.

• tr.total-line wordt alleen weergegeven als er bijgewerkte totalen zijn.

• Generieke betalingsregels worden nu ondersteund.

• Het wijzigen van de valuta tijdens de checkout wordt nu ondersteund.

• #payment-gateway-subfields heeft nu klasse: - .radio-wrapper content-box__row .content-box__row--secondary - .card-fields-container

• Tooltip voor creditcard is aangepast en is nu beschikbaar in div.field__icon.

• Het Aria-label is verwijderd uit de volledige beschrijving van de verzendtarieven.

• De formuliervelden voor verzendtarieven zijn verplaatst naar checkouts/web/checkouts/shipping_method/shipping_rate_additional_fields.

Skeletten/laadtoestanden

De laadtoestanden voor afrekenpagina's zijn bijgewerkt, er zijn skeletten toegevoegd die zichtbaar zijn terwijl de pagina wordt geladen, of sommige elementen zijn selectief verborgen totdat het laden is voltooid. Deze veranderingen optimaliseren laadtijden.

• Objecten verborgen tijdens het laden: - del.total-recap__original-price - .total-line__price span.payment-due__currency - span.order-summary__emphasis

• Objecten die een skelet laten zien tijdens het laden: - Span.total-recap__final-price - .product__price del.order-summary__small-text - .product__price del.order-summary__emphasis - .total-line__price span.payment-due__price - .total-line__price span.order-summary__emphasis - .total-line__price span.visually-hidden - .total-line__price.total-line--subtotal span.order-summary__emphasis

Foutmeldingen

Er zijn nieuwe foutmeldingen toegevoegd aan de checkout.

• Er is een burgernummerwaarschuwing toegevoegd aan het adresveld.
• Een waarschuwing die aangeeft dat er geen verzendkosten beschikbaar zijn voor een winkelwagentje, bestemming of land, is opgesplitst in twee afzonderlijke waarschuwingsberichten: één waarschuwingsbericht dat aangeeft dat er geen tarieven beschikbaar zijn voor een winkelwagentje of bestemming, en een aparte waarschuwing die aangeeft dat er geen tarieven beschikbaar zijn voor een land.
• Er is een waarschuwingsbanner toegevoegd aan de checkout wanneer wordt geprobeerd een aankoop te voltooien in een development store.
• Er is een bericht toegevoegd dat verschijnt wanneer de klant tijdens de checkout niets hoeft te betalen.
• Er is een waarschuwingsbanner toegevoegd om een verificatiefout aan te geven.
• Er is een foutmelding toegevoegd om aan te geven wanneer verzendmethoden niet beschikbaar zijn tijdens de verzendstap van de checkout.

Gegevensattribuut wijzigingen

Trekkie is verwijderd uit de volgende objecten:

• Continue_shipping_button
• Get_shipping_updates_button
• Shipping_updates_handle_field
• Shipping_updates_submit_button
• Change_shipping_address_link
• breadcrumb_cart_link
• apply_discount_button
• Have_an_account_login_link
• Email_or_phone_field
• Email_field
• buyer_accepts_marketing_field
• Change_billing_address_link
• Change_contact_method_link
• Change_payment_method_link
• Change_pickup_method_link
• Change_shipping_address_link
• Checkout invoervelden: - {type}_address_field - {type}_firstname_field - {type}_lastname_field - {type}_company_field - {type}_address1_google_autocomplete_field - {type}_address1_field - {type}_address2_field - {type}_city_field - {type}_country_field - {type}_province_field - {type}_zip_google_autocomplete_field - {type}_phone_field

Toegankelijkheidsverbeteringen

Er zijn verschillende wijzigingen aangebracht in de checkoutpagina, zodat je kunt voldoen aan de toegankelijkheidsstandaarden van de webwinkel. Hierdoor kun je gemakkelijker navigeren naar het afrekenproces voor klanten die toegankelijkheidstechnologie gebruiken, zoals schermlezers.

• Heeft role="list" op ul toegevoegd voor het volgende: - u.breadcrumb - ul.payment-method-list - ul.os-timeline - ul.policy-list

• De tool-tip is verwijderd uit aria-labelledby op telephone_field.

• In Shop is het invoerlabel gewijzigd om naar de telefoon te verwijzen.

• Heeft h3 koppen toegevoegd bij het wachten op belastingen.

• Heeft h3 koppen toegevoegd bij het omleiden.

• Bij het laden van verzendmethoden is de p -tag gewijzigd in een h3 -tag.

• AutoAanvullen verwijst nu naar mobile tel in plaats van phone.

• div[data-processing-order] bijgewerkt door role="region"toe te voegen.

• Bijgewerkt div[data-announce-change] met het volgende: - toegevoegd role="region" - aria-labelledby instellen om overeen te komen met het ID van het koptekst-element - aria-describedby instellen om overeen te komen met het ID van het content container-element

• Bijgewerkt div.content-box blank-slate met het volgende: - toegevoegd role="region" - aria-labelledby instellen om overeen te komen met het ID van het koptekst-element

• Het snelle checkout-grid is verbeterd om ul en li -elementen te gebruiken in plaats van div.

• Heeft het besteloverzicht bijgewerkt met het volgende: - verbetering van duidelijkheid over aanbiedingsprijs en normale prijs - heeft de reeks gewijzigd in dl -tag - heeft del -tag gewijzigd in dt - en dd -tags.

• Betalingsgegevensmethoden bijgewerkt met het volgende: - span.radio__label__accessory gewijzigd in div.radio__label__accessory - span.visually-hidden gewijzigd in h3.visually-hidden - span.payment-icon-list__more gewijzigd in li.payment-icon-list__more - span.content-box__small-text gewijzigd in small.content-box__small-text

Verwante links

• Aanbevolen procedures voor het bewerken van checkout.liquid
• checkout.liquid
• CSS in checkout.liquid