Payments in Browser
PayPal One Touch is a client based method to interact with PayPal that doesn’t require the user to leave your website. Instead a PayPal provided JavaScript SDK is used, which opens the PayPal user journey in a popup.
In order to use the One Touch SDK you will need a Client ID, which you can create in your account on the PayPal developer portal.
Issue a Client Access Token
Your customer’s browser will be making payment processing requests to our APIs. To authenticate these requests you need to issue a Client Access Token. You should issue a new token for every payment session. See the client authorisation API under Cards & Wallets API Endpoints.
One Touch SDK implementation
The PayPal documentation at https://developer.paypal.com/checkout/integrate will guide you through the process. There are three functions to implement which are involved in processing the transaction:
paymentonAuthorizeonCancel
The below code shows how to write these functions when using PayPal via Advanced Payments.
// This object will contain all the settings and state needed to process PayPal One Touch via
// Advanced Payments.
Pay360PayPal = function(installationId, clientAccessToken) {
this.installationId = installationId;
this.clientAccessToken = clientAccessToken;
// Update this url to api.pay360.com when integrating to a production account.
this.baseUrl = "https://api.mite.pay360.com/acceptor/rest/paypal/transactions/" + installationId;
this.paymentUrl = this.baseUrl + "/payment";
this.authorizeUrl = this.baseUrl + "/{{txnId}}/authorize";
this.cancelUrl = this.baseUrl + "/{{txnId}}/cancel";
this.txnId = 0;
}
// Instantiate the Pay360PayPal object with your installation id and a client access token.
var pay360PayPal = new Pay360PayPal("123456", "eyJ0eXA...");
paypal.Button.render({
...
payment: function(data, actions) {
// This is the Advanced Payments payment request api object.
// The full payment api request is supported.
// There is no need to provide a 'paymentMethod' section.
var paymentBody = {
transaction : {
currency : "GBP",
amount : "10.99",
description : "transaction description",
merchantRef : "txnReference",
commerceType : "ECOM"
}
};
var paymentOptions = {
headers: {
"Authorization": "Bearer " + pay360PayPal.clientAccessToken,
"Content-Type": "application/json"
},
json: paymentBody
};
return paypal.request.post(pay360PayPal.paymentUrl, null, paymentOptions).then(function(paymentResponse) {
if (paymentResponse.transaction.status === "PENDING") {
var checkoutToken = paymentResponse.paymentMethod.paypal.checkoutToken;
pay360PayPal.txnId = paymentResponse.transaction.transactionId;
return checkoutToken;
} else {
// error handling.
// However in most cases if there is an error processing the transaction, we will
// return a non 2xx http response code and the PayPal onError() function will be
// called instead of this.
}
});
},
onAuthorize: function(data, actions) {
var authorizeOptions = {
headers: {
"Authorization": "Bearer " + pay360PayPal.clientAccessToken
}
};
return paypal.request.post(pay360PayPal.authorizeUrl.replace("{{txnId}}", pay360PayPal.txnId), null, authorizeOptions).then(function(authorizeResponse) {
// If the transaction status is pending then PayPal returned an error indicating the
// user needs to go through the PayPal process again. Typically to select a different
// funding source due to insufficient funds.
if(authorizeResponse.transaction.status === "PENDING") {
actions.restart();
} else if (authorizeResponse.transaction.status === "SUCCESS") {
// show confirmation
} else {
// error handling.
// However in most cases if there is an error processing the transaction, we will
// return a non 2xx http response code and the PayPal onError() function will be
// called instead of this.
}
});
},
onCancel: function(data, actions) {
var cancelOptions = {
headers: {
"Authorization": "Bearer " + pay360PayPal.clientAccessToken
}
};
return paypal.request.post(pay360PayPal.cancelUrl.replace("{{txnId}}", pay360PayPal.txnId), null, cancelOptions).then(function(cancelResponse) {
});
},
});