React Native

integrating react native with judopay prerequisites you have set up your judopay account sign up for your sandbox account , to receive access to your judopay dashboard and the sandbox environment your judoids and tokens are configured and enabled as appropriate for more information on permissions, see introduction docid\ s 8hoamytkgy13t0p657 you have the development environment set up for react native, here for mobile apps, we recommend using payment session authentication the judopay sdk for react native is available as a node package and can be added to the project via npm or yarn judopay's react native examples use typescript, however you can also use javascript adding and initialising react native to add the judopay react native sdk to your app enter the following line into the terminal `npm install judokit react native` or, `yarn add judokit react native` below is an example of a package json file with the judopay sdk dependency { "name" "my app", "version" "1 0 0", "scripts" { }, "dependencies" { "judo react native" "4 0 0", }, "devdependencies" { }, } to initialise the judopay react native sdk import the judopay class from the judokit react native package import judopay from 'judokit react native'` provide your token and secret or paymentsession `const judopay = new judopay({token "my token", secret "my secret"})` or, `const judopay = new judopay({token "my token", paymentsession "my payment session"})` you can generate a payment session using one of our server sdk integration docid\ mzcnx mb0nespjb4mjpz4 , or by making a call to our transaction api set the sdk in sandbox mode `judopay issandboxed = true` making a transaction the method for making a transaction and configuring the flow making a transaction async invoketransaction( type judotransactiontype, configuration judoconfiguration ) promise\<judoresponse> parameter description type judotransactiontype an enum value that describes the transaction type configuration judoconfiguration a configuration object that configures the payment flow the response is handled via a promise which resolves to a judoresponse to make a transaction transaction example import judopay, {judoauthorization, judoreference, judoamount, judoconfiguration, judotransactiontype} from 'judokit react native' const authorization judoauthorization = { token "my token", paymentsession "payment session", } const reference judoreference = { consumerreference 'consumer ref', } const amount judoamount = { value '0 05', currency 'gbp', } const configuration judoconfiguration = { judoid 'my judo id', amount, reference, } try { const judo = new judopay(authorization) const response = await judo invoketransaction(judotransactiontype payment, configuration) if (response != null) { console log('receipt', json stringify(response)) } else { console error('error', "invoketransaction returned null response") } } catch (error) { console error(error) } react native server to server transactions this feature is intended to allow the merchant to access cardtokens stored securely by the mobile sdk, to then use the cardtoken to make a server to server transaction using our server sdk integration docid\ mzcnx mb0nespjb4mjpz4 , or our transaction api this is typically intended for scenarios where a merchant might want to process a merchant initiated transaction using the card details stored by the consumer specify a server to server transaction set the judotransactionmode to servertoserver when calling the judo methods judo invokepaymentmethodscreen(judotransactionmode servertoserver, configuration) then((response) => {/ handle response /}) catch((error) => {/ handle error /}) specify an apple pay™ server to server transaction judo invokeapplepay(judotransactionmode servertoserver, configuration) then((response) => {/ handle response /}) specify a google pay™ server to server transaction judo invokegooglepay(judotransactionmode servertoserver, configuration) then((response) => {/ handle response /}) token payments if you are building your own card wallet, and not using a ui you can make a /preauth or /payment using a stored card token to make a token payment or pre auth token payment use the /savecard endpoint to return a card token for details on endpoints, see transaction api reference the method signature is as follows public async performtokentransaction( mode judotransactionmode, configuration judoconfiguration, cardtoken string, securitycode string, cardholdername string, cardscheme string ) promise\<judoresponse>; parameter description mode judotransactionmode a value used to specify either a pre auth or payment configuration judoconfiguration an object used to configure the payment flow cardtoken string the card token used for the token transaction securitycode string the saved card token security code cardholdername string the saved card token cardholder name cardscheme string the saved card token scheme name, for example visa mastercard amex the result is a judoresponse object containing the transaction details response example try { const judo judo = new judopay('mytoken', 'mysecret') const configuration judoconfiguration = { judoid 'myjudoid', amount amount, reference reference } const response = await judo performtokentransaction( judotransactionmode payment, configuration, 'card token ', '123', 'john doe', 'visa' ) // handle response } catch (exception) { // handle exception } 3d secure 2 for react native judokit reactnative supports 3d secure 2 (emv 3ds) 3d secure 2 is available in judokit react native version 3 0 0 or higher, and is available on github 3d secure 2 payment example const uiconfiguration judouiconfiguration = { isavsenabled false, shouldpaymentmethodsverifysecuritycode false, shouldpaymentbuttondisplayamount false, shouldpaymentmethodsdisplayamount false, // sets whether the billing information screen should be presented to the consumer shouldaskforbillinginformation true } // if you don't want to present the billing info screen to the consumer, set the address instead const cardaddress judoaddress = { line1 'my house', line2 'my street' town 'my town', postcode 'tr14 8pa', countrycode 382, } const judo judoconfiguration = { judoid '123456', amount, reference, paymentmethods judopaymentmethod card, supportedcardnetworks judocardnetwork visa, uiconfiguration, cardaddress, // sets the value for challenge request indicator, // possible values // challengerequestindicator nopreference // challengerequestindicator nochallenge // challengerequestindicator challengepreferred // challengerequestindicator challengeasmandate challengerequestindicator challengerequestindicator challengeasmandate, // sets the value for sca exemption, // possible values // scaexemption lowvalue // scaexemption securecorporate // scaexemption trustedbeneficiary // scaexemption transactionriskanalysis scaexemption scaexemption lowvalue, // email address emailaddress 'email\@me com', // sets the maximum timeout for 3ds 2 0 transactions in minutes, // always use 2 characters when setting the timeout threedstwomaxtimeout 30, // sets phone number country code phonecountrycode '44', // phone number mobilenumber '0799999999', } customising the payment experience configuring the react native payment flow every transaction requires a judoconfiguration object to be passed as a parameter the judoconfiguration object sets all the required parameters for configuring the payment flow, including all optional parameters to customise the payment experience to configure the payment flow import judoconfiguration judoamount judoreference from the judokit react native package import judopay, { judoconfiguration, judoamount, judoreference } from 'judokit react native' ui configuration you can customise the payment experience for the consumer by configuring the following ui behaviour properties in the judouiconfiguration object the judouiconfiguration object allows you to enable | disable the address verification service enable | disable consumers entering the cvv/cv2 code show | hide the amount in the payment button show | hide the amount in the payments widget enable | disable consumers entering their billing information set a custom theme to create the judouiconfiguration object const uiconfiguration judouiconfiguration = { isavsenabled false, shouldpaymentmethodsverifysecuritycode true, shouldpaymentbuttondisplayamount true, shouldpaymentmethodsdisplayamount true, shouldaskforbillinginformation true, theme theme, } const configuration judoconfiguration = { uiconfiguration uiconfiguration, parameter description isavsenabled boolean required required enable | disable the address verification service when making card transactions default = false shouldpaymentmethodsverifysecuritycode boolean required required enable | disable the merchant entering the cv2 code for every token payment | pre auth transaction in the payment method selection screen default = true shouldpaymentbuttondisplayamount boolean required required show | hide the transaction amount on the payment | pre auth button default = false shouldpaymentmethodsdisplayamount boolean required required show | hide the transaction amount from the payments widget default = true shouldaskforbillinginformation boolean optional optional show | hide the billing information screen default = false theme object optional optional customise various elements of the payment screen for example bodyfont bodysize buttoncolor buttontitlecolor setting up an incremental authorisation the incremental authorisation feature allows you to increment the value of your original pre authorisation for scenarios where you need to charge your customer a higher total amount by incrementing the pre authorisation value, you will be able to capture the total amount that you wish to charge your customer when you are ready this feature is not available with all acquirers check with our customer service team, or your account manager for your eligibility to use this the isallowincrement flag is a part of the main judo configuration config object, and can be set directly in the configuration object set the isallowincrement flag to true if present = it is automatically applied for preauth requests if no value is provided = then false is set by default example val configuration judoconfiguration = { isallowincrement true, }; setting up the transaction amount to set up the transaction amount setting up transaction amount example //from the imported judoamount interface interface judoamount { value string, currency string, } //create a new variable that implements the judoamount interface //add the variable to the configuration object const amount judoamount = { value '999 99', currency 'gbp' } setting the primary account details to set the primary account details when using an alternative payment method, see react native docid\ ur8qjj7tjdxyhf4e5aojp it is mandatory for merchants who have an mcc code of 6012 to submit additional information about the primary account holder in primaryaccountdetails property for payment pre authorisation interface judoaccountdetails { name? string, accountnumber? string, dateofbirth? string, postcode? string, } to set the primary account details to be sent with the transaction const myaccountdetails judoaccountdetails = { accountnumber '4015434234', name 'test account name', } const configuration judoconfiguration = { primaryaccountdetails myaccountdetails, } the above properties are optional , so set only the ones you need changing default supported card networks to change the default supported card networks set your own supportedcardnetworks value enum judocardnetwork { visa = 1 << 0, mastercard = 1 << 1, maestro = 1 << 2, amex = 1 << 3, chinaunionpay = 1 << 4, jcb = 1 << 5, discover = 1 << 6, dinersclub = 1 << 7, all = 1 << 8, } for the purpose of this exercise, visa and mastercard are set as the only supported card networks const cardnetworks = judocardnetwork visa | judocardnetwork mastercard to explicitly set all card networks to be supported, instead of using the | operator to combine all the card networks, set const cardnetworks = judocardnetwork all setting a card address to set the card address when using an alternative payment method, see react native docid\ ur8qjj7tjdxyhf4e5aojp to send additional card address details with the transaction set the cardaddress parameter in the judoconfiguration object const mycardaddress judoaddress = { line1 'my example street 42', postcode 'ex4 mpl3', town 'example town', countrycode 832, } const configuration judoconfiguration = { cardaddress mycardaddress } changing the default payment methods by default, all payment methods are displayed in the payments widget (as long as the required parameters are set) as a merchant, you have flexibility over which payment methods to support change the paymentmethods property to the judopaymentmethod value in the judoconfiguration instance an example of the judopaymentmethod enum judopaymentmethod { card = 1 << 0, applepay = 1 << 1, googlepay = 1 << 2, paybybankapp = 1 << 4, all = 1 << 5, } you can set multiple values using the | operator for the purpose of this exercise, card and apple pay™ are set as available payment methods const mypaymentmethods = judopaymentmethod card | judopaymentmethod applepay to explicitly state all payment methods are to be displayed, instead of using the | operator to combine all the payment methods, set const mypaymentmethods = judopaymentmethod all adding a new language you can add any language you need override some or all of the translations of an existing language the judokit react native sdk supports en (default), fr, es for your react native project (the wrapper for the android and ios sdks), language translations can override the strings using the standard android and ios localisation processes use existing translations to use or test one of judopay's default language transalations, simply change the language on your android settings → system → language & input → languages ios settings → general → language & region → iphone language the translation will be applied automatically override existing translations to override existing translations, follow the android or ios localisation modifying steps below identify the sdk string keys the sdk uses string resources defined in its strings xml file you can find the list of all string keys below to modify the value of an existing string, add a new one with the same key to the strings xml file in your android project you will find this located in the "res/values directory" this will override the sdk value of this string if your app supports multiple languages , ensure you add translations for the overridden string in the appropriate values \<language code> folders for example values fr for french or values es for spanish identify the sdk string keys the sdk uses string resources defined in its localizable strings file you can find the list of all string keys below to modify the value of an existing string, add a new one with the same key to the localizable strings file in your ios project this will override the sdk value of this string, if your app supports multiple languages , ensure you add translations for the overridden string in the corresponding lproj directories for example fr lproj for french, es lproj for spanish also, remember to declare any new language in " project > info > localizations " this will ensure the translation is recognised by the framework to add a new language to add a new language, follow the android or ios steps below identify the sdk string keys and prepare the translations for all values in the language you wish to add or override you can find the list of all string keys below in your app’s "res/values directory", create a new folder for the language you want to add make sure you use the correct language and region codes, for example ‘ values es ’ for spanish ‘ values zh rcn ’ for simplified chinese inside the new language folder, create a strings xml file if one does not already exist within the newly created strings xml ensure you provide the translations for all string keys used by the sdk, otherwise the translation may end up incomplete when overriding or adding new string keys, be careful to avoid string key conflicts between the sdk and your app any matching key will cause your app’s value to override the sdk's default value, which could potentially lead to unintended behaviour, or mismatched translations identify the sdk string keys and prepare the translations for all values in the language you wish to add or override you can find the list of all string keys below in your app’s project directory, create a new lproj folder for the language you want to add ensure you use the correct language and region codes for example es lproj for spanish zh hans lproj for simplified chinese inside the new language folder, create a localizable strings file if one does not already exist within the newly created localizable strings file ensure you provide the translations for all string keys used by the sdk, otherwise the translation may end up incomplete declare the new language in " project > info > localizations " this will ensure the translation is recognised by the framework when overriding or adding new string keys, be careful to avoid string key conflicts between the sdk and your app any matching key will cause your app’s value to override the sdk's default value, which could potentially lead to unintended behaviour, or mismatched translations string keys \<string name="add address line">add address line (optional)\</string> \<string name="add card">add card\</string> \<string name="address line 1 hint">address line 1\</string> \<string name="address line 2 hint">address line 2\</string> \<string name="address line 3 hint">address line 3\</string> \<string name="back">back\</string> \<string name="billing details title">billing details\</string> \<string name="button done">done\</string> \<string name="button edit">edit\</string> \<string name="button scan card">scan card\</string> \<string name="cancel">cancel\</string> \<string name="ca province hint">province or territory\</string> \<string name="card holder hint">cardholder name\</string> \<string name="card holder name required">cardholder name is required\</string> \<string name="card holder name special chars">cardholder name can't contain numbers or special characters\</string> \<string name="card holder name too short">cardholder name can't be less than 4 characters\</string> \<string name="card number hint">card number\</string> \<string name="card subtitle">ending\</string> \<string name="cards">cards\</string> \<string name="check amex security code">check your cid\</string> \<string name="check card">check card\</string> \<string name="check card number">invalid card number\</string> \<string name="check china union pay security code">check your cvn2\</string> \<string name="check cvv">check your cvv\</string> \<string name="check expiry date">check expiry date\</string> \<string name="check jcb security code">check your cav2\</string> \<string name="check mastercard security code">check your cvc2\</string> \<string name="check visa security code">check your cvv2\</string> \<string name="choose payment method">choose a payment method\</string> \<string name="city hint">city\</string> \<string name="close">close\</string> \<string name="connected cards">connected cards\</string> \<string name="continue text">continue\</string> \<string name="country canada">canada\</string> \<string name="country hint">country\</string> \<string name="country other">other\</string> \<string name="country uk">uk\</string> \<string name="country usa">usa\</string> \<string name="customize card">customise card\</string> \<string name="cvv hint">cvv\</string> \<string name="date hint">mm/yy\</string> \<string name="default amex card title">my american express card\</string> \<string name="default chinaunionpay card title">my china union pay card\</string> \<string name="default dinnersclub card title">my diners club card\</string> \<string name="default discover card title">my discover card\</string> \<string name="default jcb card title">my jcb card\</string> \<string name="default maestro card title">my maestro card\</string> \<string name="default mastercard card title">my mastercard card\</string> \<string name="default visa card title">my visa card\</string> \<string name="delete">delete\</string> \<string name="delete card alert message">are you sure you want to delete this card from your wallet?\</string> \<string name="delete card alert title">delete card?\</string> \<string name="dismiss">dismiss\</string> \<string name="email hint">email\</string> \<string name="error amex not supported">american express is not supported\</string> \<string name="error card title too long">card name cannot be longer than %1$d characters\</string> \<string name="error country should not be empty">please select a country\</string> \<string name="error diners club not supported">diners club is not supported\</string> \<string name="error discover not supported">discover is not supported\</string> \<string name="error jcb not supported">jcb is not supported\</string> \<string name="error maestro not supported">maestro is not supported\</string> \<string name="error mastercard not supported">mastercard is not supported\</string> \<string name="error province territory should not be empty">please select a province or territory\</string> \<string name="error state should not be empty">please select a state\</string> \<string name="error union pay not supported">china unionpay is not supported\</string> \<string name="error unknown not supported">unknown card network is not supported\</string> \<string name="error visa not supported">visa is not supported\</string> \<string name="expire soon">expire soon\</string> \<string name="expired">expired\</string> \<string name="invalid address">please enter a valid address\</string> \<string name="invalid city">please enter a valid city\</string> \<string name="invalid email address">please enter a valid email\</string> \<string name="invalid mobile number">please enter a valid mobile number\</string> \<string name="invalid phone country code">please enter a valid country code\</string> \<string name="invalid postcode">invalid postcode entered\</string> \<string name="invalid zip code">invalid zip code entered\</string> \<string name="is expired">is expired\</string> \<string name="mobile number hint">mobile number\</string> \<string name="no">no\</string> \<string name="no cards added">you didn’t add any cards yet add one right now or use any of the payment methods below\</string> \<string name="no connected cards">you didn't connect any cards yet\</string> \<string name="ok">ok\</string> \<string name="pay amount">pay %1$s\</string> \<string name="pay now">pay now\</string> \<string name="phone country code hint">+()\</string> \<string name="post code hint">postcode\</string> \<string name="processing">transaction pending…\</string> \<string name="register card">register card\</string> \<string name="retry">retry\</string> \<string name="save">save\</string> \<string name="save as default payment method">save as default payment method\</string> \<string name="save card">save card\</string> \<string name="scan card confirm">got it\</string> \<string name="scan card go to settings">go to settings\</string> \<string name="scan card no permission message">permissions must be granted in order to use the scan card functionality please go to settings and toggle camera on\</string> \<string name="scan card no permission title">camera permissions not granted\</string> \<string name="secure checkout">secure checkout\</string> \<string name="secure server transmission">your card details are encrypted using tls before transmission to our secure payment service provider \</string> \<string name="there is a delay">this is taking longer than expected please wait…\</string> \<string name="three d secure check">3d secure check\</string> \<string name="transaction successful">transaction success!\</string> \<string name="transaction unsuccessful">transaction unsuccessful please try again\</string> \<string name="unable to process request error title">unable to process\</string> \<string name="us state hint">state\</string> \<string name="will expire soon">will expire soon\</string> \<string name="yes">yes\</string> \<string name="you will pay">you will pay\</string> "add card" = "add card"; "apple pay" = "apple pay"; "button done" = "done"; "button edit" = "edit"; "button scan card" = "scan card"; "button add address line card" = "+ add address line (optional)"; "cancel" = "cancel"; "back" = "back"; "card holder email hint" = "email"; "card holder hint" = "cardholder name"; "card holder country hint" = "country"; "card holder state hint" = "state"; "card holder province hint" = "province or territory"; "card holder phone hint" = "mobile number"; "card holder city hint" = "city"; "card holder adress line hint" = "address line"; "card number hint" = "card number"; "card subtitle" = "ending"; "cards" = "cards"; "check card" = "check card"; "check expiry date" = "check expiry date"; "choose payment method" = "choose a payment method"; "connected cards" = "connected cards"; "country canada" = "canada"; "country other" = "other"; "country uk" = "uk"; "country usa" = "usa"; "customize card" = "customise card"; "default amex card title" = "my american express card"; "default chinaunionpay card title" = "my china union pay card"; "default dinersclub card title" = "my diners club card"; "default discover card title" = "my discover card"; "default jcb card title" = "my jcb card"; "default maestro card title" = "my maestro card"; "default mastercard card title" = "my mastercard card"; "default visa card title" = "my visa card"; "delete" = "delete"; "delete card alert message" = "are you sure you want to delete this card from your wallet?"; "delete card alert title" = "delete card?"; "dismiss" = "dismiss"; "error" = "error"; "enter card title" = "enter a card title "; "error card title too long" = "card name cannot be longer than 28 characters"; "error invalid card number desc" = "invalid card number"; "error unsupported card desc" = " is not supported"; "expire soon" = "expire soon"; "expired" = "expired"; "expiry date" = "mm/yy"; "invalid expiry date value" = "invalid date value entered"; "invalid email value" = "invalid email entered"; "invalid phone code value" = "invalid phone code entered"; "invalid phone value" = "invalid phone entered"; "invalid postcode" = "invalid postcode entered"; "invalid zip code" = "invalid zip code entered"; "invalid email address" = "please enter a valid email"; "invalid state should not be empty" = "please select a state"; "invalid province territory should not be empty" = "please select a province or territory"; "invalid address" = "please enter a valid address"; "invalid mobile number" = "please enter a valid mobile number"; "invalid city" = "please enter a valid city"; "is expired" = "is expired"; "no cards added" = "you didn’t add any cards yet add one right now or use any of the payment methods below"; "no connected cards" = "you didn't connect any cards yet"; "ok" = "ok"; "pay amount" = "pay %@"; "pay now" = "pay now"; "continue" = "continue"; "post code hint" = "postcode"; "email hint" = "email"; "phone country code hint" = "+()"; "mobile number hint" = "mobile number"; "address line 1 hint" = "address line 1"; "address line 2 hint" = "address line 2"; "address line 3 hint" = "address line 3"; "city hint" = "city"; "processing" = "transaction pending "; "register card" = "register card"; "retry" = "retry"; "save" = "save"; "save as default payment method" = "save as default payment method"; "save card" = "save card"; "scan card confirm" = "got it"; "scan card go to settings" = "go to settings"; "scan card hint subtitle" = "we will do our best to scan it"; "scan card hint title" = "position card in this frame"; "scan card no permission message" = "permissions must be granted in order to use the scan card functionality please go to settings and toggle camera on"; "scan card no permission title" = "camera permissions not granted"; "scan card restricted message" = "scan camera functionality is not available due to restriction on your device"; "scan card restricted title" = "camera access restricted"; "scan card simulator title" = "camera not available on ios simulators"; "secure server transmission" = "your card details are encrypted using tls before transmission to our secure payment service provider "; "three d secure check" = "3d secure check"; "transaction delayed" = "this is taking longer than expected "; "transaction successful" = "transaction success!"; "transaction timeout" = "transaction timed out!"; "transaction unsuccessful" = "card transaction unsuccessful please try again"; "unknown card network" = "unknown card network"; "will expire soon" = "it will expire soon"; "you will pay" = "you will pay"; "error apple pay not supported desc" = "apple pay is not supported on this device "; "error apple pay not supported reason" = "an apple pay transaction was attempted on a device that either does not support, or does not have apple pay set up "; "error request failed desc" = "the request has failed or responded without data "; "error request failed reason" = "the transaction response returned without any data or there was an error while forming the request "; "error request timeout desc" = "the request has timed out "; "error request timeout reason" = "the request failed to complete in the allocated time frame "; "error json serialization desc" = "the response data could not be serialized into a json "; "error json serialization reason" = "the server responded with an invalid data format "; "error user cancelled desc" = "the transaction was cancelled by the user "; "error user cancelled reason" = "the user closed the transaction flow without completing the transaction "; "error internet connection desc" = "no internet connection found "; "error internet connection reason" = "the request could not be sent due to no internet connection "; "error invalid card number reason" = "the number entered is not a valid card number or is not supported by the sdk "; "error unsupported card reason" = "the number entered belongs to a card network that is not allowed by the merchant "; "error response parse desc" = "unexpected response format returned "; "error response parse reason" = "the response did not contain some of the required parameters needed to complete the transaction "; "error no message desc" = "the request has failed with no underlying message "; "error no message reason" = "the server responded with an error "; "error apple pay missing items desc" = "the apple pay configuration must have at least one payment item "; "error apple pay missing items reason" = "the payment items array of the apple pay configuration is either empty or missing "; "error apple pay missing shipping desc" = "the apple pay configuration must have at least one shipping method "; "error apple pay missing shipping reason" = "shipping methods must be set if the required shipping contact fields are specified "; "error judo id missing desc" = "the judo id parameter cannot be null or empty "; "error judo id missing reason" = "the required judo id parameter has not been set in the judo configuration "; "error invalid judo id desc" = "the judo id entered is invalid "; "error invalid judo id reason" = "the specified judo id parameter has an incorrect format "; "error currency missing desc" = "currency cannot be null or empty "; "error currency missing reason" = "the required currency parameter has not been set in the judo configuration "; "error invalid currency desc" = "the specified currency code is not supported "; "error invalid currency reason" = "the currency code entered is either not a valid iso 4217 code or is not supported by the sdk "; "error apple pay merchant id missing desc" = "the apple pay merchant id cannot be null or empty "; "error apple pay merchant id missing reason" = "apple pay needs a valid merchant id to be able to identify your transaction "; "error invalid country code desc" = "the specified country code is not supported "; "error invalid country code reason" = "the country code entered is either not a valid iso 3166 2 letter code or is not supported by the sdk "; "error apple pay config missing desc" = "the apple pay transaction has not been configured "; "error apple pay config missing reason" = "no apple pay configuration was found in your judo configuration object "; "error invalid amount desc" = "the amount specified should be a positive number "; "error invalid amount reason" = "the amount parameter has either not been set or has an incorrect format "; "error invalid consumer ref desc" = "the consumer reference entered is invalid "; "error invalid consumer ref reason" = "the consumer reference parameter has either not been set or has an incorrect format "; "error invalid token payment transaction type desc" = "token payments transactions only support jptransactiontypepayment and jptransactiontypepreauth as the transaction type "; "error invalid token payment transaction type reason" = "invalid transaction type passed to token payment transaction configuration "; "error preauth properties conflict desc" = "both delayedauthorisation and allowincrement flags can't be set to true "; "error preauth properties conflict reason" = "preauth properties conflict"; "error recommendation server prevented transaction desc" = "the recommendation server has prevented this transaction "; "error recommendation server prevented transaction reason" = "it appears that the transaction you attempted to make has been blocked by the recommendation server "; "error recommendation server request failed desc" = "there was an error when retrieving the recommendation response "; "error recommendation server request failed reason" = "we are unable to process this request as there was an error when retrieving the recommendation response "; "error recommendation invalid authorization type desc" = "payment session is required for using the recommendation feature "; "error recommendation invalid authorization type reason" = "to use the recommendation feature, it is mandatory to have a payment session "; "error recommendation invalid url desc" = "the url field in the recommendation configuration is required "; "error recommendation invalid url reason" = "it is mandatory to provide a url in the recommendation configuration "; "error recommendation invalid rsa public key desc" = "the rsapublickey field in the recommendation configuration is required "; "error recommendation invalid rsa public key reason" = "it is mandatory to provide a rsapublickey in the recommendation configuration "; "error recommendation invalid timeout desc" = "the timeout value provided in the recommendation configuration must be a number "; "error recommendation invalid timeout reason" = "the timeout in the recommendation configuration should be an instance of nsnumber "; "error missing recurring description desc" = "recurring payment description cannot be null"; "error missing recurring description reason" = "the required recurring payment parameter has not been set in the apple pay configuration "; "error missing recurring management url desc" = "recurring payment management url cannot be null"; "error missing recurring management url reason" = "the required recurring payment parameter has not been set in the apple pay configuration "; "error missing recurring regular billing desc" = "recurring payment regular billing cannot be null"; "error missing recurring regular billing reason" = "the required recurring payment configuration sub object is missing "; "error missing recurring amount desc" = "recurring payment amount cannot be null"; "error missing recurring amount reason" = "the required recurring payment parameter has not been set in the apple pay configuration "; "error missing recurring label desc" = "recurring payment label cannot be null"; "error missing recurring label reason" = "the required recurring payment parameter has not been set in the apple pay configuration "; "continue text" = "continue"; "add address line" = "add address line (optional)"; "billing details title" = "billing details"; "back" = "back"; "card holder name required" = "cardholder name is required"; "card holder name too short" = "cardholder name can't be less than 4 characters"; "card holder name special chars" = "cardholder name can't contain numbers or special characters"; "check security code" = "check your "; react native styles and themes to make custom fonts work, they must be added to your client app first styling the judotheme property handles the font families font sizes font colors please note this will only apply styles and themes to the ios platform custom fonts const theme judotheme = { largetitlefont "quicksand bold", largetitlesize 18, titlefont "quicksand italic", titlesize 16, headlinefont "quicksand regular", headlinesize 15, headlinelightfont "quicksand regular", headlinelightsize 15, bodyfont "quicksand regular", bodysize 15, bodyboldfont "quicksand bold", bodyboldsize 17, captionfont "quicksand regular", captionsize 18, captionboldfont "quicksand light", captionboldsize 16, jpblackcolor "#262626", jpdarkgraycolor "#999999", jpgraycolor "#e5e5e5", jplightgraycolor "#f6f6f6", jpredcolor "#e21900", jpwhitecolor "#ffffff", buttoncolor "#999999", buttontitlecolor "#000000", backbuttonimage "back button png", buttoncornerradius 5 } an example of a complete custom theme const mytheme judotheme = { largetitlefont 'avenir', largetitlesize 20, buttoncolor '#ffffff', buttoncornerradius 4 0, backbuttonimage 'my custom icon filename' } const uiconfiguration judouiconfiguration { , theme mytheme, , } const configuration judoconfiguration = { , uiconfiguration uiconfiguration, … } payments widget to set up the payments widget for react native set up the judoconfiguration instance const configuration judoconfiguration = { paymentmethods judopaymentmethods all, applepayconfiguration applepayconfiguration, googlepayconfiguration googlepayconfiguration, } judo invokepaymentmethodscreen(judotransactionmode payment, configuration) then((response) => {/ handle response /}) catch((error) => {/ handle error /}) setting up the transaction reference setting up the transaction reference enables you to also set up your consumerreference and paymentreference which are included within the transaction these references help you to identify your consumer and transaction to set up the transaction reference from the imported judoreference interface interface judoreference { consumerreference string, paymentreference? string, metadata? record\<string, string>, } 2 use the interface to set your consumerreference a unique reference to identify your consumer 3 you can also set optional fields, for example paymentreference a unique payment reference for the transaction metadata any additional organisation or system details to be included in the transaction for example a consumerreference is set const reference judoreference = { consumerreference 'my consumer reference' } for the purpose of this exercise, the amount reference judoid are set in the judoconfiguration instance const configuration judoconfiguration = { judoid 'my judo id', amount amount, reference reference, } all the required parameters are now set up, and ready to make a transaction a complete judoconfiguration example import { judoamount, judoreference, judoconfiguration } from 'judokit react native' const amount judoamount = { value '1 00', currency 'gbp', } const reference judoreference = { consumerreference 'myconsumerreference', paymentreference 'mypaymentreference', metadata { 'metadatakey' 'metadatavalue', 'metadatakey2' 'metadatavalue', } } const configuration judoconfiguration = { judoid 'my judo id', amount amount, reference reference, } adding payment methods before you can process apple pay™ payments with judopay, you will need to set up apple pay™ apple pay™ is not supported on all apple devices prerequisite you have set up your apple pay™ developer account to get your merchant ids for more details, see ios docid 09p1cru0cbxjkzea 0zpi before invoking any apple pay™ functionality within your app, test if it is supported on the device by performing these checks use pkpaymentauthorizationviewcontroller canmakepayments checks if the device supports apple pay™ and has it enabled queries both the device hardware and whether apple pay™ is enabled in the user’s region use pkpaymentauthorizationviewcontroller canmakepaymentsusingnetworks a more detailed check to query whether a user has a registered card with particular card schemes useful if you do not accept all card types both methods are explained in the apple developer documentation here integrating apple pay™ for react native step one configure apple pay™ create an applepayconfiguration instance const applepayconfiguration judoapplepayconfiguration = { merchantid 'my merchant id', countrycode 'gb', paymentsummaryitems \[item], requiredbillingcontactfields judocontactfield name | judocontactfield email, requiredshippingcontactfields judocontactfield all, shippingmethods \[delivery], shippingtype judoshippingtype delivery, returnedinfo judoreturnedinfo all, recurringpaymentrequest? judoapplepayrecurringpaymentrequest, } parameter description merchantid string required required your apple pay™ merchant id this confirms you are able to accept payments countrycode string required required an iso 3166 1 alpha 2 country code paymentsummaryitems string required required the list of items requiredbillingcontactfields judocontactfield optional optional select between one or more billing contact fields for example email phone name requiredshippingcontactfields judocontactfield optional optional select between one or more shipping contact fields for example email phone name shippingmethods judoshippingmethod\[] optional optional describe some of the shipping methods that you provide although this parameter is optional, if you set shipping contact fields as required, you must also provide the shipping type and shipping methods shippingtype judoshippingtype optional optional select a shipping type delivery shipping store pickup service pickup although this parameter is optional, if you set shipping contact fields as required, you must also provide the shipping type and shipping methods returnedinfo judoreturnedinfo optional optional select to receive some of the billing and/or shipping details as a response property recurringpaymentrequest optional optional enables the apple pay™ recurring payment functionality step two check availability and make an apple pay™ transaction async displayapplepaysheet() { try { const judo = new judopay(this getauthorization()) const config = this state configuration const isapplepayavailable = await judo isapplepayavailablewithconfiguration(config) if (isapplepayavailable) { const response = await judo invokeapplepay(judotransactionmode payment, config) if (response != null) { this props navigation navigate('receipt', { receipt response }) } } else { await showmessage('error', 'applepay is not available for given configuration') } } catch (error) { await showmessage('error', error message) } } displaying apple pay™ as a payment method to display apple pay™ in the payments widget add the applepayconfiguration property to the judoconfiguration instance const configuration judoconfiguration = { judoid 'my judo id', amount amount, reference reference, applepayconfiguration applepayconfiguration, } call the applepay method and handle the response import { , judotransactionmode, } from 'judokit react native' judo invokeapplepay(judotransactionmode payment, configuration) then((response) => {/ handle response /}) catch((error) => {/ handle error /}) use the judotransactionmode property for payments or pre auths with apple pay™ making an apple pay™ transaction an example of an apple pay™ transaction import { , judotransactionmode, } from 'judokit react native' // describing the purchased items const itemone judopaymentsummaryitem = { label 'apple iphone xr', amount '699 95', } const itemtwo judopaymentsummaryitem = { label 'apple leather case', amount '55 50', } const total judopaymentsummaryitem = { label 'tim apple', amount '755 45', } // describe the shipping method const delivery judoshippingmethod = { identifier 'delivery id', label 'delivery', detail 'deliver to your home address', amount '15 0', } the last item in the judopaymentsummaryitem list must always represent the total amount of the previous items apple pay™ recurring payments judopay provides support for apple pay™ recurring payments this feature enables merchants to utilise the apple pay™ recurring payment token , by also being able to use the token for merchant initiated transactions (mits) the apple pay™ recurring payment token is generated by apple pay's servers and sent to judopay, where it is securely stored in return, you will receive a judopay token that is linked to the stored apple pay™ token this judopay token can then be used for future mits for more information on mits, see merchant initiated transactions docid\ ek1dldo8cgr9di226zlyf you are responsible for initiating merchant initiated transactions setting up the apple pay™ transaction for recurring payments to use the apple pay™ recurring payments feature, begin with an initial apple pay™ transaction with these additional steps attach the recurring payment configuration object recurringpaymentrequest to your applepayconfiguration set in step one recurring payment request // create a regular billing item const regularbilling judorecurringpaymentsummaryitem = { label "premium music subscription", amount "9 99", intervalunit judocalendarunit month, intervalcount 1 }; // create the recurring payment request configuration object const managementurl = "https //example com/manage subscription"; const request judorecurringpaymentrequest = { paymentdescription "monthly subscription for premium music service", &#x9;managementurl managementurl, regularbilling regularbilling, billingagreement "by subscribing, you agree to monthly billing of £9 99 for the music service until canceled " }; // assign the recurring payment request to the apple pay configuration (if not done already on apple pay configuration initialization) applepayconfiguration recurringpaymentrequest = request; judorecurringpaymentrequest name type description paymentdescription string (non null / required) provide a description of the recurring payment this will be displayed in the payment sheet to the consumer regularbilling judorecurringpaymentsummaryitem (non null / required) the regular billing cycle for the recurring payment includes start date end date an interval an interval count managementurl string (non null / required) a url to a web page where the consumer can update or delete the payment method for the recurring payment note it is best practice to use a universal link for this url the same link can direct the consumer to either a page in the app (if the app is installed), or to a page on the merchant’s website for more information on adopting universal links, see universal links billingagreement string (nullable / optional) maximum string length = 500 characters a localised billing agreement this agreement is displayed via the payment sheet to the consumer before they authorise the payment note this string can include information on the recurring payment amount recurring intervals other payment conditions information on how the consumer can cancel payments this string is not intended to replace any payment terms that you provide outside of the apple pay™ payment sheet the apple pay™ payment sheet displays the text of the billingagreement string for long billingagreement strings that can not fit on the payment sheet, these will appear truncated with an ellipsis consumers can select the billing details on the payment sheet to read the full text judorecurringpaymentsummaryitem name type description label string (non null / required) a short, localised description of the item note provide the label in title case for example vat tax gift wrap and card discount ensure you omit any punctuation and whitespace after the label the label is formatted for display by the framework amount string (non null / required) the amount of the summary item to specify the currency, set a value for the currency property on the apple pay configuration object intervalunit judocalendarunit (nullable / optional) the amount of time in calendar units that represents a fraction of the total payment interval the supported judocalendarunit intervalunits are minute hour day month year intervalcount number (nullable / optional) the number of interval units that make up the total payment interval note the default value for the interval count is 1 startdate string (nullable / optional) the date of the first payment formatted as iso 8601 string "2025 01 17t14 35 22 123z the default value is nil which requests the first payment as part of the initial transaction enddate string (nullable / optional) the date of the final payment the default value is nil which specifies no end date the above configuration object property descriptions are extracts from the apple developer documentation for a full description on all the object properties, see the apple pay documentation 2 to initiate a series of scheduled / recurring payments, set the initialrecurringpayment flag in the judopay configuration object to true initialrecurringpayment true let configuration = {} as judoconfiguration; ( ) configuration = { configuration, isinitialrecurringpayment true, }; if you plan to use the judopay token for unscheduled / ad hoc mit transaction(s) in the future, leave the initialrecurringpayment flag = false (default) integrating google pay™ for react native prerequisite you have set up your google pay™ payments profile for more details, see create a payments profile to make a google pay™ transaction, or add google pay™ as a payment method in the payment method selection screen provide a judogooglepayconfiguration property example of a googlepayconfiguration property import { judogooglepayconfiguration, judogooglepayenvironment, judoaddressformat, judobillingaddressparameters, judoshippingaddressparameters } from 'judokit react native' const billingparameters judobillingaddressparameters = { addressformat judoaddressformat minimal, isphonenumberrequired true, } const shippingparameters judoshippingaddressparameters = { allowedcountrycodes \["gb", "us"], isphonenumberrequired false, } const googlepayconfiguration judogooglepayconfiguration = { countrycode 'gb', environment judogooglepayenvironment test, isemailrequired true, isbillingaddressrequired true, billingaddressparameters billingparameters, isshippingaddressrequired true, shippingaddressparameters shippingparameters } field description countrycode string required required an iso 3166 1 alpha 2 country code environment judogooglepayenvironment enum required required sets the google pay™ environment to either test production in order to go live you will need to have set up your google pay™ api merchant live account isemailrequired boolean optional optional specifies if the user is required to add their email address isbillingaddressrequired boolean optional optional specifies if the user is required to add their billing information billingaddressparameters judobillingaddressparameters optional optional describes the full or minimum billing requirements phone number although this parameter is optional, if you set billing / shipping fields as required, you must also provide the billing / shipping parameters isshippingaddressrequired boolean optional optional specifies if the user is required to add their shipping information shippingaddressparameters judobillingaddressparameters optional optional describes the allowed country codes and phone number requirements although this parameter is optional, if you set billing / shipping fields as required, you must also provide the billing / shipping parameters displaying google pay™ as a payment method to display google pay™ in the payments widget add the googlepayconfiguration property to the judoconfiguration instance const configuration judoconfiguration = { judoid 'my judo id', amount amount, reference reference, googlepayconfiguration googlepayconfiguration, } invoke the googlepay method and handle the response judo invokegooglepay(judotransactionmode payment, configuration) then((response) => {/ handle response /}) use the judotransactionmode property for payments or preauths with google pay making a google pay™ transaction example of a google pay™ transaction import { , judotransactionmode, } from 'judokit react native' judo invokegooglepay(judotransactionmode payment, configuration) then((response) => {/ handle response /}) catch((error) => {/ handle error /})