Payment Drop-In Buttons

Drop-in buttons extend standard buttons in order to easily integrate separate payment brands to your app. This article is intended to guide you through the process of creating and configuring drop-in buttons.

Before you start adding buttons, please install the SDK and set up your server. Then you can proceed with the following guide.

Todo Java Script

Create payment button

The easiest way to create payment button is to add it in Interface Builder. Payment button needs only payment brand to be set to automatically display appropriate logo. You can set your own logo for the button and do all necessary customizations as well.
    1. Drag-n-drop standard button to the view and set class OPPPaymentButton on Identity Inspector tab.
    2. Create an outlet for the button in your view controller.
3. Set payment brand for the button, e.g. in viewDidLoad method.

4. Customize the payment button if necessary.

Payment button

NOTE: Do the image customization before setting a payment brand. Otherwise your image might be overwritten by a default brand logo.

Implement button action method

Firstly add an action method to your view controller. In code sample you can see main steps that should be implemented in this method.

Request checkout ID

To initiate payment checkout ID should be created. Your app should request a checkout ID from your server. This example uses our sample integration server; please adapt it to use your own backend API.

Create and configure checkout provider

OPPCheckoutProvider should be initialized with payment provider, checkout ID and checkout settings.

NOTE: for some payment brands no additional user info in app is required, shopper will be directly redirected to the issuer web page (e.g. PayPal). In this case you don’t need to create checkout settings.

Tokenization

mSDK checkout page can display stored token for selected payment brand. You need to add additional parameter to the normal prepare checkout request (step 1). Your server should send shopper’s tokens along with other configuration data such as amount, currency, order type and etc.

NOTE: mSDK automatically displays the first token for selected payment brand.

Present checkout and implement callbacks

Present checkout for specific payment brand using OPPCheckoutProvider API.

Type of the first presented screen depends on payment brand:

  • Payment form (Credit cards). If the shopper has stored tokens for selected payment brand the first of them will be displayed on the screen.
  • Web page (to support asynchronous payments follow the Asynchronous Payments guide)
  • Apple Pay modal view (to support Apple Pay refer to the Apple Pay guide)

Request Payment Status

Finally your app should request the payment status from your server (again, adapt this example to your own setup).
Based on chosen approach you will have to send checkout Id or resource path to your server.

Testing

The sandbox environment only accepts test payment parameters.

You can find test values for credit cards and bank accounts in our Testing Guide.

 

Go to Production

  1. Talk to your account manager to get the live credentials.
  2. Adjust the server type to LIVE in your initialization of OPPPaymentProvider.

     3. Change your backend to use the correct API endpoints and credentials.

Note: in this section the Android version will be explained

Create payment button

The easiest way to create payment button is to add it in your layout’s xml. Payment button needs only payment brand to be set to automatically display appropriate logo. You can set your own logo for the button and do all necessary customizations as well.
  1. Add PaymentButtonFragment to your activity. You can do it in two ways: Declare it inside the activity’s layout file
<fragment
    android:name="com.oppwa.mobile.connect.checkout.dialog.PaymentButtonFragment"
    android:id="@+id/payment_button_fragment"
    android:layout_margin="10dp"
    android:layout_width="100dp"
    android:layout_height="65dp"/>

Or, programmatically add the fragment to an existing ViewGroup

Payment button

     2. Set payment brand and add OnClickListener

NOTE: If Google Pay used as a payment option add this before payment brand is set: paymentButtonFragment.setPaymentButtonIntegrationMode(PaymentButtonIntegrationMode.PAYMENT_OPTION)

          3. Customize the payment button if necessary

Tokenization

The mSDK checkout page can display stored token for selected payment brand. Add the additional parameter to the normal prepare checkout request. Your server should send shoppers’ tokens along with other configuration data such as amount, currency, order type and etc.

NOTE: mSDK automatically displays the first token for selected payment brand.

Request Checkout ID

Your app should request a checkout ID from your server. This example uses our sample integration server; please adapt it to use your own backend API.

Submit transaction

Create CheckoutSettings. You can configure the payment brands in the checkoutSettings the shopper can also use for payment in addition to the payment brand set in the setPaymentBrand method:

Or leave it empty:

Submit transaction:

Override onActivityResult to get notified when the checkout process is done:
For ASYNC transaction also override onNewIntent method of your activity

[Optional] Receiving callbacks during checkout process

The checkout may send the callback CheckoutActivity.ACTION_ON_BEFORE_SUBMIT when shopper submits the payment.
To receive it you should complete the following steps:

Create your broadcast receiver to listen the intents from the checkout.

Declare your broadcast receiver in AndroidManifest.xml.
<receiver
    android:name=".CheckoutBroadcastReceiver"
    android:exported="false" />

NOTE: It is important to set android:exported="false" to your broadcast receiver. In this case the only messages the broadcast receiver can receive are those sent by components of the same application or applications with the same user ID.

To provide the best security our SDK uses directed broadcasts. This way our broadcast is received only by the specified BroadcastReceiver. For this reason you should pass ComponentName of your receiver to the submitTransaction function.
[Only for versions from 2.26.0 upto 2.32.0] Your activity that contains payment button fragment will receive new intent from the CheckoutBroadcastReceiver for the brands that do not need UI. In this case you should pass this intent to the payment button fragment in the onNewIntent method of your activity:

Request Payment Status

Finally your app should request the payment status from your server (adapt this example to your own setup).
Based on chosen approach you will have to send checkout Id or resource path to your server.

Testing

The sandbox environment only accepts test payment parameters.

You can find test values for credit cards and bank accounts in our Testing Guide.

Go to Production

  1. Talk to your account manager to get the live credentials.
  2. Adjust the server type to LIVE in your initialization of CheckoutSettings.

     3. Change your backend to use the correct API endpoints and credentials.