Opgrader din onlinebetalingsproces
Du kan tilpasse din onlinebetalingsproces for at udvide dit brand, ændre meddelelser, vise tilbud og andet, der forbedrer kundeoplevelsen. For at sikre, at dine tilpasninger er kompatible med de ændringer, Shopify løbende foretager, skal du opdatere din betalingsproces regelmæssigt.
Inden du foretager denne opgradering, skal du gøre følgende:
- Få vist et eksempel på den nye betalingsproces og test, hvordan kunden oplever betalingsprocessen. Afhængig af hvilke tilpasninger du har foretaget i din betalingsproces, skal du muligvis foretage ændringer i filen
checkout.liquid
, inden du kan opgradere. - Når du er tilfreds med dine ændringer, kan du opgradere din butik, så den benytter den nye Shopify-betalingsproces.
På denne side
Få vist et eksempel på din betalingsproces, og test for fejl
Inden du opgraderer din butik, så den benytter den nye version af betalingsprocessen, skal du sørge for at gennemgå forhåndsvisninger af ændringerne.
Fremgangsmåde:
- Gå til siden Opgrader betalingsproces, og klik derefter på Forhåndsvisning af betalingsside.
- Vælg dit aktuelle tema på listen, og klik derefter på Forhåndsvisning.
- Opret en testbetaling ved at fortsætte gennem betalingsprocessen som kunde.
Hvis du finder fejl i forbindelse med disse tests, er nogle af dine tilpassede betalingsfunktioner i modstrid med forbedringer i den nye version. Hvis det er tilfældet, skal du foretage ændringer i filen checkout.liquid
, før du opgraderer.
Løsning af fejl
Fremgangsmåde:
- Gå til Webshop > Temaer i din Shopify-administrator.
- Klik på knappen ..., og klik derefter på Dupliker.
- Under Flere temaer finder du dit duplikerede tema og klikker på knappen ... > Rediger koder. Foretag dine ændringer, og test dem ved hjælp af denne duplikerede og ikke-udgivne version af dit tema.
Bemærk: Når du foretager ændringer i et tema eller tester et tema, skal du duplikere temaet og arbejde med den duplikerede kopi. Hvis du laver en fejl, mens du arbejder med den duplikerede kopi, kan du slette dubletten og oprette en ny kopi af det oprindelige tema, uden at det påvirker dine kunder.
Åbn filen
checkout.liquid
.Få vist en forhåndsvisning af filen
checkout.liquid
fra dit duplikerede tema ved hjælp af den nye Shopify-betalingsproces:
Hvis du støder på fejl eller oplever problemer med betalingsprocessen udseende, skal du rette disse i filen checkout.liquid
.
Opgrader til den nye Shopify-betalingsproces
Opgraderingen af din betalingsproces består af to trin, der kræver, at du opgraderer Shopifys betalingsproces og erstatter det aktuelle, udgivne tema med en duplikeret kopi, der indeholder dine ændringer.
Vælg at opgradere på et tidspunkt, hvor der er mindre travlt (f.eks. tidligt om morgenen, sent om aftenen eller i weekenden) for at minimere eventuelle afbrydelser.
Fremgangsmåde:
Klik på Opgradering af betalingsproces klikker du på Opgrader betalingsproces. Du finder knappen nederst på siden.
Hvis du stødte på fejl under første forhåndsvisning af dit tema, skal du sikre dig, at de er blevet løst (se Løsning af fejl ovenfor). Udgiv herefter dit opdaterede, duplikerede tema:
Din betalingsproces er opgraderet, og det duplikerede tema er nu dit aktuelle tema.
Nyheder i Shopifys betalingsproces
Den nye version af Shopifys betalingsproces indeholder følgende ændringer og nye funktioner:
- Abonnementer
- Mersalg
- Drikkepenge ved betaling
- Afhentning og lokal levering
- Yderligere internationale felter
- Spor ordre med Shop-knap
- Opdateringer ordrestatussiden
- Generelle filændringer
- Skelet-/indlæsningstilstande
- Fejlmeddelelser
- Ændringer af dataattributter
- Forbedringer af tilgængelighed
Abonnementer
Der er føjet flere afsnit til Shopify-betaling, så du kan tilbyde abonnementsprodukter og samtidig bevare dine betalingstilpasninger. Disse afsnit giver dig mulighed for at sælge abonnementsprodukter og behandle tilbagevendende betalinger direkte i Shopify-betaling.
Når du har gennemført opgraderingen af betalingsprocessen, kan du tilbyde abonnementer ved at tilføje en abonnementsapp fra Shopify App Store eller udvikle en tilpasset app med nye Subscription API'er.
Få mere at vide om abonnementer i Shopify Hjælp.
- Når abonnementer er aktiveret, vises leveringsmetoder, der bruges til abonnementer, adskilt fra leveringsmetoderne for engangskøb.
-
.product_description_variant Span.product_description_selling_plan
vises som en ekstra varelinje, hvis der er knyttet et abonnement til produktet. - Der vises en fast total med et tilhørende værktøjstip under totalen i ordreoversigten.
- Mulighederne for abonnementslevering vises, når et abonnementsprodukt er inkluderet i ordren.
Mersalg
Der er nye apps til mersalg efter køb i Shopify App Store. Disse apps udgør tilbud til dine kunder efter køb direkte i Shopify-betaling, og de ændrer deres gennemførte ordre, så den indeholder mersalgsproduktet, uden at det er nødvendigt at indtaste fakturerings- eller leveringsoplysninger igen.
Denne opgradering af betalingsprocessen omfatter ændringer af dine betalingsfiler, der gør det muligt for mersalg efter køb at fungere sammen med din tilpassede betalingsproces.
Få mere at vide om mersalg efter køb.
- Når der er installeret en gyldig efterkøbsapp i Shopify-administrator, modtager kunderne tilbud efter køb.
Bemærk: Tilpasning af efterkøbssiden foretages i mersalgsappen fra tredjepart. Det kan ikke tilpasses ved hjælp af checkout.liquid.
Drikkepenge ved betaling
Muligheder for drikkepenge kan bruges til give kunderne mulighed for at give drikkepenge i forbindelse med deres onlineordre eller til at indsamle donationer i stedet for drikkepenge. Når drikkepenge er aktiveret, vises afsnittet Tilføj drikkepenge i betalingsmetodetrinnet i betalingsprocessen. Afsnittet Tilføj drikkepenge indeholder tre forudvalgte muligheder for drikkepenge samt et felt, hvor man kan indtaste et tilpasset drikkepengebeløb.
Få mere at vide om muligheder for at give drikkepenge.
- Når drikkepenge er aktiveret, vises afsnittet Tilføj drikkepenge i betalingsmetodetrinnet i betalingsprocessen.
Afhentning og lokal levering
Lokal afhentning og levering er nye leveringsmetoder, der giver kunderne mulighed for at modtage deres ordrer lokalt. Når disse leveringsmetoder er aktiveret, kan kunderne vælge lokal afhentning eller levering i leveringstrinnet i betalingsprocessen.
Få mere at vide om, hvordan du aktiverer lokal afhentning og lokal levering.
- Der vises yderligere felter for lokal levering, når lokal levering er aktiveret, og kunden har valgt det.
- Hvis lokal afhentning er aktiveret, får kunden vist et leveringsmetodeafsnit på siden Oplysninger i betalingsprocessen. Hvis levering ikke er tilgængelig, vises der kun afhentningsoplysninger.
-
Leveringsmetoder vises som separate faner.
- Hvis du vælger Afsend, bliver kunden bedt om at indtaste sine leveringsoplysninger, og de tilgængelige leveringsmetoder vises, når der klikkes på Fortsæt til levering.
- Hvis du vælger Afhent, vises der en liste over afhentningslokationer. Kunderne klikker på alternativknappen for den ønskede afhentningslokation og klikker derefter på Fortsæt til betaling.
Hvis kunder vælger Afhent i leveringstrinnet i betalingsprocessen, indsamles leveringsoplysninger ikke. Kunderne skal indtaste faktureringsoplysninger i betalingstrinnet i betalingsprocessen.
Der vises vejledning til lokal levering på ordrestatussiden. Vejledningen kan redigeres ved, at du går til Indstillinger > Forsendelse og levering i din Shopify-administrator. Find den lokation, du vil redigere, i afsnittet Lokal afhentning, og klik på Administrer.
-
Ordrestatussiden er opdateret, så den viser status for leveringer og afhentninger. Der vises meddelelser, når:
- En ordre er blevet forberedt og er klar til levering.
- En levering er fuldført. Denne meddelelse indeholder også et link til at genbestille de samme varer.
- En afhentningsordre er blevet bekræftet, og det er angivet, at kunden modtager en mail, når den er klar til at blive afhentet.
- En afhentningsordre er klar til at blive afhentet.
- En afhentningsordre er blevet afhentet.
Yderligere internationale felter
Nogle lande har særlige leveringsrestriktioner, som du skal overholde for, at dine forsendelser kommer frem til kunderne. Der er nu ekstra felter til lande med særlige leveringsrestriktioner. Disse nye felter vises i betalingsmetodetrinnet i betalingsprocessen.
Få mere at vide om yderligere internationale felter.
- Yderligere betalingsfelter vises kun for kunder i Brasilien, Sydkorea, Italien og Kina.
Spor ordre med Shop-knap
Knappen Spor ordre med Shop på ordrestatus- og takkesiden er blevet opdateret med et nyt design.
Få mere at vide om Shop-appen.
- Der er tilføjet en tekstknap, der beder kunderne om at spore deres køb i Shop-appen.
- Der tilføjet parametre, der viser Shop Pay-sporing.
- Gengivelse af knappen Spor ordre med Shop til følgende situationer:
- forsøgt levering
- bekræftelse
- leveret
- mislykkedes
- undervejs
- kan ikke sendes
- ude til levering
Opdateringer ordrestatussiden
Der er foretaget flere opdateringer på ordrestatussiden.
- Der er oprettet et særligt gavekortafsnit, der viser, når der er blevet købt et gavekort.
- Der er tilføjet oplysninger om abonnementer.
- Klassen
icon-svg--align-text-bottom
er blevet fjernet. -
data-step="thank-you"
er blevet ændret tildata-step="thank_you"
. Hvis du bruger denne attribut til at identificere, hvilken side i betalingsprocessen, som kunden befinder sig på, skal du bruge JavaScript-objektet Shopify.Checkout.page. - Der er tilføjet et ordrestatuskort.
Generelle filændringer
-
div.content-box__row
har nurole="table"
. - Hvis kunden er i takketrinnet og har QR-pakken, tilføjes
show_qr.js
. - Der er tilføjet et tjek for at sikre, at kunden har adgang til betalingsprocessen.
- Gavekort vises nu med
checkouts/order_status/gift_cards
. - Dirigering af kontaktoplysninger er rettet med
enforce_content_directionality
. - Leveringsoplysninger er flyttet til
checkouts/web/checkouts/contact_information/pickup
. - Visning af flere leveringslinjer i sidebjælken på ordreoversigten understøttes nu.
-
tr.total-line
vises kun, hvis der er opdaterede totaler. - Generelle betalingslinjer understøttes nu.
- Ændring af valuta under betaling understøttes nu.
-
#payment-gateway-subfields
har nu klasser:-
.radio-wrapper content-box__row .content-box__row--secondary
-
.card-fields-container
-
Værktøjstip til kreditkort er blevet justeret og findes nu i
div.field__icon
.Aria-labelen er blevet fjernet fra den fulde beskrivelse af leveringspriser.
Felter på formularen Leveringspriser er blevet flyttet til
checkouts/web/checkouts/shipping_method/shipping_rate_additional_fields
.
Skelet-/indlæsningstilstande
Indlæsningstilstandene for betalingssider er blevet opdateret, og der er tilføjet skeletter, der er synlige, når siden indlæses, eller det kan vælges at skjule visse elementer, indtil indlæsningen er fuldført. Disse ændringer optimerer indlæsningstiderne.
-
Objekter, der er skjult under indlæsning:
-
del.total-recap__original-price
-
.total-line__price span.payment-due__currency
-
span.order-summary__emphasis
-
-
Objekter, der viser et skelet under indlæsning:
-
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
-
Fejlmeddelelser
Der er tilføjet nye fejlmeddelelser i betalingsprocessen.
- Der er tilføjet en CPR-nummeradvarsel i adressefeltet.
- En advarsel, der angiver, at der ikke er nogen tilgængelige leveringspriser for en indkøbskurv, en destination eller et land, er blevet opdelt i to separate advarselsmeddelelser: En advarselsmeddelelse, der angiver, at der ikke er nogen tilgængelige leveringspriser for en indkøbskurv eller destination, og en separat advarsel om, at der ikke er nogen tilgængelige leveringspriser for et land.
- Der er tilføjet et advarselsbanner i betalingsprocessen, når en kunde forsøger at gennemføre et køb i en udviklingsbutik.
- Der er tilføjet en meddelelse, der vises, når kunden ikke bliver debiteret i betalingsprocessen.
- Der er tilføjet et advarselsbanner, der angiver, at der er fejl i forbindelse med en godkendelsesændring.
- Der er tilføjet en fejlmeddelelse, der angiver, når der ikke er nogen tilgængelige leveringsmetoder i leveringstrinnet i betalingsprocessen.
Ændringer af dataattributter
Trekkie er blevet fjernet fra følgende objekter:
-
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
- Indtastningsfelter til betaling:
-
{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
-
Forbedringer af tilgængelighed
Der er foretaget flere ændringer i betalingsprocessen for at sikre overholdelse af standarder for webtilgængelighed. Det gør det nemmere at navigere i betalingsprocessen for kunder, der bruger tilgængelighedsteknologi, f.eks. skærmlæsere.
-
Tilføjede
role="list"
påul
for følgende:-
u.breadcrumb
-
ul.payment-method-list
-
ul.os-timeline
-
ul.policy-list
-
Værktøjstippet er blevet fjernet fra
aria-labelledby
påtelephone_field
.I Shop er indtastningslabelen blevet ændret, så den henviser til telefonen.
Tilføjede
h3
-overskrifter, mens ventedes på skatter.Tilføjede
h3
-overskrifter ved omdirigering.Ved indlæsning af leveringsmetoder skal
p
-tagget ændres til eth3
-tag.Automatisk udfyldning henviser nu til
mobile tel
i stedet forphone
.Opdaterede
div[data-processing-order]
ved at tilføjerole="region"
.-
Opdaterede
div[data-announce-change]
med følgende:- tilføjet
role="region"
- indstil
aria-labelledby
, så det matcher med id'et for sidehovedelementet - indstil
aria-describedby
, så det matcher med id'et for indholdscontainerelementet
- tilføjet
-
Opdaterede
div.content-box blank-slate
med følgende:- tilføjet
role="region"
- indstil
aria-labelledby
, så det matcher med id'et for sidehovedelementet
- tilføjet
Gitter for Hurtig betalingsproces er blevet forbedret, så det bruger
ul
- ogli
-elementer i stedet fordiv
.-
Opdaterede ordreoversigten med følgende:
- forbedret overblik over udsalgspris og normalpris
- span er ændret til
dl
-tag - ændrede
del
-tag tildt
- ogdd
-tags.
-
Opdaterede oplysninger om betalingsmetoden med følgende:
-
span.radio__label__accessory
ændret tildiv.radio__label__accessory
-
span.visually-hidden
ændret tilh3.visually-hidden
-
span.payment-icon-list__more
ændret tilli.payment-icon-list__more
-
span.content-box__small-text
ændret tilsmall.content-box__small-text
-