1. TRU Connect   
  2. JavaScript Library
  3. Toevoegingen

Apple Pay voor JavaScript Library

​  Laatst bijgewerkt: 

 

applepayicon-achtergrond.png

Wat is Apple Pay?

Apple Pay is een mobiele betaalservice op basis van een portemonnee van Apple Inc. waarmee gebruikers betalingen kunnen afhandelen met een iPhone, iPad of Mac. Klanten profiteren van een vertrouwde en gestroomlijnde betaalervaring, waarbij hun factuurgegevens vooraf kunnen worden ingevuld, klaar voor aankoop. Klanten worden snel geverifieerd door hun vinger op de ingebouwde lezer te plaatsen of door gezichtsherkenning. Apple Pay gebruikt tokens om ervoor te zorgen dat er geen gevoelige betalingsinformatie wordt opgeslagen bij Apple, op het apparaat van de klant of op je eigen servers.

In dit artikel wordt uitgelegd hoe je Apple Pay kunt integreren in je betaaloplossing met behulp van onze JavaScript Library.

Alleen in aanmerking komende klanten kunnen transacties uitvoeren via Apple Pay. Klanten moeten bijvoorbeeld een ondersteund Apple apparaat gebruiken en zich in een land bevinden waar Apple Pay actief is. Raadpleeg de documentatie van Apple (link naar externe site) voor de volledige lijst met vereisten.

 

 

In mei 2024 hebben we het integratieproces met Apple Pay

Als je Apple Pay vóór deze wijziging hebt geïntegreerd met Trust Payments :

 

 

Vereisten

Zorg ervoor dat u aan de volgende vereisten voldoet voordat u Apple Pay in uw kassa-oplossing integreert:

Uw acquiring bank moet
Apple Pay ondersteunen met Trust Payments.

  Neem contact op met het Support Team als u het niet zeker weet

abank-nachtergrond.png

Uw server moet aan de volgende eisen voldoen:

Om je oplossing te kunnen testen, moet je toegang hebben tot een apparaat dat de sandboxtests van Apple voor Apple Pay ondersteunt.

  Ondersteunde apparaten

Je hebt een sandboxtesteraccount nodig om testkaarten aan je portemonnee toe te voegen, zodat je Apple Pay testtransacties kunt verwerken.

  Leer meer over zandbakken

 

Uw domeinen instellen en verifiëren

cluttereddesk-nachtergrond.png

  1. Begin met het downloaden van het onderstaande domeinverificatiebestand en plaats dit op je domeinen waar Apple Pay moet worden weergegeven:

      Klik hier om te downloaden

    U moet elk domein voorbereiden door het ontvangen domeinverificatiebestand op deze locatie te hosten, aangezien dit publiekelijk zal worden opgevraagd om het domeinregistratieproces te voltooien:

    https://[DOMAIN_NAME]/.well-known/apple-developer-merchantid-domain-association

    Ensure the file and the hidden .well-known directory are given read and execute permissions. (For Unix, this is typically done by using the command chmod 755 <filename or folder>).

      Als onderdeel van het Apple Pay validatieproces vereist Apple dat het validatiebestand een HTTP 200 OK respons geeft. Elke andere HTTP-antwoordcode, zoals 301 Permanent verplaatst, wordt behandeld als een mislukking. Om ervoor te zorgen dat Apple Pay goed werkt, moet het validatiebestand zo worden geconfigureerd dat het altijd een HTTP 200 OK-antwoord terugstuurt.

  2. Laat je geautoriseerde contactpersoon contact opnemen met ons Support Team en een verzoek indienen om Apple Pay in te schakelen op je site referentie(s). In uw e-mail vragen we u een CSV-bestand bij te voegen met een lijst van alle sitereferenties die u wilt registreren en hun bijbehorende domein(en).

    Het formaat van het CSV-bestand moet als volgt zijn:

    Site reference, Domain name

    Bijvoorbeeld:

    site10001, example.com
site10002, trustpayments.com
test_site10003, trustpayments.com

    Neem alle relevante test- en live sitereferenties en domeinen op in het bestand.

    Formatteer domeinen zoals deze: example.com
    Stuur ons dit niet! www.example.com

    Je kunt tot 99 domeinen registreren per site referentie.

  3. Ons Support Team zal je op de hoogte houden zodra het registratieproces voor de opgegeven domeinen is voltooid en je kunt beginnen met het verwerken van Apple Pay transacties.

    Als je eerder Apple Pay hebt geïntegreerd met behulp van onze JavaScript Library , maar sindsdien het nieuwe registratieproces hebt overgenomen dat hierboven is beschreven, moet je ervoor zorgen dat de eigenschap merchantId in de configuratie die wordt doorgegeven aan de st.js ApplePay methode is bijgewerkt om uw site referentie te specificeren in plaats van de Apple Pay Merchant Id. De domeinen zijn nu namelijk gekoppeld aan uw site referentie in plaats van uw Apple Pay Merchant Id.

 

Configureer Apple Pay oplossing

 

 

Nadat u uw domeinen hebt ingesteld en geverifieerd voor Apple Pay, moet u integreren met behulp van een van de volgende stromen die hieronder worden beschreven:

Stroom 1 - JavaScript bepaalt wanneer de AUTH wordt ingediend

    1. Wanneer de klant op de knop Apple Pay drukt, krijgt hij het betalingsformulier Apple Pay te zien.
    2. De klant keurt de betaling goed met Touch ID, Face ID of zijn wachtwoord.
    3. Wanneer de klant akkoord gaat met de betaling, wordt een AUTH verzoek ingediend bij Trust Payments.
    4. Trust Payments neemt contact op met de overnemende bank om autorisatie aan te vragen voor de transactie.
Instructies voor Stroom 1

Uw JWT configureren

JSON Web Tokens (JWT) zijn een open, industriestandaard RFC 7519 methode om gegevens veilig tussen twee partijen te verzenden. Ze beschermen tegen de wijziging van kritieke transactiegegevens (bv. het af te schrijven bedrag) door onbevoegde partijen tijdens de betalingssessie.

Daarom is dit veld vereist om betalingen te verwerken met Trust Payments.

Klik hier om te leren hoe je een JWT genereert

Afhankelijk van uw voorkeursconfiguratie moet u misschien een extra veld in de payload bij het genereren van de JWT voor uw afrekenformulier.

Om de klant in staat te stellen een factuuradres of leveringsadres te kiezen dat is opgeslagen op zijn Apple-account vanaf de betalingsfiche (in plaats van een adres dat is ingevoerd bij het afrekenen), moet u de optionele velden billingcontactdetailsoverride en customercontactdetailsoverride respectievelijk opnemen met de waarde "1".

Anders hoeft het JWT niet te worden gewijzigd om Apple Pay transacties te verwerken.

 

Apple Pay bibliotheek

Om onze ST.js library in staat te stellen de knop Apple Pay in te sluiten op de pagina die vervolgens de portemonnee sheet start, moet je een geschikte content wrapper toewijzen en de juiste ST.js library aanroepen doen.

Maak eerst een container waarin je de knop Apple Pay wilt plaatsen en geef deze een geschikte ID:

<div id="st-apple-pay"></div>

Eenmaal geconfigureerd zal je Apple Pay knop verschijnen als een child van dit div element. Schakel vervolgens de functie Apple Pay in binnen de JS library.

Als we een scenario bekijken waarbij je Apple Pay's wallet-sheet wilt gebruiken om je klant $10 in rekening te brengen, met behulp van een gekoppelde credit- of debitcard. Je zou dat kunnen bereiken met de volgende code, waarbij st verwijst naar je instantie van SecureTrading:

st.ApplePay({
  buttonStyle: 'white-outline',
  buttonText: 'plain',
  merchantId: 'test_site12345',
  paymentRequest: {
    countryCode: 'US',
    currencyCode: 'USD',
    merchantCapabilities: ['supports3DS', 'supportsCredit', 'supportsDebit'],
    supportedNetworks: ["visa","masterCard","amex"],
    requiredBillingContactFields: ["postalAddress"],
    requiredShippingContactFields: ["postalAddress","name", "phone", "email"],
    total: {
      label: 'Trust Payments Merchant',
      amount: '10.00'
    }
  },
  buttonPlacement: 'st-apple-pay'
});

Het eindresultaat is een HTML-pagina die lijkt op het volgende voorbeeld:

<html>
  <head>
  </head>
  <body>
    <div id="st-notification-frame"></div>
    <form id="st-form" action="https://www.example.com"/>
    <div id="st-apple-pay"></div>
    <script src="https://cdn.eu.trustpayments.com/js/latest/st.js"></script>
    <script> 
      (function() {
        var st = SecureTrading({ 
          jwt: 'INSERT YOUR JWT HERE', 
        }); 
        st.ApplePay({
          buttonStyle: 'white-outline',
          buttonText: 'plain',
          merchantId: 'test_site12345',
          paymentRequest: {
            countryCode: 'US',
            currencyCode: 'USD',
            merchantCapabilities: ['supports3DS', 'supportsCredit', 'supportsDebit'],
            supportedNetworks: ["visa","masterCard","amex"],
            requiredBillingContactFields: ["postalAddress"],
            requiredShippingContactFields: ["postalAddress","name", "phone", "email"],
            total: {
              label: 'Trust Payments Merchant',
              amount: '10.00'
            }
          },
          buttonPlacement: 'st-apple-pay'
        });
      })(); 
    </script>
  </body>
</html>

Verderop in dit document kun je de mogelijke waarden voor elk van de bovenstaande velden bekijken, evenals andere optionele velden die hierboven niet zijn vermeld.

 

Specificatie veld

 

Knopvelden

  Veld Formaat Beschrijving
X1-EN.png buttonStyle Alfanumeriek Wordt gebruikt om het uiterlijk van de knop Apple Pay te veranderen.
Klik hier voor meer informatie (link naar externe site).
X1-EN.png buttonText Alfanumeriek Wordt gebruikt om de tekst te wijzigen die verschijnt op de knop Apple Pay .
Klik hier voor meer informatie (link naar externe site).
X2-EN.png buttonPlacement Alfanumeriek

Standaard zoekt de bibliotheek naar een div id genaamd "st-apple-pay" om te bepalen waar de knop Apple Pay op het formulier moet komen.

Als u niet de standaard div id, moet u uw aangepaste id opgeven als de waarde van de buttonPlacement eigendom. b.v.

buttonPlacement: 'apple-button'

Apple heeft richtlijnen gepubliceerd voor de beste positie van de Apple Pay knop op uw kassa.
Klik hier voor meer informatie (link naar externe site).

 

Handelsvelden

  Veld Formaat Beschrijving
X1-EN.png merchantId Alfanumeriek
& underscore (50)

De waarde die is toegewezen aan merchantId moet de site referentie zijn die is gekoppeld aan het domein dat de ApplePay methodezoals gespecificeerd in de CSV die naar het Support Team is gestuurd tijdens het domeinverificatieproces.

De merchantId die hier wordt ingediend moet dezelfde zijn als de sitereference in het JWT.
X1-EN.png paymentRequest Object Dit object bevat informatie over het betalingsverzoek. De specificatie weerspiegelt die van de officiële Apple Pay Ontwikkelaar Documentatie.
X1-EN.png   countryCode Alpha (2) De landcode van de handelaar in ISO2a-formaat.
X1-EN.png   merchantCapabilities Lijst De door de merchant ondersteunde betalingsmogelijkheden. Het veld moet bevatten “supports3DS” (om Touch ID / Face ID verificatie mogelijk te maken), en ten minste één van de volgende extra waarden:
  • “supportsCredit” - Om creditcardbetalingen mogelijk te maken.
  • “supportsDebit” - Om pinbetalingen mogelijk te maken.
Zie voor een volledige specificatie Apple's eigen documentatie (link naar externe site).
X1-EN.png   supportedNetworks Lijst

De betalingsnetwerken die door de handelaar worden ondersteund.

U moet deze eigenschap instellen op een of meer van de betalingsnetwerkwaarden die zijn gespecificeerd in de officiële Apple Pay API-specificatie.

We ondersteunen alle betalingsnetwerken tot versie v14 van Apple Pay en laten automatisch alle niet-ondersteunde netwerken weg.

Als de browser/device van een klant v14 ondersteunt en er een volledige lijst met betalingsnetwerken is opgegeven, dan wordt de volledige lijst doorgegeven aan Apple. Als de klant alleen een browser/apparaat heeft dat compatibel is met v6, dan beperken we de volledige lijst tot wat tot v6 werd ondersteund.

Let op: Je moet ervoor zorgen dat elk ondersteund betalingsnetwerk in de lijst ook is geconfigureerd als een ondersteund netwerk op je site referentie. Neem contact op met ons ondersteuningsteam voor meer informatie.
X3-EN.png   supportedCountries Array van strings

Een lijst met landcodes van twee tekens die u opgeeft (in ISO2a-formaat). Apple Pay transacties zijn beperkt tot kaarten die zijn uitgegeven in landen die in deze eigenschap worden vermeld.

De supportedCountries lijst heeft geen invloed op de Munt die voor de transactie wordt gebruikt, en geldt voor alle betaalkaarten in de portemonnee.

 

Transactievelden

  Veld Formaat Beschrijving
X3-EN.png callbacks Object dat alle callback-definities bevat 

Ondersteunde callbacks zijn onder andere:

  • onShippingMethodSelected
  • onShippingContactSelected
X3-EN.png     onShippingMethodSelected functie

De callback-functie onShippingMethodSelected wordt geactiveerd wanneer een klant een andere verzendmethode selecteert op het betalingsblad. Met deze functie kun je de transactiegegevens bijwerken die aan de klant worden getoond.

Handtekening:

function (data, actions) {
  console.log(data.shippingOption)
  actions.resolve({ newTotal: { ... } });
}

gegevens: Bevat informatie over de geselecteerde verzendmethode.

acties: Bevat de functie Oplossen, die je gebruikt om het betalingsblad bij te werken met de nieuwe transactiegegevens.

Ga voor een volledig overzicht van het dataobject en de structuur voor de bijgewerkte transactiegegevens naar Apple Pay Ontwikkelaar Documentatie.

Bij het oplossen van de callback kun je optioneel een JSON Web Token (JWT) opgeven die de oorspronkelijke JWT die tijdens de initialisatie werd gebruikt, overschrijft. Dit zorgt ervoor dat het uiteindelijke geautoriseerde bedrag overeenkomt met het totaal dat op het betalingsformulier wordt getoond.

 
X3-EN.png     onShippingContactSelected functie

 De callback-functie onShippingContactSelected wordt aangeroepen wanneer een klant een ander verzendadres selecteert. Hierdoor kun je zowel de beschikbare verzendmethoden als de transactiegegevens die worden weergegeven op het betalingsblad bijwerken.

Handtekening:

function (data, actions) {
  console.log(data.shippingContact)
  actions.resolve({ newTotal: { ... } });
}

gegevens: Bevat de contactgegevens voor verzending, die Apple Pay redigeert om de privacy te beschermen. Deze gegevens zijn voldoende voor het berekenen van belastingen of verzendkosten. acties: Bevat de functie Oplossen om het betalingsblad bij te werken met nieuwe transactiegegevens en verzendmethoden.

Raadpleeg de Apple Pay Ontwikkelaar Documentatievoor gedetailleerde informatie over het data-object en hoe de bijgewerkte gegevens te structureren.

Net als bij onShippingMethodSelected kun je een JWT opgeven om de oorspronkelijke te overschrijven, zodat het totaalbedrag overeenkomt met wat wordt weergegeven op het betalingsblad.

 
X1-EN.png paymentRequest Object Dit object bevat informatie over de betaling, die in het eerste verzoek naar Apple wordt gestuurd (onze Javascript stuurt dit).
X2-EN.png   requiredBillingContactFields Lijst Op het betalingsformulier wordt dit veld gebruikt om de klant te vragen om vóór de aankoop het factuuradres van zijn Apple Pay -account te kiezen. Het betalingsblad zal GEEN factuuradresgegevens weergeven die bij de kassa zijn ingevoerd. U kunt de volgende veldwaarden opgeven:
  • “postalAddress”

Dit is vereist wanneer de klant de aankoop moet voltooien met behulp van de velden voor het factuuradres die zijn opgeslagen op zijn Apple Pay -account.
X2-EN.png   requiredShippingContactFields Lijst Op het betalingsformulier wordt dit veld gebruikt om de klant te vragen het leveringsadres van zijn/haar voorkeur te kiezen via zijn/haar Apple Pay account, vóór de aankoop. Het betalingsformulier zal GEEN leveringsadresgegevens weergeven die bij de kassa zijn ingevoerd. U kunt de volgende veldwaarden opgeven:
  • “postalAddress”
  • “name”
  • “phone”
  • “email”

Dit is nodig wanneer de klant de aankoop moet afronden met behulp van de velden voor het leveringsadres die zijn opgeslagen op zijn Apple Pay account.
X3-EN.png   verzendmethoden  Lijst van woordenboeken

Met de eigenschap shippingMethods kun je een lijst met verzendopties definiëren waaruit je klanten kunnen kiezen in het betalingsblad.

Je kunt een onbeperkt aantal verzendmethoden aanbieden. Raadpleeg voor meer gedetailleerde richtlijnen voor het structureren van uw verzendmethoden de 

Apple Pay Ontwikkelaar Documentatie
X3-EN.png   shippingType Alpha

Het VerzendType is een optionele eigenschap die aangeeft hoe de bestelling van de klant wordt uitgevoerd, bijvoorbeeld of de bestelling wordt opgehaald in de winkel of wordt afgeleverd op een gespecificeerd adres. Ga naar Apple Pay Ontwikkelaar Documentatie over shippingType om alle mogelijke waarden voor deze eigenschap te bekijken.
X1-EN.png   currencyCode Alpha (3) De transactie Munt code in ISO3a formaat.
X1-EN.png   total N/A Een post die het totaal van de betaling weergeeft.
X1-EN.png     amount Numeriek inclusief decimaal (14) Het bedrag van de transactie in hoofdeenheden, waarbij een decimale punt wordt gebruikt om decimale waarden aan te geven, zodat €10 wordt teruggegeven als 10.00. Dit moet hetzelfde bedrag zijn als binnen de payload van het JWT. Het is essentieel dat het in het JWT opgegeven bedrag correct is, omdat dit de waarde is die bepaalt hoeveel de klant moet afschrijven.
X1-EN.png     label Alfanumeriek, inclusief symbolen Dit is een opmerking die op het betalingsblad Apple Pay naast het totaalbedrag moet worden weergegeven voordat de klant met de betaling instemt.

 

 

Uw integratie verbeteren

In het volgende gedeelte worden aanvullende functies van de bibliotheek geïntroduceerd die verder gaan dan de basisbetalingsstroom en waarvoor begrip nodig is van het callback-object dat is ingesteld in de ApplePay configuratie.

Terugbellen

Indien nodig accepteert de ApplePay configuratie een callback-object dat een optie biedt om een van onze beschikbare callback-opties te configureren:

  • onShippingMethodSelected
  • onShippingContactSelected

Beide terugbelfuncties hebben dezelfde handtekening:

function (data, actions) {
  // Your implementation here
}

gegevens

De waarden die worden geretourneerd in elk gegevensobject komen overeen met de Apple Pay JS API voor de respectieve callbacks, d.w.z. shippingMethod en shippingContact.

Voor een uitgebreid overzicht van de gegevens die worden geretourneerd voor zowel onShippingMethodSelected & onShippingContactSelected, kunt u de officiële Apple Pay developer documentatie raadplegen:

onShippingMethodSelected

onShippingContactSelected

acties

Het actions argument is een object dat toegang geeft tot een enkele functie, genaamd resolve. Het accepteert een enkel objectargument, waarvan de verwachte waarden overeenkomen met de Apple Pay JS API-contracten die zijn opgesteld door

completeContactSelectie en completeVerzendmethodeSelectie.

De enige afwijking van deze specificatie is dat we je ook toestaan om een extra, maar optionele sleutel op te geven met de naam jwt, die ervoor zorgt dat je JWT payload overeenkomt met de prijzen en adressen op de wallet-sheet.

Uw klanten meerdere verzendopties aanbieden

Als je Apple Pay gebruikt, kun je klanten meerdere verzendopties aanbieden binnen de betaalsheet. Hierdoor kun je keuzes aanbieden zoals standaardverzending en expresverzending, wat de klantervaring verbetert door flexibiliteit en transparantie te bieden met betrekking tot verzendkosten en levertijden.

Je kunt meerdere verzendmethoden implementeren door deze stappen te volgen:

Definieer je verzendmethoden:

Begin met het specificeren van de beschikbare verzendmethoden in de eigenschap shippingMethods van de paymentRequest. Elke verzendmethode moet een label, een beschrijving, de kosten en een unieke identificatie bevatten.

st.ApplePay({
  paymentRequest: {
    shippingMethods: [
      {
        "label": "Free Shipping",
        "detail": "Arrives in 5 to 7 days",
        "amount": "0.00",
        "identifier": "FreeShip"
      },
      {
        "label": "Express Shipping",
        "detail": "Arrives in 1 to 2 days",
        "amount": "10.00",
        "identifier": "ExpressShip"
      }
    ],
    ...
  }
});

Het bovenstaande voorbeeld laat zien hoe je twee verzendopties kunt configureren: Gratis verzending en Expresverzending. Het is mogelijk om zoveel verzendmethoden toe te voegen als nodig is.

Let op: De volgorde van de verzendmethoden die worden weergegeven op de wallet-sheet wordt bepaald op basis van het eerste object in de array, tenzij een ander object in de array expliciet is gemarkeerd met het kenmerk selected: true.

Afhandeling Verzendmethode selecteren:

Gebruik de callback onShippingMethodChanged om te reageren wanneer een klant de verzendmethode uit de beschikbare opties wijzigt. Met deze callback kun je de transactiedetails aanpassen, zoals de totale kosten, op basis van de geselecteerde verzendmethode.

"callbacks": {
    "onShippingMethodSelected": (data, actions) = {
      const payloadJwt = loadYourPayload();

      actions.resolve({
        newTotal: {
          label: "Your Merchant Name",
          amount: calculateTotal(...), // Adjust the total amount
        },
        newLineItems: [
          { label: "Subtotal", amount: ... },
          { label: data.label, amount: ... } // Include selected shipping method
        ],
        jwt: payloadJwt,
      });
    },
  };
}

In dit voorbeeld wordt, wanneer de klant de verzendmethode wijzigt, het totale transactiebedrag opnieuw berekend en wordt het betalingsblad bijgewerkt met de nieuwe gegevens.

Verzendwijze aanpassen (optioneel):

Geef optioneel de eigenschap ShippingType op om te definiëren hoe de bestelling zal worden uitgevoerd, zoals levering op het adres van de klant of afhalen in de winkel. Dit zorgt voor extra duidelijkheid voor de klant.

st.ApplePay({
  paymentRequest: {
    shippingType: "shipping", // Options include 'shipping', 'delivery', 'storePickUp', etc.
    ...
  }
});

Gebruik deze optie om het betalingsformulier af te stemmen op het fulfilmentproces van de merchant.

Een wijziging in het verzendcontact beheren

Apple Pay stelt je ook in staat om scenario's te beheren waarbij een klant zijn contactgegevens voor verzending bijwerkt, zoals het wijzigen van zijn afleveradres. Dankzij deze flexibiliteit kun je de beschikbare verzendmethoden aanpassen en de kosten herberekenen op basis van het nieuwe verzendcontact.

Je kunt een wijziging in de contactgegevens voor verzending beheren door deze stappen te volgen:

Reageren op wijzigingen in verzendcontacten:

De callback onShippingContactSelected wordt geactiveerd wanneer het portefeuilleblad wordt geopend en wanneer een klant de contactgegevens voor verzending wijzigt. Dit is vooral handig voor het herberekenen van verzendkosten, belastingen of zelfs het wijzigen van beschikbare verzendmethoden op basis van het nieuwe adres.


"callbacks": {
    "onShippingContactSelected": (data, actions) = {
      const payloadJwt = loadYourPayload();

      actions.resolve({
        newTotal: {
          label: "Your Merchant Name",
          amount: calculateTotal(...), // Adjust the total amount
        },
        newLineItems: [
          { label: "Subtotal", amount: payload.baseamount },
          { label: "Shipping", amount: calculateShipping(data) } // Recalculate shipping costs
        ],
        newShippingMethods: determineAvailableMethods(data), // Optionally, adjust available shipping methods
        jwt: payloadJwt,
      });
    },
  };
}

In dit voorbeeld verwerkt de SDK de wijziging in het contact voor verzending door de relevante kosten opnieuw te berekenen en het betalingsformulier dienovereenkomstig bij te werken.

Beschikbare verzendmethoden bijwerken:

Pas indien nodig de beschikbare verzendmethoden aan op basis van de nieuwe contactpersoon voor verzending. Het is bijvoorbeeld mogelijk dat bepaalde verzendopties niet beschikbaar zijn voor internationale adressen of specifieke regio's.

function determineAvailableMethods(data) {
  if (data.countryCode === "US") {
    return [
      {
        "label": "Standard Shipping",
        "detail": "Arrives in 5 to 7 days",
        "amount": "5.00",
        "identifier": "StandardShip"
      },
      {
        "label": "Overnight Shipping",
        "detail": "Arrives next day",
        "amount": "25.00",
        "identifier": "OvernightShip"
      }
    ];
  } else {
    return [
      {
        "label": "International Shipping",
        "detail": "Arrives in 10 to 15 days",
        "amount": "20.00",
        "identifier": "IntlShip"
      }
    ];
  }
}

In deze pseudocode worden de beschikbare verzendmethoden aangepast op basis van het land van de klant, waarbij de juiste opties worden aangeboden.

Stroom 2 - Merchant bepaalt wanneer de AUTH wordt ingediend

Voor handelaren die liever de Apple wallettoken gegevens en stuur een API-verzoek om de AUTH zelf te verwerken, de eigenschap merchantUrl moet worden ingesteld in de st.js st.ApplePay methode config.

  1. Wanneer de klant op de knop Apple Pay drukt, krijgt hij het betalingsformulier Apple Pay te zien.
  2. De klant keurt de betaling goed met Touch ID, Face ID of zijn wachtwoord.
  3. merchantUrl krijgt een verzoek van het JavaScript met de portefeuillegegevens.
  4. Een AUTH verzoek wordt verzonden door de merchantUrl naar Trust Payments met behulp van onze Webservices API.
  5. Zodra het betalingsresultaat is teruggestuurd door Trust Payments naar de merchantUrl, moet een antwoord JWT worden teruggestuurd naar de st.js library om de Apple Payment sheet bij te werken.
Instructies voor Flow 2

Eerst voegen we de merchantUrl eigenschap aan de ApplePay methode config:

st.ApplePay({
  buttonStyle: 'white-outline',
  buttonText: 'plain',
  merchantId: 'test_site12345',
  paymentRequest: {
    countryCode: 'US',
    currencyCode: 'USD',
    merchantCapabilities: ['supports3DS', 'supportsCredit', 'supportsDebit'],
    supportedNetworks: ["visa","masterCard"],
    requiredBillingContactFields: ["postalAddress"],
    requiredShippingContactFields: ["postalAddress","name", "phone", "email"],
    total: {
      label: 'Trust Payments Merchant',
      amount: '10.00'
    }
  },
  buttonPlacement: 'st-apple-pay'
  merchantUrl:'<payment URL endpoint>'
});

Het volgende is een voorbeeldverzoek dat vanuit het JavaScript wordt verzonden naar merchantUrl zodra de klant de transactie heeft geauthenticeerd met Touch ID, Face ID of passcode:

{​​​​​​​​​​​​​​
  "request": [
    {​​​​​​​​​​​​​​
      "walletsource": "APPLEPAY",
      "wallettoken": "<json encoded string>",
    }​​​​​​​​​​​​​​
  ],
  "jwt": "<jwt token>",
  "acceptcustomeroutput": "2.00",
  "version": "1.00",
  "versioninfo": "STJS::N/A::3.2.0::N/A"
}​​​​​​​​​​​​​​

Op dit punt wordt aangenomen dat de merchantUrl zal een API-verzoek doen aan Trust Payments om de autorisatie te verwerken.

Voor een voorbeeld van het versturen van de AUTH met behulp van onze webservices API, zie de "AUTH request" sectie op dit artikel.

De merchantUrl response to the st.js should be a JWT response. You will need to parse the AUTH response and include the returned fields in the payload of the response <JWT Token>, as shown below.

{
  jwt:<JWT Token>
}

De payload van de JWT token moet worden gecodeerd met het volgende object:

{​​​​​​​​​​​​​​'version': '1.00',
  'response': [{
    'walletsource': 'APPLEPAY',
    'errormessage': 'Ok',
    'sitereference': '<test or live sitereference>',
    'errorcode': '0',
    'requesttypedescription': 'AUTH'
  }​​​​​​​​​​​​​​]
}​​​​​​​​​​​​​​

 

Het betalingsformulier begrijpen

kaart-appel-achtergrond.png

Voordat de aankoop wordt afgerond, krijgt de klant de betalingsfiche te zien. Dit toont de klant de eerder op zijn account opgeslagen kaarten, opties voor levering, contactinformatie en het volledige aankoopbedrag (inclusief belasting en kosten). Hij kan de bestelling bekijken en eventueel aanpassingen doen alvorens verder te gaan.

Kaart

De klant zal kunnen kiezen uit de kaarten die zijn opgeslagen in zijn   Apple Wallet (link naar externe site).
De voor betaling ondersteunde kaarten zijn afhankelijk van de merchantCapabilities veld bij de kassa.
Bijvoorbeeld als “supportsDebit” niet is opgenomen in het veld, zal de klant zijn betaling met een debetkaart niet kunnen voltooien.

Adres

Het factuur- en verzendadres worden alleen op het betalingsformulier weergegeven als de velden requiredBillingContactFields en requiredShippingContactFields zijn ingediend met geldige waarden. Hierdoor kan de klant kiezen uit factuur- en/of verzendadressen die in zijn Apple-account zijn opgeslagen.

Het op het betalingsformulier geselecteerde adres wordt alleen opgenomen in het AUTH verzoek indien de velden billingcontactdetailsoverride en customercontactdetailsoverride zijn ingediend, met de waarde "1".

CJ16-NL.png

Etiket en bedrag

De mainamount waarde wordt weergegeven op het betalingsformulier, naast de label, geplaatst op de kassa. In het voorbeeld hier is de label werd ingediend met de waarde “Outstanding balance”.

CJ17-EN.png

Authenticatie

De verificatiemethode verschilt afhankelijk van het apparaat waarmee de betaling wordt uitgevoerd. De klant kan worden gevraagd zijn vinger op de Touch ID-sensor te plaatsen of naar de Face ID-sensor te kijken.
 Klik hier voor meer informatie over Apple Pay-verificatie (link naar externe site).

 

Voltooiing van de betaling

 

Zodra de klant met succes is geverifieerd op het betalingsformulier, is de volgende stap het verwerken van de transactie:

  • Als je Flow 1 gebruikt, wordt de autorisatie automatisch uitgevoerd door st.js.
  • Als je Flow 2 gebruikt, moet je configuratie het AUTH verzoek handmatig verwerken met behulp van de Webservices API en het betalingsformulier bijwerken met het resultaat.

Het betalingsblad Apple Pay wordt bijgewerkt om een bericht van succes of mislukking te tonen, afhankelijk van het resultaat van de betaling. Na een succesvol geval wordt de betalingsfiche gesloten om aan te geven dat de betaling is voltooid.

CJ18-EN.png

 

Portal

Net als bij gewone kaartbetalingen kunnen records van alle AUTH transacties die verwerkt zijn met Apple Pay bekeken worden in Portal. Als u Apple Pay transacties bekijkt in Portal, wordt de "Portemonneebron" weergegeven als “APPLEPAY”. Klik hier om onze Portal documentatie te bekijken.

CF19-NL.png

 

Test

 

Uw test site referentie maakt verbinding met de testzandbak Apple Pay . Om betalingen op uw test site referentie te verwerken, moet u dus testkaartgegevens toevoegen aan de Apple Wallet op uw ondersteunde toestel(len).

Je moet de testkaartgegevens gebruiken die Apple je heeft verstrekt. Raadpleeg de volgende URL:
https://developer.apple.com/support/apple-pay-sandbox/ (link naar externe site)

Het bovenstaande veronderstelt dat u op uw apparaat bent ingelogd met een Apple Sandbox-account.

  Houd er rekening mee dat de testkaartgegevens die wij in onze testdocumentatie verstrekken, niet kunnen worden gebruikt bij de verwerking van Apple Pay testtransacties.

Als u User-Defined Rules (UDR) hebt ingeschakeld op uw site referentie(s), moet u ervoor zorgen dat u begrijpt hoe deze uw Apple Pay transacties kunnen beïnvloeden.
Als u hulp nodig hebt, neem dan contact op met ons Support Team.

 

Aanvullende verzoeken uitvoeren

 

Wanneer u e-commerce betalingen verwerkt met Apple Pay, kunt u uw oplossing configureren om extra verzoeken op te nemen om extra taken uit te voeren. Deze zijn als volgt:

U moet de JWT payload om de lijst op te nemen requesttypedescriptions met de volgende ondersteunde verzoekcombinaties:

Als uw app naast Apple Pay ook andere kaartbetalingsmethoden aanbiedt, is het absoluut noodzakelijk dat u "THREEDQUERY" in de lijst requesttypedescriptions opneemt, omdat zonder deze 3-D Secure de authenticatie niet zou worden uitgevoerd voor de voornoemde kaartbetalingsmethoden. Als de klant ervoor kiest om de betaling te verwerken met Apple Pay, zal de gateway met opzet de THREEDQUERY automatisch weglaten, omdat die in dat geval niet nodig is.

  • [“THREEDQUERY”, “ACCOUNTCHECK”]
  • [“THREEDQUERY”, “ACCOUNTCHECK”, “SUBSCRIPTION”]
  • [“THREEDQUERY”, “AUTH”]
  • [“THREEDQUERY”, “AUTH”, “SUBSCRIPTION”]
Was dit artikel nuttig?
0 van de 0 vonden dit nuttig
Avatar
Michael Buckley

 

Meer lezen over dit onderwerp