Billplz payment provider for Medusa commerce

Demo Link

Demo page - With NextJS starter

Demo video

medusa-payment-billplz.webm

Demo login

u: [email protected] p: 3PUdM59az6fpQtz

NPM package link

NPM - Billplz payment hackathon

About

Participants

GitHub	Discord	Twitter
@ibnumalik	ibnumalik#3920	@ibnumalikmy

Description

A Medusa plugin to extend its payment ecosystem using Billplz - a fair payment platform.

Preview

Set up Project

Prerequisites

• Medusa Server - Tested on v1.4.1
• Create an account in Billplz and get API key by following the documentation

Installation

Install plugin package in Medusa backend

npm install medusa-payment-billplz

Configure the Billplz plugin

BILLPLZ_COLLECTION_ID=<COLLECTION_ID>
BILLPLZ_API_KEY=<SECRET_KEY>
BILLPLZ_X_SIGNATURE_KEY=<XSIGNATURE_KEY>
STORE_URL=<STORE_URL>
BACKEND_URL=<BACKEND_URL>
BILLPLZ_SANDBOX=true

• COLLECTION_ID can be retrieved in Billplz billing page.
• SECRET_KEY and BILLPLZ_X_SIGNATURE_KEY is available in your account settings.
• STORE_URL is the store frontend url
• BACKEND_URL is medusa backend url

During development it’s highly recommended to set BILLPLZ_SANDBOX to true and ensure you have sandbox accounts set up in Billplz.

Then in medusa-config.js, add Billplz plugins to the plugins array. This is some of the avaibale options that can be passed to the plugin:

const plugins = [
  //other plugins...
  {
    resolve: `medusa-payment-billplz`,
    options: {
      api_key: BILLPLZ_API_KEY,
      x_signature_key: BILLPLZ_X_SIGNATURE_KEY,
      collection_id: BILLPLZ_COLLECTION_ID,
      production: !BILLPLZ_SANDBOX || false,
      store_url: STORE_URL,
      backend_url: BACKEND_URL
    }
  }
];

Resources

• Medusa - Create plugin
• Medusa - How to install plugin
• Billplz developer documentation
• Store example using this plugin

TODO

• Add instruction to use in NextJS storefront starter.
• Add library to provide components and hooks to use this plugins.