3DSECURE PAYMENT FLOW in a nutshell

1. Customer opens the checkout form, enters the credit card and clicks on the pay button. (CUSTOMER BROWSER) MERCHANT FRONTEND

(CUSTOMER BROWSER) 1. Customer opens the checkout form, enters the credit card and clicks on the pay button. 2. Merchant backend gets the payment request. It makes validation on the input. MERCHANT BACKEND MERCHANT FRONTEND

(CUSTOMER BROWSER) 1. Customer opens the checkout form, enters the credit card and clicks on the pay button. 2. Merchant backend gets the payment request. It makes validation on the input. 3. Merchant calls 3D init service of Craftgate with card details to initialize 3DSecure payment. MERCHANT BACKEND MERCHANT FRONTEND

(CUSTOMER BROWSER) 1. Customer opens the checkout form, enters the credit card and clicks on the pay button. 2. Merchant backend gets the payment request. It makes validation on the input. 3. Merchant calls 3D init service of Craftgate with card details to initialize 3DSecure payment. 4. Craftgate calls the bank to start 3DSecure payment. MERCHANT BACKEND MERCHANT FRONTEND

(CUSTOMER BROWSER) 1. Customer opens the checkout form, enters the credit card and clicks on the pay button. 2. Merchant backend gets the payment request. It makes validation on the input. 3. Merchant calls 3D init service of Craftgate with card details to initialize 3DSecure payment. 4. Craftgate calls the bank to start 3DSecure payment. 5. Bank returns the html content of the customer verification sms page. MERCHANT BACKEND MERCHANT FRONTEND

(CUSTOMER BROWSER) 1. Customer opens the checkout form, enters the credit card and clicks on the pay button. 2. Merchant backend gets the payment request. It makes validation on the input. 3. Merchant calls 3D init service of Craftgate with card details to initialize 3DSecure payment. 4. Craftgate calls the bank to start 3DSecure payment. 5. Bank returns the html content of the customer verification sms page. 6. Craftgate encrypts the html content of the customer verification sms page by Base64 algorithm and responds back to the merchant with this content. MERCHANT BACKEND MERCHANT FRONTEND

(CUSTOMER BROWSER) 1. Customer opens the checkout form, enters the credit card and clicks on the pay button. 2. Merchant backend gets the payment request. It makes validation on the input. 3. Merchant calls 3D init service of Craftgate with card details to initialize 3DSecure payment. 4. Craftgate calls the bank to start 3DSecure payment. 5. Bank returns the html content of the customer verification sms page. 6. Craftgate encrypts the html content of the customer verification sms page by Base64 algorithm and responds back to the merchant with this content. 7. Merchant decrypts the html content of customer verification sms page and opens it either in the same window, in a popup or in iframe. MERCHANT BACKEND MERCHANT FRONTEND

(CUSTOMER BROWSER) 1. Customer opens the checkout form, enters the credit card and clicks on the pay button. 2. Merchant backend gets the payment request. It makes validation on the input. 3. Merchant calls 3D init service of Craftgate with card details to initialize 3DSecure payment. 4. Craftgate calls the bank to start 3DSecure payment. 5. Bank returns the html content of the customer verification sms page. 6. Craftgate encrypts the html content of the customer verification sms page by Base64 algorithm and responds back to the merchant with this content. 7. Merchant decrypts the html content of customer verification sms page and opens it either in the same window, in a popup or in iframe. 8. Bank sends a pin code via sms to the customer. Customer gets the pin code and enters it to the verification sms page. MERCHANT BACKEND MERCHANT FRONTEND

(CUSTOMER BROWSER) 1. Customer opens the checkout form, enters the credit card and clicks on the pay button. 2. Merchant backend gets the payment request. It makes validation on the input. 3. Merchant calls 3D init service of Craftgate with card details to initialize 3DSecure payment. 4. Craftgate calls the bank to start 3DSecure payment. 5. Bank returns the html content of the customer verification sms page. 6. Craftgate encrypts the html content of the customer verification sms page by Base64 algorithm and responds back to the merchant with this content. 7. Merchant decrypts the html content of customer verification sms page and opens it either in the same window, in a popup or in iframe. 8. Bank sends a pin code via sms to the customer. Customer gets the pin code and enters it to the verification sms page. 9. Verification form with the pin code is send to the bank and the bank verifies that the customer is real and uses its own credit card. MERCHANT BACKEND MERCHANT FRONTEND

(CUSTOMER BROWSER) 10.Bank returns back an html content for redirecting the browser window to Craftgate callback url. MERCHANT BACKEND MERCHANT FRONTEND

(CUSTOMER BROWSER) 10.Bank returns back an html content for redirecting the browser window to Craftgate callback url. 11.Craftgate callback url is called by customer’s browser with the information about customer verification. MERCHANT BACKEND MERCHANT FRONTEND

(CUSTOMER BROWSER) 10.Bank returns back an html content for redirecting the browser window to Craftgate callback url. 11.Craftgate callback url is called by customer’s browser with the information about customer verification. 12.Craftgate updates the payment on their side and returns an html content for redirecting the browser window to merchant callback url. MERCHANT BACKEND MERCHANT FRONTEND

(CUSTOMER BROWSER) 10.Bank returns back an html content for redirecting the browser window to Craftgate callback url. 11.Craftgate callback url is called by customer’s browser with the information about customer verification. 12.Craftgate updates the payment on their side and returns an html content for redirecting the browser window to merchant callback url. 13.Merchant callback url is called by customer’s browser with the information about customer verification. MERCHANT BACKEND MERCHANT FRONTEND SECURITY 
 ACTION 
 REQUIRED

(CUSTOMER BROWSER) 10.Bank returns back an html content for redirecting the browser window to Craftgate callback url. 11.Craftgate callback url is called by customer’s browser with the information about customer verification. 12.Craftgate updates the payment on their side and returns an html content for redirecting the browser window to merchant callback url. 13.Merchant callback url is called by customer’s browser with the information about customer verification. 14.Merchant does request hash validation for security and controls about price and stock. MERCHANT BACKEND MERCHANT FRONTEND REQUEST HASH 
 VALIDATION

(CUSTOMER BROWSER) 10.Bank returns back an html content for redirecting the browser window to Craftgate callback url. 11.Craftgate callback url is called by customer’s browser with the information about customer verification. 12.Craftgate updates the payment on their side and returns an html content for redirecting the browser window to merchant callback url. 13.Merchant callback url is called by customer’s browser with the information about customer verification. 14.Merchant does request hash validation for security and controls about price and stock. 15.Merchant calls 3D Complete service of Craftgate with payment id. MERCHANT BACKEND MERCHANT FRONTEND

(CUSTOMER BROWSER) 10.Bank returns back an html content for redirecting the browser window to Craftgate callback url. 11.Craftgate callback url is called by customer’s browser with the information about customer verification. 12.Craftgate updates the payment on their side and returns an html content for redirecting the browser window to merchant callback url. 13.Merchant callback url is called by customer’s browser with the information about customer verification. 14.Merchant does request hash validation for security and controls about price and stock. 15.Merchant calls 3D Complete service of Craftgate with payment id. 16.Craftgate calls the bank and asks to make the actual payment happen. MERCHANT BACKEND MERCHANT FRONTEND

(CUSTOMER BROWSER) 10.Bank returns back an html content for redirecting the browser window to Craftgate callback url. 11.Craftgate callback url is called by customer’s browser with the information about customer verification. 12.Craftgate updates the payment on their side and returns an html content for redirecting the browser window to merchant callback url. 13.Merchant callback url is called by customer’s browser with the information about customer verification. 14.Merchant does request hash validation for security and controls about price and stock. 15.Merchant calls 3D Complete service of Craftgate with payment id. 16.Craftgate calls the bank and asks to make the actual payment happen. 17.Bank returns back to Craftgate with the status of the payment. MERCHANT BACKEND MERCHANT FRONTEND

(CUSTOMER BROWSER) 10.Bank returns back an html content for redirecting the browser window to Craftgate callback url. 11.Craftgate callback url is called by customer’s browser with the information about customer verification. 12.Craftgate updates the payment on their side and returns an html content for redirecting the browser window to merchant callback url. 13.Merchant callback url is called by customer’s browser with the information about customer verification. 14.Merchant does request hash validation for security and controls about price and stock. 15.Merchant calls 3D Complete service of Craftgate with payment id. 16.Craftgate calls the bank and asks to make the actual payment happen. 17.Bank returns back to Craftgate with the status of the payment. 18.Craftgate returns back to Merchant with the status of 3d complete. Now Merchant knows if payment succeeded or failed. MERCHANT BACKEND MERCHANT FRONTEND

(CUSTOMER BROWSER) OPTION A If merchant uses an iframe or a popup window, 1. It returns an html page redirecting the main browser window to payment success/ failure page back to the customer’s browser. MERCHANT BACKEND MERCHANT FRONTEND

(CUSTOMER BROWSER) OPTION A If merchant uses an iframe or a popup window, 1. It returns an html page redirecting the main browser window to payment success/ failure page back to the customer’s browser. 2. When redirection is done, customer sees the final result in page. MERCHANT BACKEND MERCHANT FRONTEND Congratulations! Payment succeeded

(CUSTOMER BROWSER) OPTION B If merchant uses the whole window, 1. It returns the content of payment success/failure page back to the customer’s browser. MERCHANT BACKEND MERCHANT FRONTEND

(CUSTOMER BROWSER) OPTION B If merchant uses the whole window, 1. It returns the content of payment success/failure page back to the customer’s browser. 2. The customer sees the final result of the payment on page. MERCHANT BACKEND MERCHANT FRONTEND Congratulations! Payment succeeded

(CUSTOMER BROWSER) OPTION C If merchant uses react/vue for single page application, 1. It returns an html page posting an event/message to the parent window in order to display payment success/ failure page. MERCHANT BACKEND MERCHANT FRONTEND

(CUSTOMER BROWSER) OPTION C If merchant uses react/vue for single page application, 1. It returns an html page posting an event/message to the parent window in order to display payment success/ failure page. 2. The customer sees the final result of the payment on page. MERCHANT BACKEND MERCHANT FRONTEND Congratulations! Payment succeeded

Hakan Erdoğan 
 hakan@cra ft gate.io h tt ps://cra ft gate.io “One Stop Shop” Payment Gateway Yıldız Teknoloji Geliştirme Bölgesi, Çi ft e Havuzlar Mah. Eski Londra Asfaltı Cad. Blok: A1 Blok Kapı No: 1B43 Esenler/İstanbul Murathan Özcan 
 murathan@cra ft gate.io Gülşah Dalkılıç gulsah.dalkilic@cra ft gate.io