You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
2.8 KiB
JavaScript
93 lines
2.8 KiB
JavaScript
import React, { useState, useEffect } from 'react'
|
|
import { router, usePage } from '@inertiajs/react'
|
|
|
|
import Alert from '@/Components/Alert'
|
|
|
|
export const PayButton = () => {
|
|
const {
|
|
props: { deposit, midtrans_client_key, is_production, direct, flash },
|
|
} = usePage()
|
|
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
const handleResult = (result) => {
|
|
fetch(route('api.midtrans.payment', deposit), {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ result }),
|
|
}).finally(() => {
|
|
router.get(route(route().current(), deposit))
|
|
})
|
|
}
|
|
|
|
const onClickPay = () => {
|
|
if (loading) {
|
|
return
|
|
}
|
|
setLoading(true)
|
|
window.snap.pay(deposit.payment_token, {
|
|
// Optional
|
|
onSuccess: function (result) {
|
|
console.log(result)
|
|
handleResult(result)
|
|
setLoading(false)
|
|
},
|
|
// Optional
|
|
onPending: function (result) {
|
|
console.log(result)
|
|
handleResult(result)
|
|
setLoading(false)
|
|
},
|
|
// Optional
|
|
onError: function (result) {
|
|
console.log(result)
|
|
handleResult(result)
|
|
setLoading(false)
|
|
},
|
|
onClose: function () {
|
|
setLoading(false)
|
|
},
|
|
})
|
|
}
|
|
|
|
useEffect(() => {
|
|
//change this to the script source you want to load, for example this is snap.js sandbox env
|
|
let midtransScriptUrl = 'https://app.sandbox.midtrans.com/snap/snap.js'
|
|
if (is_production) {
|
|
midtransScriptUrl = 'https://app.midtrans.com/snap/snap.js'
|
|
}
|
|
//change this according to your client-key
|
|
let scriptTag = document.createElement('script')
|
|
scriptTag.src = midtransScriptUrl
|
|
// optional if you want to set script attribute
|
|
// for example snap.js have data-client-key attribute
|
|
scriptTag.setAttribute('data-client-key', midtrans_client_key)
|
|
|
|
document.body.appendChild(scriptTag)
|
|
|
|
if (direct === 'true') {
|
|
setTimeout(() => {
|
|
onClickPay()
|
|
}, 1000)
|
|
}
|
|
|
|
return () => {
|
|
document.body.removeChild(scriptTag)
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<div className="w-full px-5 py-10">
|
|
<Alert type={flash.message.type}>
|
|
<span className="font-semibold">{flash.message.message}</span>
|
|
</Alert>
|
|
<div
|
|
className="px-4 py-2 bg-blue-700 text-white rounded-full border hover:bg-white hover:text-black"
|
|
onClick={onClickPay}
|
|
>
|
|
Bayar
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|