Blade + Alpine JS
Implementing the payment gateways using Alpine JS in the frontend.
Include this Alpine JS component into your application.
export default function useTakaden({ routes, redirects, orderAmount, getPayload, enabledProviders = [], selectedProvider, init = () => { }, ...otherProps }) {
return {
orderAmount,
getPayload,
getInitiateUrl() {
return routes.initiate + '/' + this.selectedProvider;
},
getExecuteUrl() {
return routes.execute + '/' + this.selectedProvider;
},
getSuccessUrl() {
return redirects.success + '?' + new URLSearchParams(this.getPayload()).toString();
},
getFailureUrl() {
return redirects.failure + '?' + new URLSearchParams(this.getPayload()).toString();
},
getCompleteUrl() {
return redirects.complete + '?' + new URLSearchParams(this.getPayload()).toString();
},
errors: {},
selectedProvider,
loading: false,
initResponse: {},
paymentProviders: [
{
name: 'bkash',
label: 'bKash',
enabled: enabledProviders.includes('bkash'),
},
{
name: 'rocket',
label: 'Rocket',
enabled: enabledProviders.includes('rocket'),
},
{
name: 'nagad',
label: 'Nagad',
enabled: enabledProviders.includes('nagad'),
},
{
name: 'upay',
label: 'Upay',
enabled: enabledProviders.includes('upay'),
},
{
name: 'bank_transfer',
label: 'Bank Transfer',
enabled: enabledProviders.includes('bank_transfer'),
},
{
name: 'cash',
label: 'Cash on Checkin ',
enabled: enabledProviders.includes('cash'),
},
],
getBkashConfig() {
return {
paymentMode: 'checkout',
paymentRequest: {
amount: this.orderAmount,
intent: 'authorization',
},
createRequest: () => {
this.initPayment()
},
executeRequestOnAuthorization: () => {
this.executePayment({
payment_id: this.initResponse.paymentID,
}).catch(error => {
bKash.execute().onError();
console.log('Bkash execution error', error);
});
},
onClose: () => {
console.log('Close Bkash Modal');
}
};
},
init() {
bKash.init(this.getBkashConfig());
this.$watch('orderAmount', () => {
document.getElementById('bKashFrameWrapper')?.remove();
bKash.init(this.getBkashConfig())
});
},
handleCheckoutFormSubmit() {
switch (this.selectedProvider) {
case 'bkash':
document.getElementById('bKash_button').click();
break;
default:
this.initPayment();
break;
}
},
async initPayment() {
this.loading = true;
this.errors = {};
return axios.post(this.getInitiateUrl(), this.getPayload()).then((response) => {
if (response.data) {
this.initResponse = response.data;
this.proceedWithProvider(true, response.data);
console.log(response.data);
} else {
throw new Error('Whoops! Something went wrong.');
}
}).catch(error => {
if (error.response?.status === 422) {
this.errors = error.response.data.errors;
} else {
this.errors = {
0: error.response?.data?.message || error.message,
};
}
// this.proceedWithProvider(false, error.response);
throw error;
}).finally(() => this.loading = false);
},
async executePayment(payload) {
return axios.post(this.getExecuteUrl(), payload)
.then(response => { window.location.href = this.getSuccessUrl(); })
.catch(error => {
if (error.response?.status === 422) {
this.errors = error.response.data.errors;
} else {
this.errors = {
1: error.response?.data?.message || error.message,
};
}
this.proceedWithProvider(false, error.response);
throw error;
});
},
async proceedWithProvider(success, responseData, provider = this.selectedProvider) {
switch (provider) {
case 'cash':
return this.proceedWithCash(success, responseData);
case 'balance':
return this.proceedWithBalance(success, responseData);
case 'bank_transfer':
return this.proceedWithBankTransfer(success, responseData);
case 'upay':
return this.proceedWithUpay(success, responseData);
case 'bkash':
return this.proceedWithBkash(success, responseData);
case 'nagad':
return this.proceedWithNagad(success, responseData);
case 'rocket':
return this.proceedWithRocket(success, responseData);
}
},
proceedWithCash(success, responseData) {
if (success) {
return window.location.href = this.getCompleteUrl();
}
},
proceedWithBalance(success, responseData) {
if (success) {
return window.location.href = this.getCompleteUrl();
}
},
proceedWithBankTransfer(success, responseData) {
if (success) {
return window.location.href = this.getCompleteUrl();
}
},
proceedWithUpay(success, responseData) {
if (success) {
return window.location.href = responseData;
}
},
proceedWithBkash(success, responseData) {
if (success) {
return bKash.create().onSuccess(responseData);
}
bKash.create().onError();
},
proceedWithNagad(success, responseData) {
if (success) {
return window.location.href = responseData;
}
window.location.href = this.getFailureUrl();
},
proceedWithRocket(success, responseData) {
},
...otherProps,
}
}
if (typeof window !== typeof undefined) {
window.useTakaden = useTakaden;
}
Bkash & SSLCommerz requires JQuery for their payment widget 😒. So, if you want to use either of them you need to include jQuery in the head of your checkout page.
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>If you want to use Bkash you'll also have to include their script after jQuery.
<script src="{{ config('takaden.providers.bkash.script_url') }}"></script>
// Or
<script src="https://scripts.sandbox.bka.sh/versions/1.2.0-beta/checkout/bKash-checkout-sandbox.js"></script>Now the main portion of your checkout page:
<div
class="max-w-6xl mx-auto"
x-data="takadenCheckout({
routes: {
initiate: '{{ route('takaden.checkout.initiate') }}',
execute: '{{ route('takaden.checkout.execute') }}',
},
redirects: {
success: '{{ route('checkout.success') }}',
failure: '{{ route('checkout.failure') }}',
complete: '{{ route('checkout.complete') }}',
},
orderAmount: @js($payment->due_total),
enabledProviders: ['bkash', 'rocket', 'nagad', 'upay', 'bank_transfer', 'cash'],
selectedProvider: '',
getPayload() {
return {
payment_method: this.selectedProvider,
orderable_id: @js($payment->id),
orderable_type: @js($payment::class),
};
},
getPayableAmount() {
return {{ $payment->due_total }};
},
handleCheckoutFormSubmit() {
switch (this.selectedProvider) {
case 'bkash':
document.getElementById('bKash_button').click();
break;
default:
this.initPayment();
break;
}
},
})"
>
<div class="flex flex-col gap-4 lg:flex-row">
{{-- Payment Info --}}
<x-payment.info :payment="$payment" />
{{-- Checkout --}}
<div class="flex-1 p-4 card">
<form @submit.prevent="handleCheckoutFormSubmit()">
<div>
<p class="mb-2 text-lg font-semibold">Select Payment Method</p>
<div class="flex flex-col gap-2">
<template
x-for="(provider, i) in paymentProviders"
x-key="i"
>
<label class="inline-flex items-center gap-2">
<input
x-model="selectedProvider"
type="radio"
name="payment_provider"
:value="provider.name"
>
<span x-text="provider.label"></span>
</label>
</template>
</div>
</div>
<div class="flex mt-4">
<button
type="submit"
class="btn btn-primary"
:disabled="loading"
>
<i :class="{ 'fa fa-arrow-right': !loading, 'fa fa-circle-notch animate-spin': loading }"></i>
<span>Continue</span>
</button>
{{-- Invisible buttons for triggering popop --}}
<button
type="button"
id="bKash_button"
class="invisible w-0 h-0"
>Pay with bKash</button>
</div>
<template x-if="errors && Object.keys(errors).length > 0">
<ul class="mt-4 space-y-1 text-red-500">
<template x-for="error in errors">
<li x-text="error"></li>
</template>
</ul>
</template>
</form>
</div>
</div>
</div>Last updated