Integrating Moyasar Web Payment Using Credit Cards

Moyasar provides a seamless way to integrate credit card payments into your web application. Follow these steps to set up and start accepting payments.

What is a Payment Gateway?

A payment gateway is a service that authorizes and processes credit card payments for online and offline businesses. It acts as an intermediary between the merchant's website and the financial institutions involved in the transaction. Payment gateways ensure that sensitive information, such as credit card details, is securely transmitted from the customer to the acquiring bank.

How Do Payment Gateways Work?

Payment gateways work by encrypting and securely transmitting transaction details from the customer's browser to the merchant's web server and then to the payment processor. Here's a step-by-step process:

Customer Initiates Payment:
- The customer enters their payment information on the merchant's website.
Encryption:
- The payment gateway encrypts the transaction details.
Transaction Approval:
- The payment gateway sends the encrypted data to the payment processor or acquiring bank.
- The bank checks the transaction details and approves or declines the transaction based on the customer's credit limit and other factors.
Transaction Confirmation:
- The payment gateway sends the approval or decline message back to the merchant's website.
- The merchant informs the customer about the transaction status.

When Do I Need a Payment Gateway?

You need a payment gateway if you plan to accept credit card payments on your website or mobile app. It is essential for ensuring secure transactions and providing a smooth payment experience for your customers. Without a payment gateway, you would not be able to process payments securely or comply with necessary regulations.

Most Trusted Payment Gateways in Saudi Arabia

Moyasar: Known for its easy integration and robust security features.
Payfort: A reliable and secure payment gateway widely used in the Middle East.
HyperPay: Offers extensive payment options and strong security measures.
Tap Payments: Provides a seamless payment experience with multiple payment methods.

Step-by-Step Integration of Moyasar Web Payment Using Credit Cards

Step 1: Set Up Your Moyasar Account

Sign Up/Log In:
- Visit Moyasar and sign up for a new account or log in if you already have one.
Get API Keys:
- After logging in, navigate to the Dashboard.
- Go to the API Keys section and copy your Publishable Key and Secret Key. These keys will be used to authenticate your requests.

Step 2: Add Moyasar Script to Your Web Page

Include Moyasar's JavaScript library in your HTML file. Add the following script tag within the <head> section:

<head>
    <!-- Moyasar JS library -->
    <script src="https://cdn.moyasar.com/mpf/0.3.0/moyasar.min.js"></script>
</head>

Step 3: Create a Payment Form

Create a form for collecting payment details from users. Here’s a basic example:

<form id="payment-form">
    <div class="form-group">
        <label for="card-name">Cardholder Name</label>
        <input type="text" id="card-name" placeholder="John Doe" required>
    </div>
    <div class="form-group">
        <label for="card-number">Card Number</label>
        <input type="text" id="card-number" placeholder="4242 4242 4242 4242" required>
    </div>
    <div class="form-group">
        <label for="expiry-month">Expiry Month</label>
        <input type="text" id="expiry-month" placeholder="MM" required>
    </div>
    <div class="form-group">
        <label for="expiry-year">Expiry Year</label>
        <input type="text" id="expiry-year" placeholder="YY" required>
    </div>
    <div class="form-group">
        <label for="cvv">CVV</label>
        <input type="text" id="cvv" placeholder="123" required>
    </div>
    <button type="submit">Pay Now</button>
</form>

Step 4: Initialize Moyasar Payment

Add a script to handle form submission and payment processing using Moyasar’s API. Include this script at the end of your HTML file:

<script>
document.getElementById('payment-form').addEventListener('submit', function(event) {
    event.preventDefault();
 
    const cardName = document.getElementById('card-name').value;
    const cardNumber = document.getElementById('card-number').value;
    const expiryMonth = document.getElementById('expiry-month').value;
    const expiryYear = document.getElementById('expiry-year').value;
    const cvv = document.getElementById('cvv').value;
 
    Moyasar.init({
        element: '#payment-form',
        amount: 1000, // Amount in halalas (e.g., 1000 halalas = 10 SAR)
        currency: 'SAR',
        description: 'Payment Description',
        publishable_api_key: 'YOUR_PUBLISHABLE_KEY', // Replace with your Publishable Key
        on_success: function(response) {
            console.log('Payment successful:', response);
            // Handle successful payment here (e.g., show a success message or redirect)
        },
        on_failure: function(error) {
            console.error('Payment failed:', error);
            // Handle failed payment here (e.g., show an error message)
        }
    });
 
    Moyasar.pay({
        method: 'creditcard',
        creditcard: {
            name: cardName,
            number: cardNumber,
            month: expiryMonth,
            year: expiryYear,
            cvv: cvv
        }
    });
});
</script>

Step 5: Handle Payment Response

The on_success and on_failure callbacks will handle the payment response. You can customize these functions to show appropriate messages to the user or take further actions based on the payment status.

Step 6: Test Your Integration

Before going live, test your integration using test card details provided by Moyasar. Make sure to verify different scenarios like successful payments, failed payments, and handling errors.

Step 7: Go Live

Once you have thoroughly tested your integration, replace the Publishable Key and Secret Key with your live keys from the Moyasar dashboard. Your integration is now ready to accept live payments.

Conclusion

By following these steps, you can integrate Moyasar’s web payment system using credit cards into your web application. For more detailed information and advanced configurations, refer to the Moyasar Documentation.

If you encounter any issues or need further assistance, Moyasar's support team is available to help you out. Happy coding!