Custom payment flow

How it works


Sometimes you want more control or a custom solution, that fits in with your app. That's where direct charge comes in. We provide the APIs to charge customers, but you collect their payment information and bring your UI and payment flow. This means you can customize and control the customer's experience.


There are three main stages in direct charge:

  1. Initiate the payment: You send the transaction details and the customer's payment details to the appropriate charge endpoints.

  2. Authorize the charge: The customer authorizes the charge with their payment provider, such as their card issuer or bank. This completes the charge.

  3. Verify the payment: Use callback or webhook to verify transaction.


These steps vary depending on the payment method (for example, a card charge may include multiple authorization steps).


To accept payments in your application or website, use:

  • POST /purchases/ request to create a Purchase.

  • To capture customers card details use an HTML <form> hosted on your website with method="POST" and action pointing to the direct_post_url of the transaction.


You will also need to fill the form with <input>'s for the fields with card details. As a result, when a customer submits their card details, they will be posted straight to our system, allowing you to customise the checkout as you wish.


At the same time, your PCI DSS requirement is only raised to Self-Assessment Questionnaire (SAQ A-EP), as your system doesn't receive or process card data.


📘

Please note

With Direct charge, you'll have to integrate separately for each payment method you want to support, which can be tasking. Use direct charge only when your customers use a specific payment method (like cards or banks).


Embedding the payment form in your UI


Credit Card: Using Direct post to charge a customers card in your UI:

  1. Create your webform with required payment fields
  2. Create a purchase to charge
  3. Submit form

<!DOCTYPE html>
<html>
<body>

<h2>Card Direct Post</h2>

<form action="https://gate.reviopay.com/api/v1/p/{{Insert direct_post_url}}/" method="POST">

  <label for="fname">Cardholder Name:</label><br>
  <input type="text" id="cardholder_name" name="cardholder_name" value="Input"><br><br>
  
  <label for="lname">Card number:</label><br>
  <input type="text" id="card_number" name="card_number" value="Input"><br><br>
  
  <label for="lname">Expires:</label><br>
  <input type="text" id="expires" name="expires" value="Input"><br><br>
  
  <label for="lname">CVC:</label><br>
  <input type="text" id="cvc" name="cvc" value="Input">
  
  <br><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>

❗️

Remember

Please remember to specify the success/fail redirect in the call to generate the direct_post_url.


Debit order: Using Direct post to charge a customers bank account via Debt Order in your UI:

  1. Create your web form
  2. Create a purchase to charge
  3. Execute Direct charge

pm:debicheck // or eft
PayceFirstName:Test
PayceLastName:Test
PaycePhoneNumber:0768887009 // needs to be this form
PayceIdType:idNumber // or passportNumber
PayceIdNumber:2001014800086 // needs to be valid SA ID number
PayceBranchCode:123456 // needs to be 6 digits
PayceAccountType:Current // or Savings or Transmission (case sensitive)
PayceAccount:123456781 // valid South Africa bank account

You will always receive a 200 response as this call returns HTML. The best way to check for success/errors is to GET the purchase and check the status and attempts.


📘

Pro Tip

When using postman to test this request, make sure to select x-www-form-urlencoded.

Updated 13 days ago