Hepsipay Frontend / UI Entegrasyonu – WEB SDK
Kullanım
Detaylarına aşağıda verilen gitHub linki üzerinden de erişebilirsiniz
Github - documentation/pay-with-hepsipay/web-sdk (opens in a new tab)
<body>
<!-- ... -->
<!-- Latest version -->
<script src='https://images.hepsiburada.net/Hepsipay/packages/pf/Hepsipaylatest.min.js'></script>
<!-- Specific version (recommended) -->
<script src='https://images.hepsiburada.net/Hepsipay/packages/pf/Hepsipay0.2.4.min.js'></script>
</body>Metodlar
Init
HepsipaySdk.init(initOptions) Init metodunun ihtiyaç duyduğu bilgiler;
- frameUrl
- frameDivId
- paymentStatusCallback
- frameFailureCallback
- onPaymentSuccessCallback
- maxHeight
- disableDynamicHeight
- showFramePaymentButton
- useApiCallOnSuccessCallback
const arg = {
frameUrl: 'frameUrl',
frameDivId: 'divIdForShowingFrame',
/* Handle status of checkout button */
paymentStatusCallback: callback(isPaymentAllowed),
/* Handle frame related errors */
frameFailureCallback: callback(),
/* Handle payment failures */
onPaymentFailureLogCallback: callback(payload: {userMessage: string, userMessageTitle: string, message: string, messageCode: string, isBankError: boolean}),
/* Handle successful payment */
onPaymentSuccessCallback: callback(payload: {MerchantOrderNumber: string, merchantCallBackUrl: string, token: string}),
/* Max height value for frame div, default is set to 800px */
maxHeight: "800",
/* Resize frame wether is dynamic or static, default is set to false */
disableDynamicHeight: false,
/* Show in-frame payment button, default is set to false */
showFramePaymentButton: false,
/**
* In the BE frame-init integration, the `MerchantCallbackUrl` address defined;
* If `true`, the API call uses the POST request method (application/json).
* If `false`, the form-post method (application/x-www-form-urlencoded) is used.
* Default: false
*/
useApiCallOnSuccessCallback: false,
/**
* Payload object for relevant payment types;
* When "Kart İle Öde" selected
* @param { amount: number, actualInstallmentNumber: number, displayInstallmentNumber: number, binNumber: string, paymentType: string }
* When "Hepsipay Bakiyem İle Öde" selected
* @param { amount: number, binNumber: string, paymentType: string }
* When "Hızlı alışveriş kredisi ile öde" selected
* @param { amount: number, paymentType: string }
* When "Hepsifinans ile öde" selected
* @param { amount: number, paymentType: string }
*/
selectedPaymentInfoCallback: callback(payload),
/* You can define the google font you want to use. Default: Inter */
overrideFontFamily: "Inter",
/* Allows hide/show control of the Hepsipay logo header area: Default: false */
hideHeader: false,
}
Init metodu ödeme durumunu kontrol etmek ve frame hatalarını yönetebilmek adına 2 adet callback kullanır.
const paymentStatusCallback = (isPaymentAllowed) => {
if (isPaymentAllowed) {
// Payment allowed logic by merchant
} else {
// Payment not allowed logic by merchant
}
const frameFailureCallback = () => {
// Merchant will manage
}
HepsipaySdk.init({frameUrl, frameDivId, paymentStatusCallback,frameFailureCallback})InitPayment
HepsipaySdk.initPayment()
Satıcı sayfasında ödeme butonunun tıklanması durumunda çağrılır.
const onPayment = () => {
HepsipaySdk.initPayment();
};Frame’e mesajı post eder.Frame mesajı dinler ve ödeme sürecini ilgili mesaj tipi ile başlatır. hp-startpayment
const message = { messageType: 'hp-start-payment' };
document.getElementById('HepsipayFrame').contentWindow.postMessage(message, '*')