Johan den Ouden

Ogone module en meertaligheid

Introductie

Smartsite levert de Ogone module waarmee betalingen kunnen worden uitgevoerd bij Ogone. Deze blog beschrijft hoe met de smartsite Ogone module meertaligheid van uw website kan worden ondersteund. De website van de gemeente Westerveen wil een nederlandse en engelse donatie mogelijkheid. In onderstaande blog wordt het bij de module mee geleverde donatie voorbeeld verder uitgewerkt.

Configuratie van smartsite.ogone.config

De smartsite Ogone module wordt geleverd met een configuratie bestand. Binnen dit config bestand kunnen meerdere zogenaamde checkouts worden aangemaakt. Elke checkout bevat de instellingen die nodig zijn om de module met ogone te laten samenwerken in een bepaalde omgeving zoals test, productie, simulatie en dergelijke. Wanneer je de module gebruikt, moet je altijd een checkout opgeven. De module zal dan de instellingen van de opgegeven checkout gebruiken.

We besluiten voor de gemeente Westerveen eerst een test omgeving in te richten. Het is een goed gebruik om in de naam van de checkout dit terug te laten komen. Daarom laten we de checkouts beginnen met Westerveen_Test_. Hierachter plakken we de culture string die we willen ondersteunen, nl-NL en en-US. Dit levert de volgende configuratie op in het smartsite.ogone.config bestand.

XML

Copy Code

(...) <checkout name="Westerveen_Test_en-US">       <checkouturl>https://secure.ogone.com/ncol/test/orderstandard.asp</checkouturl>       <merchantid>SenecaServicedesk</merchantid>       <signatures>          <shainpassphrase>...</shainpassphrase>          <shaoutpassphrase>...</shaoutpassphrase>       </signatures>       <templateurl>/Ogone-example-template.html?paymentstep=template</templateurl>       <redirecturl>/4/payment-handling-eng?paymentstep=feedback</redirecturl> </checkout> <checkout name="Westerveen_Test_nl-NL">       <checkouturl>https://secure.ogone.com/ncol/test/orderstandard.asp</checkouturl>       <merchantid>SenecaServicedesk</merchantid>       <signatures>          <shainpassphrase>...</shainpassphrase>          <shaoutpassphrase>...</shaoutpassphrase>       </signatures>       <templateurl>/Ogone-example-template.html?paymentstep=template</templateurl>       <redirecturl>/4/payment-handling-nl?paymentstep=feedback</redirecturl> </checkout> (...)

Het verschil zit hem hier in de redirecturl. Dit is de url waar de gebruiker uiteindelijk na het betalen naartoe wordt gestuurd in zijn browser. Voor de engeltalige afhandeling wordt de gebruiker gestuurd naar /4/payment-handling-eng?paymentstep=feedback en voor de nederlandstalige variant naar /4/payment-handling-nl?paymentstep=feedback

Let op: voor beide checkouts wordt gebruik gemaakt van dezelfde template. Deze template wordt gebruikt door ogone om de betaal informatie te tonen binnen de look-and-feel van de eigen website. Het is natuurlijk mogelijk om verschillende templates per taal aan te maken of één taalafhandelijke template door de culture mee te geven in de url en de template op deze querystring variable te laten reageren.

Items binnen smartsite

De items binnen de website moeten uiteraard in de juiste taal worden geschreven. In dit geval zijn het vier items en drie translations.

De inhoud van het SXML veld uit de nederlandse variant met titel 'Ogone voorbeeld - doneert u a.u.b.':

Smartsite SXML

Copy Code

<se:itemdata /> <form id="donationForm" action="{channel.link('PAYMENT_NL')}" method="post" >  <div class="fieldset">   <label for="inp_name">Uw naam</label>   <input id="inp_name" name="name"></input><br />   <label for="inp_amount">Vul a.u.b. het bedrag in wat u wilt doneren?</label>   <input id="inp_amount" name="totalamount"></input>   <br />   <button type="submit">Volgende stap</button>  </div> </form> <se:placeholder.addjavascriptonload>  var frm = document.getElementById("donationForm");  frm.onsubmit = function() {   var amnt = document.getElementById("inp_amount");   var rg = /^\d{1,4}([,.]\d{0,2})?$/;   if(!rg.test(amnt.value)){    alert("Vult aub een positieve bedrag onder de duizend in met niet meer dan twee decimalen.");    return false;   }   return true;  } </se:placeholder.addjavascriptonload>

De inhoud van het SXML veld uit de engelse variant met titel 'Ogone example - please donate':

Smartsite SXML

Copy Code

<se:itemdata /> <form id="donationForm" action="{url.addparameter(channel.link('PAYMENT_ENG'),'culture','en-US')}" method="post" >  <div class="fieldset">   <label for="inp_name">Your name</label>   <input id="inp_name" name="name"></input><br />   <label for="inp_amount">Please state the amount you would like to donate</label>   <input id="inp_amount" name="totalamount"></input>   <br />   <button type="submit">Next step</button>  </div> </form> <se:placeholder.addjavascriptonload>  var frm = document.getElementById("donationForm");  frm.onsubmit = function() {   var amnt = document.getElementById("inp_amount");   var rg = /^\d{1,4}([,.]\d{0,2})?$/;   if(!rg.test(amnt.value)){    alert("Please enter a positive amount less than ten thousand with no more than two decimals.");    return false;   }   return true;  } </se:placeholder.addjavascriptonload>

Wanneer de bezoeker het forumulier heeft ingevuld en verstuurt komt debezoeker op een een item waarop wordt gemeld dat de bezoeker gaat betalen en dat de volgende stap de betaalpagina van ogone zal zijn. Op deze pagina wordt de smartsite Ogone module aangeroepen die het juiste formulier zal generen welke naar ogone wordt gepost wanneer de bezoeker gaat betalen. Van belang in dit voorbeeld is dat aan Ogone verteld moet worden in welke taal de schermen van Ogone aan de bezoeker moet worden getoond. Deze taal wordt als verborgen formulier variabele doorgeven aan Ogone.

De Ogone module zet de taal variable standaard op de culture van het kanaal waarop het item wordt gerenderd. Wil je echter dat dit een andere taal is, dan kan jezelf de culture van smartsite zetten waardoor de Ogone module deze zal oppikken.

Voor het tonen van de informatie aan de gebruiker en het opbouwen van het verborgen formulier welke naar Ogone moet worden gepost, heb ik een translation aangemaakt, handlepayment(culture):

Smartsite SXML

Copy Code

{locale.setlocale(translation.arg(culture, default=locale.getculture()))} <se:if expression="request.isposted()">  {buffer.set(amount,convert.tofloat(string.replace(request.form(totalamount),',','.')))} </se:if> {buffer.set(checkout, 'Westerveen_Test_' + locale.getculture())} {buffer.set(culture, locale.getculture())} <se:switch expression="locale.getculture()">  <se:case value="'nl-NL'">   {buffer.set(submitcaption, 'Betalen')}  </se:case>  <se:case>   {buffer.set(submitcaption, 'Go to checkout')}  </se:case> </se:switch> {sml_payment(checkout=$checkout,  amount=buffer.get(amount, default=0),  customername=request.form(name, true, default=''),  catalogurl='GUID-81D4907C239B481180F14CE9288B2ED5',  extradata=$culture,  submitcaption=$submitcaption,  orderid=sxml.decode(string.truncate(request.form(name, true, default=''),16,"") + locale.formatdatetimecustom(datetime.now(),MMddHHmmss)))}

Indien de translation wordt aangeroepen zonder culture mee te geven, wordt de culture van het huidige kanaal gebruikt.

De inhoud van het SXML veld van het nederlandse item (Ogone example - betaling afhandeling) is slecht de aanroep naar de translation handlepayment() zonder argumenten.

Smartsite SXML	Copy Code
{handlepayment()}

De inhoud van het SXML veld van het engelse item (Ogone example - payment handling) is de aanroep naar de translation handlepayment() met als argument de culture code. Draait de engelse site op zijn eigen kanaal dan is dit niet nodig omdat de locale van het kanaal dan al op engels zal staan.

Smartsite SXML	Copy Code
{handlepayment('en-US')}

De melding die aan de bezoeker wordt getoond om naar Ogone te gaan is opgeslagen in de overridable translation pay_FormDescription() van de Ogone smartlet. Ik heb deze gekopieerd, op local gezet en als volgt aangepast

Smartsite SXML	Copy Code
<se:switch expression="locale.getculture()"> <se:case value="'nl-NL'"> <p>U gaat nu naar de ogone site om uw betaling uit te voeren. Uw donatie bedraagt {smartlet.get(amount)} euro.</p> </se:case> <se:case> <p>You will now be transfered to the Ogone site for processing of your payment of {smartlet.get(amount)} euro.</p> </se:case> </se:switch>

Nadat de bezoeker bij Ogone is geweest, komt deze uit eindelijk weer uit op de afhandeling pagina in de juiste taal. Deze roept weer de translation handlepayment() aan, maar met in de url paymentstep=feedback opgenomen. Hierdoor weet de Ogone module dat de feedback stap moet worden uit gevoerd.

Afhankelijk van de status van de betaling zal de bezoeker verschillende teksten worden getoond. Deze teksten zijn opgeslagen in de overridable translation pay_Feedback(paymentstatus). Dit item heb ik weer gekopieerd, op local gezet en aangepast.

Smartsite SXML

Copy Code

<se:switch expression="locale.getculture()">  <se:case value="'nl-NL'">   <se:switch expression="translation.arg(paymentstatus)">    <se:case value="1" rem="Should never be hit">     <p>De status van uw betaling is onzeker. Er is geen goedkeuring of foutmelding binnen gekomen.</p>    </se:case>    <se:case value="2">     <p>Uw betaling is geannuleerd.</p>    </se:case>    <se:case value="3">     <p>Bedankt, {smartlet.get(customername)}, voor uw donatie van {smartlet.get(amount)} {smartlet.get(currency)}.</p>    </se:case>    <se:case value="4">     <p>Uw betaling van {smartlet.get(amount)} {smartlet.get(currency)} is niet geautoriseerd.</p>    </se:case>    <se:case value="5">     <p>Uw betaling van {smartlet.get(amount)} {smartlet.get(currency)} is terug betaald.</p>    </se:case>    <se:case value="6" rem="Possible attempted fraud">     <p>Inconsistent data was received about your payment.</p>    </se:case>   </se:switch>  </se:case>  <se:case>   <se:switch expression="translation.arg(paymentstatus)">    <se:case value="1" rem="Should never be hit">     <p>The status of your payment is uncertain. No notice of payment or failure has been received.</p>    </se:case>    <se:case value="2">     <p>Your payment has been cancelled.</p>    </se:case>    <se:case value="3">     <p>Thank you, {smartlet.get(customername)}, for donating {smartlet.get(amount)} {smartlet.get(currency)}.</p>    </se:case>    <se:case value="4">     <p>Your payment of {smartlet.get(amount)} {smartlet.get(currency)} has not been authorized.</p>    </se:case>    <se:case value="5">     <p>Your payment of {smartlet.get(amount)} {smartlet.get(currency)} has been refunded.</p>    </se:case>    <se:case value="6" rem="Possible attempted fraud">     <p>Inconsistent data was received about your payment.</p>    </se:case>   </se:switch>  </se:case> </se:switch>

Hiermee is de ogone-meertaligheid-cirkel rond.

Instellingen in de ogone kassa

Een veel gemaakt denkfout is dat Ogone maar één return url heeft per kassa en je dus maar naar één item in smartsite kan uitkomen. En omdat je maar op één pagina in smartsite uit kan komen, kan meertaligheid niet ondersteund worden. Het is waar dat slechts één smartsite pagina kan worden aangeroepen door ogone, maar deze pagina is nooit de eindpagina voor de bezoeker. Deze pagina is de zogenaamde 'ogone server tot server' pagina. De bezoeker krijgt deze pagina nooit te zien. Op deze pagina krijgt smartsite door of de bezoeker betaald heeft of niet. Het zou ook hacker gevoelig zijn als deze pagina zichtbaar zou zijn. De 'ogone server to server' pagina handelt de betaling af, werkt de paymentorder tabel bij en geeft aan ogone de redirecturl door. Deze url is afhankelijk van de checkout die ogone mee geeft aan de 'ogone server to server' pagina. Hierdoor wordt de bezoeker naar de juiste eind pagina voor zijn taal gestuurd!

De 'ogone server tot server' url is dus de enige url die kan en moet worden in gesteld bij de kassa instellingen van ogone.

Afsluiting

De oplossing die wordt getoond is bedoeld om met de meertaligheid te starten. Uiteraard kan de vertaling nog veel verder worden door gevoerd. Bijvoorbeeld door onder andere gebruikt te maken van de 'localization' mogelijkheden van smartsite. Ook zou je de taal instellingen kunnen mee geven als parameters aan ogone, welke ogone weer mee post bij de callback vanuit ogone.

Nederlandstalig flow

Afbeeldingen van de nederlandstalige flow.

Stap 1:

Stap 2:

Stap 3:

Stap 4:

Engelstalige flow

Afbeeldingen van de engelstalige flow.

Stap 1:

Stap 2:

Stap 3:

Stap 4: