A single Spreedly gateway provides many methods, like: credit_card, credit_card with 3DSecure, sprel (for offsite payment). Therefore, you can use one Spreedly gateway for all the payment types.
To learn about the details, see documentation.
Gateway configuration
To start with the configuration, make sure you have the Spreedly environment credentials prepared.
To create a gateway on Spreedly side, execute the following request:
The SPREEDLY_TOKEN is a result of base64 of environment_key:access_secret.
Result: after sending the request you should get a response that contains the token value.
SPREEDLY_GATEWAY_KEY - Spreedly gateway token that was returned when you configured the payment gateway on the Spreedly side.
SPREEDLY_ENVIRONMENT_KEY - Spreedly environment key that you got from Emporix support team.
SPREEDLY_ACCESS_SECRET - Spreedly secret key that you got from Emporix support team.
SPREEDLY_SIGNATURE_SECRET - Spreedly signature secret that you got from Emporix support team.
SPREEDLY_SCA_PROVIDER - The sca_provider.token you got in the previous request.
TEST_SCENARIO - This value should be provided only for testing purposes (it shouldn’t be provided for production configuration). Valid options are: authenticated, not_authenticated and challenge. We recommend testing the flow especially with the challenge mode, where an additional offsite step is required when an order is being created.
Spreedly Sprel
Spreedly Sprel is an off-site payment, which means that the payment is finished outside of your storefront. In this situation, the payment provider needs to know where the end user should be redirected when the payment is done. Therefore, you need to provide a {REDIRECT_URL} value in the configuration, for example: https://storefront.emporix.io/my-tenant/payment-callback.
To create this payment method, execute the following request:
window['SpreedlyExpress'].onPaymentMethod(function(token, paymentMethod) {
// store token, because it should be send in the checkout request
window['SpreedlyExpress'].unload()
});
Adjust the checkout request, by adding the following payment information to the payload:
The thing that may be needed for you is paymentDetails section. In case of on-site payment no further action is required.
Credit cards with 3DS
Adjust Spreedly listener.
window['SpreedlyExpress'].onPaymentMethod(function(token, paymentMethod) {
let browserInfo = window['Spreedly'].ThreeDS.serialize('4')
// store the browserInfo, because it should be send in the checkout
// store token, because it should be send in the checkout request
window['SpreedlyExpress'].unload()
});
Adjust the checkout request by adding the following payment information to the payload:
The provider should always be payment-gateway if you’re using payment-gateway service.
The token is the token returned by Spreedly express.
The customer is the customer identifier.
The browserInfo is the one that was generated in the onPaymentmethod listener.
When the checkout is done and the order is completed, it should be checked if the 3DS challenge is needed. You can check that by adding the html code and JS part.
const [challenge, setChallenge] = useState(true)
useEffect(() => {
if(payment?.paymentMode?.scaProviderToken) {
var lifecycle = new window['Spreedly'].ThreeDS.Lifecycle({
environmentKey: {SPREEDLY_ENVIRONMENT_KEY},
hiddenIframeLocation: 'device-fingerprint',
challengeIframeLocation: 'challenge',
transactionToken: {AUTHORIZATION_TOKEN},
challengeIframeClasses: '3dsModal'
})
var on3DSstatusUpdatesFn = function(threeDsStatusEvent) {
if (threeDsStatusEvent.action === 'succeeded') {
setChallenge(false)
} else if (threeDsStatusEvent.action === 'error') {
// present an error to the user to retry
} else if (threeDsStatusEvent.action === 'finalization-timeout') {
// present an error to the user to retry
} else if (threeDsStatusEvent.action === 'challenge') {
setChallenge(true)
document.getElementById('challenge-modal').classList.remove('hidden');
}
}
window['Spreedly'].on('3ds:status', on3DSstatusUpdatesFn)
lifecycle.start()
} else {
setChallenge(false)
}
}, [])
If a challenge is needed, then an appropriate modal is displayed. Emporix system is notified about the result of the operation by an appropriate callback that is sent directly to the payment-gateway service by Spreedly.
Spreedly Sprel
To use Spreedly Sprel as the off-site payment solution, you have to generate a token in Spreedly.
You can do this in two ways:
All the payment information is stored, because we need this value during the checkout call. The payment object during the checkout request should look like:
Pay attention to the paymentDetails.externalPaymentRedirectURL value. To finish the payment, you should redirect the user to the URL. Emporix payment gateway is notified about the result of the payment process by Spreedly callback functionality.
EMPORIX_AUTH_TOKEN - The standard access token. To check how to get the token see documentation.
EMPORIX_AUTH_TOKEN - The standard access token. To check how to get the token see documentation.
To learn more about 3DS2, see the documentation.
EMPORIX_AUTH_TOKEN - The standard access token. To check how to get the token see documentation.
The modeId is the payment-mode identifier - the id returned by .
The modeId is the payment-mode identifier - the id returned by .
Display a button that does the form submission - as described in .
