<html>

<head>
  <title>Rave Inline Demo</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>

<body>
  <h1>Pay with Rave</h1>
  <div class="container" id="ravepay">
    <row>
      <div class="col-md-6 col-md-offset-4">
        <form>
          <div class="row">
            <div class="col-md-8">
              <label for="">Email address</label>
              <input type="text" name="email" id="email" class="form-control border-input" value="user@example.com" placeholder="Enter email address" style="margin-bottom: 30px;">
            </div>
          </div>

          <a class="flwpug_getpaid" data-PBFPubKey="FLWPUBK-cba53ee1341aba1ec03fcee26568ae0d-X" data-txref="rave-checkout-1500826869" data-amount="1000" data-customer_email="user@example.com" data-currency="NGN" data-pay_button_text="Pay Now" data-country="NG" data-custom_title="Demo" data-custom_description="" data-redirect_url="" data-custom_logo="" data-payment_method="both"></a> 

<script type="text/javascript" src="https://api.ravepay.co/flwv3-pug/getpaidx/api/flwpbf-inline.js"></script>
          <div class="clearfix"></div>
      </div>
      </form>

  </div>
  </row>
  </div>
 
</body>

</html>

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/lumen/bootstrap.min.css

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://api.ravepay.co/flwv3-pug/getpaidx/api/flwpbf-inline.js